react-cron-schedule-typescript
v3.0.4
Published
A simple react component for creating cron expression
Downloads
16
Maintainers
Readme
React Cron Schedule
A simple and lightweight library for scheduling recurring events in React.
Getting Started
npm install react-cron-schedule-typescript
or
if you are installing from github package registry
npm install @gdev2018/react-cron-schedule-typescript
If the library is not working as expected (Only for the user installed by github package registry), you may need to add the following line to your .npmrc
file.
@gdev2018:registry=https://npm.pkg.github.com/gdev2018
Demo
Usage
import { Recurrence } from 'react-cron-schedule-typescript';
function App() {
return (
<Recurrence
onChange={(value) => console.log(value) }
/>
);
}
export default App;
Props
| Names | Type | Default | Description | Mandatory | | ------ | -------------- |---------|-------------| --------- | | value| object | |Fileds in onChange function prop, can use to edit or set default values | No | | disabled | boolean | false | Disable all fields | No | | showCronExpression | boolean | false | Show cron expression of recurring event at the bottom | No | | onChange | function | | Have single object argument, which contains user selected settings | No | | styles | object | | React style object | No |
value props
value prop can be used to pass default values
| Names | Type | Default | Description | Mandatory | | ------ | -------------- |---------|-------------| --------- | | startDate| Date/String | new Date()|The starting date of the recurring event| No | | endDate| Date/String | null |The ending date of the recurring event | No | | repeat| String | 'weekly' |The repeating of the reoccurring event. Possible values: "weekly", "monthly". | No | | frequency| Number | 1 | The interval between each recurrence. | No | | selectedEndType | String | 'noend' | The end type of the recurring event. Possible values: "noend", "date", "count" | No | | endCount | Number | 10 | The end count of the recurring event | No | | cronExpression | Array of Strings | [] | Cron Expression of the recurring event to set the fied values for editing | No | | showOnlyBottomBorder | Boolean | false | Show only bottom border for all the box components | false | | repeatFor | Number | undefined | The number of occurrence after the interval | false | | repeatForType | String | 'days' | The type of occurrence after the interval, possible values: "days", "workingDays", "weeks" | false | | isFullWeek | Boolean | false | To occure an event on the full week | false |
import { Recurrence } from 'react-cron-schedule-typescript';
function App() {
return (
<Recurrence
value = {
startDate: {new Date()},
endDate: {new Date(2030, 11, 31)},
repeat:"weekly"
}
/>
);
}
export default App;
CSS
| Rule name | Description | | ------ | -------------- | | root | styles applied to root element | | frequencyContainer | styles applied to components in frequency row | | repeatLabel | styles applied to 'Repeat' text | | repeatDropdown | styles applied to repeat selection dropdown | | selectedRepeatLabel | styles applied to selected repeat label. Eg: 'week(s)' | | frequencyInput | styles applied to frequency number input | | weekContainer | styles applied to components in week selection row | | weekdayBtnContainer | styles applied to weekday button container | | weekdayBtn | styles applied to weekday button | | selectedWeekdayBtn | styles applied to selected weekday button | | weekdayFullTextLabel | styles applied to weekday full text in mobile view checkbox | | selectedWeekdayFullTextLabel | styles applied to selected weekday full text in mobile view checkbox | | monthContainer | styles applied to components in month selection row | | onLabel | styles applied to 'On' text | | dayLabel | styles applied to 'day' text | | orLabel | styles applied to 'or' text | | dayDropdown | styles applied to day selection dropdown in month. Eg: 1 - 31 | | orderDropdown | styles applied to order selection dropdown in month: 'First', 'Second', etc | | monthWeekdayDropdown | styles applied to weekday selection dropdown in month: 'Monday', 'Day', etc | | dateContainer | styles applied to components in date selection row | | startLabel | styles applied to 'Start' text | | endLabel | styles applied to 'End' text | | startDate | styles applied to start date picker | | endDate | styles applied to end date picker | | endType | styles applied to end type selection dropdown. Eg: 'date', 'count', etc | | endCount | styles applied to end count number input | | recurrenceText | styles applied to recurrenct text | | cronExpression | styles applied to cronExpression text |
import { Recurrence } from 'react-cron-schedule-typescript';
function App() {
return (
<Recurrence
repeat="weekly"
styles= {
repeatDropdown: {
border: '0px',
borderBottom: '1px solid',
paddingBottom: 3
},
frequencyInput: {
border: '0px',
borderBottom: '1px solid',
paddingBottom: 3
},
weekContainer:{
marginBottom: 20,
marginTop: 15
},
selectedWeekdayBtn: {
backgroundColor: 'green'
},
dateContainer:{
marginBottom: 30
},
startDate: {
border: '0px',
borderBottom: '1px solid',
paddingBottom: 3
},
endDate: {
border: '0px',
borderBottom: '1px solid',
paddingBottom: 3
},
endType: {
border: '0px',
borderBottom: '1px solid',
paddingBottom: 3
},
recurrenceText: {
color: 'orange'
},
}
/>
);
}
export default App;
License
React Recurring Job is open-sourced library licensed under the Apache license.