Skip to content

cardiosMircem/ngx-cron-editor

 
 

Repository files navigation

@cardiosmircem/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 👈 👈 👈

Package

Npm package can be found 👉 👉 👉 here 👈 👈 👈

Usage

  1. Install the npm package

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

    import { CronEditorModule } from '@cardiosmircem/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 '@cardiosmircem/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": "Hours",
      "language": "Language",
      "last": "last",
      "lastDay": "last day",
      "lastWeekDay": "last week",
      "minutes": "Minutes",
      "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": "From monday to friday 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.

About

Graphically build a CRON expression for Angular 6+

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 60.7%
  • HTML 32.4%
  • JavaScript 6.3%
  • CSS 0.6%