https://github.com/haavardj/ngx-cron-editor
Graphically build CRON expressions in Angular 15+
https://github.com/haavardj/ngx-cron-editor
Last synced: about 1 month ago
JSON representation
Graphically build CRON expressions in Angular 15+
- Host: GitHub
- URL: https://github.com/haavardj/ngx-cron-editor
- Owner: haavardj
- License: mit
- Created: 2018-06-05T14:08:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-25T13:16:27.000Z (about 1 year ago)
- Last Synced: 2025-09-02T03:59:29.369Z (2 months ago)
- Language: TypeScript
- Homepage: https://github.com/haavardj/ngx-cron-editor
- Size: 6.5 MB
- Stars: 45
- Watchers: 4
- Forks: 108
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - ngx-cron-editor - A graphical cron expression builder component for Angular 15+, designed for seamless integration with reactive forms and styled using Angular Material Design. (Third Party Components / Form Controls)
- fucking-awesome-angular - ngx-cron-editor - A graphical cron expression builder component for Angular 15+, designed for seamless integration with reactive forms and styled using Angular Material Design. (Third Party Components / Form Controls)
README
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 work-in-progress demo can be found [here](https://haavardj.github.io/ngx-cron-editor/)
## Usage
1. Install the npm package:
```
$ npm i ngx-cron-editor -S
```
2. Import the module in your own module:
```ts
import { CronEditorModule } from 'ngx-cron-editor';
@NgModule({
imports: [..., CronEditorModule],
...
})
export class MyModule {
}
```
3. Setup the FormControl in you component's typescript file:
```ts
ngOnInit(): void {
this.cronForm = new FormControl('0 0 1/1 * *');
}
```
4. Include the component in your html code:
```html
```
or use the `formControlName='...'` directive if your form controller
lives in a FormGroup.
## Options
```html
```
```ts
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
};
}
```
## History
The ngx-cron-editor is a fork of the vincentjames501's [angular-cron-gen](https://github.com/vincentjames501/angular-cron-gen) for AngularJS 1.5+ and claudiuconstantin's [cron-editor](https://github.com/claudiuconstantin/cron-editor).
**The main additions of this fork is support for Angular 8+ and material design.**
## License:
Licensed under the MIT license