--- title: "JQuery Timeline Recurring Events Example | Mobiscroll" component: "Timeline" framework: "jQuery" library_version: "6.1.5" url: "https://demo.mobiscroll.com/jquery/timeline/recurring-events" --- # Recurring Events - jQuery Timeline demo Configure daily, weekly, monthly, and yearly recurring events on a JQuery Timeline — use the configurator to set rules, exclude dates, and build RRULE strings. For jQuery or jQuery Mobile. - [Live demo](https://demo.mobiscroll.com/jquery/timeline/recurring-events) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/timeline/recurring-events) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/recurring-events.md), [Angular](https://demo.mobiscroll.com/angular/timeline/recurring-events.md), [React](https://demo.mobiscroll.com/react/timeline/recurring-events.md), [Vue](https://demo.mobiscroll.com/vue/timeline/recurring-events.md) ## Description Configure `daily`, `weekly`, `monthly` and `yearly` recurring events. On top of setting up recurrence, you can exclude specific and recurring days. This is especially useful in cases when a single occurrence of an event is deleted or is moved to a different time. You can pass the recurrence rule in the `recurring` property of the event as an object or a string in `RRULE` format. [Learn about the event data structure and where to place the recurring rules](https://demo.mobiscroll.com/jquery/timeline/event-data-structure). Use the configurator to experiment, build strings and objects that you can grab and use. **Interested in adding recurrence configuration to your UI?** [Take a look at this add/edit dialog →](https://demo.mobiscroll.com/jquery/eventcalendar/recurring-event-add-edit-dialog) ## 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 event 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 event indefinitely. - **Run until date** Shows an option with a date input that opens a date picker and repeats the event until a specific date. - **Run until occurrences** Shows an option with a numeric input that repeats the event 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 events 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 event 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 ```js // JS Object recurring: { repeat: 'daily', interval: 1 } // RRULE String recurring: 'FREQ=DAILY;INTERVAL=1' ``` With "Recurring rule" off: ```js ``` ### Recurrence exception rule ```js // JS Object recurringExceptionRule: { repeat: 'monthly', day: 1, interval: 1 } // RRULE String recurringExceptionRule: 'FREQ=MONTHLY;BYMONTHDAY=1;INTERVAL=1' ``` With "Exclude from recurring events" on: ```js 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: ```js ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option - [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option - [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option - [`eventDelete`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-eventDelete) - option - [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option - [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option - [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option ## Code ### JS ```js mobiscroll.setOptions({ theme: 'ios', themeVariant: 'light' }); $(function () { $('#demo-recurring-events') .mobiscroll() .eventcalendar({ clickToCreate: true, dragToCreate: true, dragToMove: true, dragToResize: true, eventDelete: true, view: { timeline: { type: 'week' }, }, data: [ { recurring: { repeat: 'daily', // Possible values: 'daily', 'weekly', 'monthly', 'yearly' from: '2021-06-01', // The start date of the occurrences until: '2021-07-20', // The end date of the occurrences }, recurringException: ['2021-07-05', new Date(2021, 6, 6)], // Can contain string or date object recurringExceptionRule: { repeat: 'monthly', day: 1, }, title: 'Holiday', allDay: true, resource: [1, 2, 3, 4, 5], }, { 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) }, title: 'Shopping day', resource: 4, }, { recurring: { repeat: 'monthly', day: 15, count: 12, // The number of occurrences }, title: 'Pay day', resource: 5, }, { recurring: { repeat: 'yearly', day: 1, month: 1, }, title: "New Year's Eve", resource: 2, }, ], resources: [ { id: 1, name: 'Resource A', color: '#fdf500', }, { id: 2, name: 'Resource B', color: '#ff0101', }, { id: 3, name: 'Resource C', color: '#01adff', }, { id: 4, name: 'Resource D', color: '#239a21', }, { id: 5, name: 'Resource E', color: '#ff4600', }, ], }); }); ``` ### HTML ```html
``` ## Implementation notes - Use `timeline: { type: 'week' }` - a week view. - Define 5 resources: Resource A (yellow `#fdf500`), Resource B (red `#ff0101`), Resource C (blue `#01adff`), Resource D (green `#239a21`), Resource E (orange `#ff4600`). - Define 4 events, each demonstrating a different `recurring` repeat type: 1. **Daily** - "Holiday" (`allDay: true`, assigned to all 5 resources via `resource: [1, 2, 3, 4, 5]`): ``` recurring: { repeat: 'daily', from: '2021-06-01', until: '2021-07-20' } recurringException: ['2021-07-05', new Date(2021, 6, 6)] recurringExceptionRule: { repeat: 'monthly', day: 1 } ``` - `from`/`until` bound the occurrence range to June 1-July 20, 2021. - `recurringException` removes specific dates: July 5 (ISO string) and July 6 (Date object) - showing that both formats are accepted. - `recurringExceptionRule` removes all occurrences that fall on the 1st of any month (in this range, July 1). 2. **Weekly** - "Shopping day" (resource D): ``` recurring: { repeat: 'weekly', weekDays: 'SA', interval: 2 } ``` Repeats every other Saturday. `weekDays` accepts a comma-separated string of day codes: `'SU'`, `'MO'`, `'TU'`, `'WE'`, `'TH'`, `'FR'`, `'SA'`. 3. **Monthly** - "Pay day" (resource E): ``` recurring: { repeat: 'monthly', day: 15, count: 12 } ``` Repeats on the 15th of each month for 12 occurrences total. 4. **Yearly** - "New Year's Eve" (resource B): ``` recurring: { repeat: 'yearly', day: 1, month: 1 } ``` Repeats on January 1st every year. ## 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-jquery.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 jquery ``` 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 jquery --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation ## Related demos - Previous: [Date Input Formats](https://demo.mobiscroll.com/jquery/timeline/date-object-ISO-8601-moment.md) - Pass JavaScript date objects, ISO 8601 strings, or Moment.js dates to events, marked dates, colors, and labels in the JQuery Timeline.