Recurring Events
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.
Use the configurator to experiment, build strings and objects that you can grab and use.
Demo
The event will be repeated every day or every x days, depending on the value
The event will be repeated every x weeks on specific weekdays
The event will be repeated every x month on specific day of the month
The event will be repeated every x years on specific day of a specific month
The event will be repeated every x month on the specified nth weekday of the month
The event will be repeated every x years on the specified nth weekday of the specific month
The event will be repeated every day or every x days, depending on the value
The event will be repeated every x weeks on specific weekdays
The event will be repeated every x month on specific day of the month
The event will be repeated every x years on specific day of a specific month
The event will be repeated every x month on the specific nth weekday of the month
The event will be repeated every x years on the specific nth weekday of the specific month
// JS Object
recurring: {
repeat: 'daily ',
count: 1 ,
until: '
pos:
weekDays: '
day:
month:
interval: 1
}
// RRULE String
recurring: 'FREQ=COUNT= UNTIL= BYSETPOS= BYDAY= BYMONTHDAY= BYMONTH= INTERVAL=1 ' recurringException: [, // Exact dates can only be passed in an array
// JS Object
recurringExceptionRule: {
repeat: 'monthly ',
count: 1 ,
until: '
pos:
weekDays: '
day: 1 ,
month:
interval: 1
}
// RRULE String
recurringExceptionRule: 'FREQ=COUNT= UNTIL= BYSETPOS= BYDAY= BYMONTHDAY= BYMONTH= INTERVAL=1 ' 
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
$('#demo-recurring-events')
.mobiscroll()
.eventcalendar({
clickToCreate: ,
dragToCreate: ,
dragToMove: ,
dragToResize: ,
eventDelete: ,
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',
},
],
});
});
<div id="demo-recurring-events"></div>