Ngx-cron-editor NPM

ngx-cron-editor

An Angular 15+ component for building cron expressions graphically. It is meant to be used in reactive forms and support Angular Material Design styling.

Demo

A demo can be found here

Usage

Install the npm package:
```
$ npm i ngx-cron-editor -S
```

Import the module in your own module:

import { CronEditorModule } from 'ngx-cron-editor';

@NgModule({
    imports: [..., CronEditorModule],
...
})
export class MyModule {
}

Setup the FormControl in you component's typescript file:

ngOnInit(): void {
  this.cronForm = new FormControl('0 0 1/1 * *');
}

Include the component in your html code:
```
<cron-editor [formControl]="cronForm"></cron-editor>
```
or use the formControlName='...' directive if your form controller lives in a FormGroup.

Options

<cron-editor [formControl]="cronForm" [options]="cronOptions"></cron-editor>

import { CronOptions } from 'ngx-cron-editor';

@Component({
    ...
})
export class MyComponent {
   public cronOptions: CronOptions = {
       defaultTime: "00:00:00",

       hideMinutesTab: false,
       hideHourlyTab: false,
       hideDailyTab: false,
       hideWeeklyTab: false,
       hideMonthlyTab: false,
       hideYearlyTab: false,
       hideAdvancedTab: true,
       hideSpecificWeekDayTab: false,
       hideSpecificMonthWeekTab : false,

       use24HourTime: true,
       hideSeconds: false,

       cronFlavor: "quartz" //standard or quartz
    };
}