cron-editor-ngx-translate
v1.0.3
Published
A cron expression generator to be used in Angular applications
Downloads
15
Maintainers
Readme
cron-editor-ngx-translate
cron-editor-ngx-translate
is library that helps the user graphically build a CRON expression (quartz format only) in an Angular application.
It is a fork of cron-editor.
This library uses the Bootstrap 3 CSS classes, but does not include them. You can style the component yourself.
The purpose of this fork is ability to use cron-editor
with ngx-translate
.
Demo
A demo of this library can be found here.
Installation
This library is published as a npm package.
npm install cron-editor-ngx-translate --save
Usage
1. Import the CronEditorModule
:
For example, in AppModule
:
import {CronEditorModule} from 'cron-editor-ngx-translate';
@NgModule({
imports: [..., CronEditorModule],
...
})
export class AppModule {
}
2. Initialize translations
For example, in AppComponent
.
This library has support for two languages out of the box: English & Russian. Example:
import {Component} from '@angular/core';
import {CronEditorTranslateService} from 'cron-editor-ngx-translate';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private cronEditorTranslateService: CronEditorTranslateService) {
cronEditorTranslateService.init({
existent: [
{
lang: 'en', // name of language used in your project
useExistent: 'en' // code of library language; Possible values: 'en' | 'ru'
},
{lang: 'ru', useExistent: 'ru'}
]
});
}
}
You can partially modify existing translations:
{
lang: 'en',
useExistent: 'en',
patch: {
TABS: {
ADVANCED: 'Pro',
...
},
...
}
}
You can add your languages:
cronEditorTranslateService.init({
existent: [{lang: 'en', useExistent: 'en'}],
custom: [
{
lang: 'es',
translations: {
TABS: {
ADVANCED: 'Avanzado',
...
},
...
}
}
]
});
3. Add extend: true
in TranslateModule.forRoot()
:
TranslateModule.forRoot({
loader: { ... },
extend: true
})
This is necessary in order to extend your translations with the translations of this library.
4. Use component
Template:
<cron-editor
[(cron)]="cronExpression"
[disabled]="isCronDisabled"
[options]="cronOptions"
></cron-editor>
Component:
import {Component} from '@angular/core';
import {CronOptions} from 'cron-editor-ngx-translate';
@Component({
selector: 'app-my',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss']
})
export class MyComponent {
// Hangfire 1.7+ compatible expression: '3 2 12 1/1 ?'
// Quartz compatible expression: '4 3 2 12 1/1 ? *'
public cronExpression = '0 12 1W 1/1 ?';
public isCronDisabled = false;
public cronOptions: CronOptions = {
formInputClass: 'form-control cron-editor-input',
formSelectClass: 'form-control cron-editor-select',
formRadioClass: 'cron-editor-radio',
formCheckboxClass: 'cron-editor-checkbox',
defaultTime: '10:00:00',
use24HourTime: true,
hideMinutesTab: false,
hideHourlyTab: false,
hideDailyTab: false,
hideWeeklyTab: false,
hideMonthlyTab: false,
hideYearlyTab: false,
hideAdvancedTab: false,
hideSeconds: true,
removeSeconds: true,
removeYears: true
};
}
Development
1. Install dependencies
npm install
2. Build the library
npm run package
3. Run sample application
ng serve -o
License
Licensed under the MIT license.