React-cron-schedule NPM

React Cron Schedule

A simple and lightweight library for scheduling recurring events in React.

Getting Started

npm install react-cron-schedule

if you are installing from github package registry

npm install @qubryx/react-cron-schedule

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.

  @qubryx:registry=https://npm.pkg.github.com/qubryx

Demo

Live Demo

Usage

import { Recurrence } from 'react-cron-schedule';

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	String	''	Cron Expression of the recurring event to set the fied values for editing	No
showOnlyBottomBorder	Boolean	''	Show only bottom border for all the box components	false

import { Recurrence } from 'react-cron-schedule';

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';

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;