@tarktech/ngx-cron-editor
TypeScript icon, indicating that this package has built-in type declarations

1.0.15 • Public • Published

@tarktech/ngx-cron-editor

An angular component for building cron expressions graphically with i18n localization available 🥳. Other fixes are from the previous ngx-cron-editor-libraries are:

  • usage of solely reactive forms (got rid of template forms) 🤓
  • useful scripts are added in order to make future development easy 😌
  • code not needed removed 🚮

Demo

A demo can be found 👉 👉 👉 here 👈 👈 👈

Usage

  1. Install the npm package

    $ npm i @tarktech/ngx-cron-editor
    
  2. import the module in your own module

    import { CronEditorModule } from '@tarktech/ngx-cron-editor';
    
    @NgModule({
        imports: [..., CronEditorModule],
    ...
    })
    export class MyModule {
    }
  3. in your html code include

    <app-cron-editor
      [options]="cronOptions"
      [cronStartingValue]="cronValue"
      (cronChange)="seeCron($event)"
    >
    </app-cron-editor>
  4. While in your ts component you have

import { CronOptions } from '@tarktech/ngx-cron-editor';

@Component({
    ...
})
export class MyComponent {
  cronValue = '0 0 1/1 * *';

  cronOptions: CronOptions = {
    hideMinutesTab: false,
    hideHourlyTab: false,
    hideDailyTab: false,
    hideWeeklyTab: false,
    hideMonthlyTab: false,
    hideYearlyTab: false,
    hideAdvancedTab: false,
    hideSpecificWeekDayTab: false,
    hideSpecificMonthWeekTab: false,
    use24HourTime: true,
    hideSeconds: false,
    cronFlavor: 'standard'
  };
  ...
}
  1. finally add these translations (in your en.json for example)
"cronEditor": {
  "lbl": {
    "advanced": "Advanced",
    "at": "at",
    "atTime": "at the hour",
    "every": "Every",
    "daily": "Daily",
    "day": "Day",
    "days": "Days",
    "expression": "Cron expression",
    "fromMonthday": "From month day",
    "daysAndFrom": "days from",
    "firstWeekDay": "first week",
    "flavor": "Flavor",
    "fromDate": "from",
    "hourly": "Hourly",
    "hours": "Hour",
    "language": "Language",
    "last": "Last",
    "lastDay": "last day",
    "lastWeekDay": "last week",
    "minutes": "Minute",
    "month": "Month",
    "monthPlural": "Months (from the month of january)",
    "months": {
      "january": "January",
      "february": "February",
      "march": "March",
      "april": "April",
      "may": "May",
      "june": "June",
      "july": "July",
      "august": "August",
      "september": "September",
      "october": "October",
      "november": "November",
      "december": "December"
    },
    "monthly": "Monthly",
    "of": "of",
    "ofEvery": "of every",
    "onThe": "On the",
    "onTheDouble": "On the",
    "onTheDoubleMale": "On the",
    "onTheTriple": "On the",
    "onTheFeminine": "On the",
    "seconds": "Seconds",
    "selectCronFlavor": "Select your cron flavor",
    "week": "Week",
    "weekDays": "Weekdays at",
    "yearly": "Yearly",
    "first": "First",
    "second": "Second",
    "third": "Third",
    "fourth": "Fourth",
    "fifth": "Fifth",
    "MON": "Monday",
    "TUE": "Tuesday",
    "WED": "Wednesday",
    "THU": "Thursday",
    "FRI": "Friday",
    "SAT": "Saturday",
    "SUN": "Sunday",
    "weekly": "Weekly"
  }
}

API

Name Description
@Input()
options: CronOptions
Options for obtaining your desired UI
@Input()
cronStartingValue: string
Starting value for example
@Output()
cronChange: EventEmitter<string>
Event emitted when the selection on the cron expression changes

Development

  1. Clone the repo

  2. npm install

  3. npm run pack-install

Enjoy developing 🏖️ 🌞 🍹

History

This package repository has been forked from ngx-cron-editor.

License

Licensed under the MIT license.

Package Sidebar

Install

npm i @tarktech/ngx-cron-editor

Weekly Downloads

9

Version

1.0.15

License

MIT

Unpacked Size

368 kB

Total Files

22

Last publish

Collaborators

  • chirag_shingala-tark
  • rparakhiya
  • megha.aapaliya
  • ashish.aapaliya