--- title: "React Date & Time Recurring values Example | Mobiscroll" component: "Date & Time" framework: "React" library_version: "6.1.5" url: "https://demo.mobiscroll.com/react/datetime/recurring-values" --- # Recurring values - React Date & Time demo Learn how to create recurring rules, RRULE and use them for disabling dates on the React date & time picker. - [Live demo](https://demo.mobiscroll.com/react/datetime/recurring-values) - [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/datetime/recurring-values) - [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/datetime/recurring-values) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/recurring-values.md), [jQuery](https://demo.mobiscroll.com/jquery/datetime/recurring-values.md), [Angular](https://demo.mobiscroll.com/angular/datetime/recurring-values.md), [Vue](https://demo.mobiscroll.com/vue/datetime/recurring-values.md) ## Description Disable recurring days, set marked or colored days with the help of the `recurring` object. Learn how to configure `daily`, `weekly`, `monthly` and `yearly` recurring dates and pass a rule in the `recurring` property under the [`invalid`](https://mobiscroll.com/docs/react/datepicker/api#opt-invalid) option. Exceptions for specific and recurring days can be configured. Use the configurator to experiment, build strings and objects that you can grab and use. **Interested in disabling dates?** [Discover how invalids work →](https://demo.mobiscroll.com/react/datetime/disabled-invalid-values) ## What this demo shows - Shows an interactive recurrence configurator with three selectable sections for defining recurrence rules, excluded dates, and recurring exclusions. - **Recurring rule** Displays a selectable row with an input that reflects the currently selected recurrence settings and a dark blue `Edit` button. - **Recurring rule popup** Clicking the input or the `Edit` button opens a popup below the input. - **Recurrence type** The top of the popup contains a segmented control with `Daily`, `Weekly`, `Monthly`, and `Yearly` options, where the selected option defines the recurrence type. - **Repeat interval** Below the segmented control, the popup shows a `Repeat every [input] days` field with helper text explaining that the date repeats every day or every `x` days based on the entered value. - **Stop condition** The bottom part of the popup contains a `Stop condition` section with three options for ending the recurrence. - **Never stop** Shows an option that repeats the date indefinitely. - **Run until date** Shows an option with a date input that opens a date picker and repeats the date until a specific date. - **Run until occurrences** Shows an option with a numeric input that repeats the date until it reaches a specified number of occurrences. - **Code preview** Next to the recurrence rule configurator, a code snippet updates to show the selected values and how the recurring rule should be configured. - **Exclude specific dates** Shows a selectable section for excluding dates from recurring dates with an `Exclude [input] from recurring events` field. - **Date exclusion picker** Clicking the exclude input opens a date picker where multiple dates can be selected. - **Recurring exclusions** Shows a third selectable section for defining a specific recurring rule for the days to exclude. - **Recurring exclusions code preview** Next to this section, a code snippet shows the selected exclusion values and how that recurring rule should be configured. ## Best for - **Learning recurrence setup** Explaining to Mobiscroll users how recurring date rules can be configured. ## Tutorial ### Recurring rule - [x] Recurring Daily; Repeat every 1 day(s); Never stop; ### Add exceptions for specific days - [ ] Exclude `2026-10-10, 2026-10-23, 2026-10-28` from recurring events ### Specify recurring rule for days to exclude - [x] Recurring Monthly; Repeat every 1 month(s) on the First; Never stop; ### Recurrence rule ```jsx // JS Object recurring: { repeat: 'daily', interval: 1 } // RRULE String recurring: 'FREQ=DAILY;INTERVAL=1' ``` With "Recurring rule" off: ```jsx ``` ### Recurrence exception rule ```jsx // JS Object recurringExceptionRule: { repeat: 'monthly', day: 1, interval: 1 } // RRULE String recurringExceptionRule: 'FREQ=MONTHLY;BYMONTHDAY=1;INTERVAL=1' ``` With "Exclude from recurring events" on: ```jsx recurringException: ['2026-10-10','2026-10-23','2026-10-28'], // Exact dates can only be passed in an array // JS Object recurringExceptionRule: { repeat: 'monthly', day: 1, interval: 1 } // RRULE String recurringExceptionRule: 'FREQ=MONTHLY;BYMONTHDAY=1;INTERVAL=1' ``` With "Specify recurring rule for days to exclude" off: ```jsx ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option - [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option - [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option - [`invalid`](https://mobiscroll.com/docs/react/datepicker/api#opt-invalid) - option ## Code ### JSX ```jsx import { Datepicker, setOptions } from '@mobiscroll/react'; import { useMemo } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); function App() { const myInvalid = useMemo( () => [ { recurring: { repeat: 'daily', // Possible values: 'daily', 'weekly', 'monthly', 'yearly' from: '2020-12-01', // The start date of the occurrences until: '2021-01-31', // The end date of the occurrences }, recurringException: ['2020-12-30', new Date(2020, 11, 31)], // Can contain string or date object recurringExceptionRule: { repeat: 'monthly', day: 10, }, }, { recurring: { repeat: 'weekly', weekDays: 'SA', // Comma separated list of the week days, possible values: 'SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA' interval: 2, // The time interval for the rule (every 2 weeks in this example) }, }, { recurring: { repeat: 'monthly', day: 15, count: 12, // The number of occurrences }, }, { recurring: { repeat: 'yearly', day: 1, month: 1, }, }, ], [], ); return (
); } export default App; ``` ### TSX ```tsx import { Datepicker, setOptions } from '@mobiscroll/react'; import { FC, useMemo } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); const App: FC = () => { const myInvalid = useMemo( () => [ { recurring: { repeat: 'daily', // Possible values: 'daily', 'weekly', 'monthly', 'yearly' from: '2020-12-01', // The start date of the occurrences until: '2021-01-31', // The end date of the occurrences }, recurringException: ['2020-12-30', new Date(2020, 11, 31)], // Can contain string or date object recurringExceptionRule: { repeat: 'monthly', day: 10, }, }, { recurring: { repeat: 'weekly', weekDays: 'SA', // Comma separated list of the week days, possible values: 'SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA' interval: 2, // The time interval for the rule (every 2 weeks in this example) }, }, { recurring: { repeat: 'monthly', day: 15, count: 12, // The number of occurrences }, }, { recurring: { repeat: 'yearly', day: 1, month: 1, }, }, ], [], ); return ; }; export default App; ``` ## Implementation notes - Use `controls: ['date']` (or another wheel view) with entries in the `invalid` array that carry a `recurring` object instead of a fixed `date`. - `recurring` supports `repeat: 'daily' | 'weekly' | 'monthly' | 'yearly'`, plus: `interval` (repeat every N units); `weekDays` (comma-separated day codes `'SU','MO','TU','WE','TH','FR','SA'`, weekly/monthly-by-position/yearly-by-position rules); `day`/`month` (fixed day-of-month / month-of-year, monthly/yearly rules); `pos` (ordinal `1`/`2`/.../`-1` for last, combined with `weekDays` for "the second Tuesday of every month"-style rules); `count` (stop after N occurrences); `until` (stop on a specific date, formatted `'YYYY-MM-DD'`). - To exclude specific dates from an otherwise-recurring set, add a sibling `recurringException` array of exact date strings. - To exclude an entire recurring pattern of dates (rather than individual ones), add a sibling `recurringExceptionRule` object with the same shape as `recurring` - any date matching that rule is skipped. - A recurring entry and its exceptions live on the same array item, e.g. `{ recurring: { repeat: 'monthly', day: 1 }, recurringException: ['2021-07-05'], recurringExceptionRule: { repeat: 'monthly', day: 1, month: 12 } }`. - `recurring` (and `recurringExceptionRule`) can alternatively be passed as an RRULE string instead of an object, e.g. `'FREQ=WEEKLY;BYDAY=SA;INTERVAL=2'` - `repeat`/`interval`/`weekDays`/`day`/`month`/`pos`/`count`/`until` map to `FREQ`/`INTERVAL`/`BYDAY`/`BYMONTHDAY`/`BYMONTH`/`BYSETPOS`/`COUNT`/`UNTIL`. ## Run it in your project 1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial). 2. Clone the repository: ``` git clone https://github.com/acidb/mobiscroll-demos-react.git ``` 3. If not installed yet, install the Mobiscroll CLI from NPM: ``` npm install -g @mobiscroll/cli ``` 4. Config Mobiscroll - open a terminal window in the root directory and run: ``` mobiscroll config react ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` npm run dev ``` On a trial, add `--trial` to the config command: `mobiscroll config react --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation ## Related demos - Previous: [Disabled values](https://demo.mobiscroll.com/react/datetime/disabled-invalid-values.md) - React datepicker example for setting invalid days, disabling dates, weekends, holidays, specific and recurring dates.