Event Calendar

Parameters

• originalRecurringEvent: Object - The original recurring event to update.
• oldEventOccurrence: Object, null - The old event occurrence, if there's any.
• newEvent: Object, null - The new event, if there's any.
• updatedEvent: Object, null - The updated event, if there's any.
• updateMode: String Specifies which part of the event to update. Possible values:
  • 'current' - This event occurrence only.
  • 'following' - This and following events.
  • 'all' - All event occurrences.

Parameters

• event: Object - The event object has the following properties:
  • clone: HtmlElement - The clone of the dragging element. When dragging an external element we create a clone for a better illustration of the movement.
  • data: Object - The dragged calendar event data.
  • domEvent: Event - The DOM event of the dragged event.
• inst: Object - The instance object of the eventcalendar.

Parameters

• event: Object - The event object has the following properties:
  • clone: HtmlElement - The clone of the dragging element. When dragging an external element we create a clone for a better illustration of the movement.
  • data: Object - The dragged calendar event data.
  • domEvent: Event - The DOM event of the dragged event.
• inst: Object - The instance object of the eventcalendar.

Parameters

• event: Object - The event object has the following properties:
  • clone: HtmlElement - The clone of the dragging element. When dragging an external element we create a clone for a better illustration of the movement.
  • data: Object - The dragged calendar event data.
  • domEvent: Event - The DOM event of the dragged event.
• inst: Object - The instance object of the eventcalendar.

• Gregorian - This is the default calendar system, no setting needs to be passed.
• Jalali - Default system of the Persian calendar. The Farsi language needs to be included to the package.

  mobiscroll.eventcalendar('#mycalendar', {
    calendarSystem: mobiscroll.jalaliCalendar
  });
  

• Hijri - Arabic language needs to be included to the package.

  mobiscroll.eventcalendar('#mycalendar', {
    calendarSystem: mobiscroll.hijriCalendar
  });
  

Using the extendDefaultEvent option extra properties can be set for the created event.

The event deletion functionality can be overwritten using the eventDelete option.

• allDay Boolean - Specifies whether the date you want to color is all day or not.
• date Date, String, Object - Date of the calendar day which should be colored.
• start Date, String, Object - Start date/time of the calendar days/cells which should be colored.
• end Date, String, Object - End date/time of the calendar days/cells which should be colored.
• background: String - Background color of the cell, can be any valid CSS color ('red', '#ff0000', 'rgb(255,0,0)', etc.).
• highlight: String - Highlight color of the day, can be any valid CSS color ('red', '#ff0000', 'rgb(255,0,0)', etc.).
• recurring String, Object - Recurrence rule for coloring recurring days.
• recurringException: String, Object, Array - Represents the exceptions of a recurring color. Useful when specific dates need to be skipped from the rule.
• recurringExceptionRule: String, Object - Represents the exception rule of a recurring color. Useful when recurring dates need to be skipped from the rule.
• cellCssClass: String - CSS class for the day cell. This property is only applicable in the case of the calendar view.
• resource: String, Number, Array of String | Number - specify resource ids for the color. The color will display only in the specified resource group. If there is no resource id defined the color will be displayed at every resource group.
• slot: String, Number - specify slot ids for the color. The color will display only in the specified slot group. If there is no slot id defined the color will be displayed at every slot group.
• textColor: String - Specifies the color of the colored range title.
• title: String - Text which will be displayed on the schedule/timeline view for the colored range.
• cssClass String - Specifies the custom CSS class name of the color. Useful when customization is needed for the background of cells and time ranges. This property is only applicable in the case of the scheduler and timeline view.

colors: [
    { date: new Date(2020,2,23), background: 'pink' },
    { date: new Date(2020,2,24), background: 'green' },
    { background: '#ff0000', recurring: { repeat: 'weekly', weekDays: 'SU' } },
    { background: 'yellow', recurring: { repeat: 'weekly', weekDays: 'SA' } }
]

Define connections between events. On the ui events will be linked with lines and additionally arrows can be displayed to illustrate the direction of the connection. Events can have multiple connections simultaneously.

An array of connection object can be passed to this option.The connection object has the following properties:

• arrow: String, Boolean - define and specify where to disaply arrows. The following string values are supported 'from' | 'to' | 'bidirectional''. If true arrow will display only at the end side of the connection.
• color: String - define the color of the connection.
• cssClass: String - add a specific css class to the connection for further customization.
• from: String - the id of the event where the connection will begin.
• to: String - the id of the event where the connection will end.
• type: String - define and specify the type of the connection. The following values are supported: 'fs' | 'sf' | 'ss' | 'ff''. Meaning of abbreviations: finish-to-start, start-to-finish, start-to-start, finish-to-finish. If not provided, it defaults to'fs'.

connections: [{
  arrow: 'to',
  color: 'red',
  cssClass: 'my-test-class',
  from: 2,
  to: 3,
  type: 'fs'
},
{
  arrow: 'to',
  color: 'rgb(255,69,0)',
  from: 1,
  to: 6,
  type: 'ss'
}]

• idString, Number - A unique id for the event. If not specifed, the event will get a generated id.
• startDate, String, Object - Specifies the start of the event.
• endDate, String, Object - Specifies the end of the event.
• titleString - The title of the event.
• colorString - The color of the event.
• allDayBoolean - Specifies if the event is all day or not.
• editable: Boolean - specify if an event is editable or not. Setting it to false disables drag & drop, resize and delete, and the event will have mbsc-readonly-event css class. With this class, the fixed events will be easily customizable, for example: add opacity or disable the cursor on the fixed events.
• dragBetweenSlots: boolean - specifies whether the event is movable across slots. It applies for the timeline views. Has precedence over the eventDragBetweenSlots property of the resource and slot options, and the dragBetweenSlots and option.
• dragBetweenResources: boolean - specifies whether the event is movable across resources. It applies for scheduler and timeline views. Has precedence over the eventDragBetweenResources property of the resource and the dragBetweenResources option.
• dragInTime: boolean - specifies whether the event is movable in time. Has precedence over the eventDragInTime property of the resource and the dragInTime option.
• resize: boolean - specifies whether the event is resizable. Has precedence over the eventResize property of the resource and the dragToResize option.
• overlap: boolean - Specifies whether any overlap is allowed for the event. Has precedence over the eventOverlap property of the resource and the eventOverlap option.
• resource: String, Number, Array - specify resource ids for the events. The event will display only in the specified resource group. If there is no resource id defined the event will be displayed at every resource group.
• slot: String, Number - specify slot ids for the events. The event will display only in the specified slot group. If there is no slot id defined the event will be displayed at every slot group.
• recurring: String, Object - Recurrence rule for the event.
• recurringException: String, Object, Array - Represents the exceptions of a recurring event. Useful when specific dates need to be skipped from the rule.
• recurringExceptionRule: String, Object - Represents the exception rule of a recurring event. Useful when recurring dates need to be skipped from the rule.
• timezone: String - The timezone of the event. When specified, it takes precedence over dataTimezone. A timezone plugin must be also passed to the component.
• tooltip: String - Specifies the tooltip text of the event.
• cssClass String - Can be used to pass custom CSS classes on an event to event basis. Useful when customization is needed on the event level. For example: setting the width for specific events.

data: [{
          start: new Date(2021, 5, 23),
          end: new Date(2021, 5, 30),
          title: 'Conference',
          allDay: true,
          color: 'red'
        }, {
          title: 'Work project',
          recurring: {
            repeat: 'daily',
            until: '2021-04-01'
          },
          recurringException: ['2021-03-15', '2021-03-25'],
          recurringExceptionRule: {
            repeat: 'weekly',
            weekDays: 'SA,SU'
          }
        }]
        

• 'local' - Uses the systems local timezone
• 'utc' - Displays data in UTC (Universal Coordinated Time)
• Timezone name - The timezone name from the IANA time zone database ex. "America/New_York"

• 'local' - Default. Uses the systems local timezone
• 'utc' - Displays data in UTC (Universal Coordinated Time)
• Timezone name - The timezone name from the IANA time zone database ex. "America/New_York"

If false, the events will not be movable across resources, only in time. To control movement in time, use the [dragToMove](#opt-dragToMove) option.

Consider that dragToMove has to be enabled.

If false, the events will not be movable across slots, only in time. To control movement in time, use the [dragToMove](#opt-dragToMove) option.

Consider that dragToMove has to be enabled.

If false, the events will not be movable in time. In case of the scheduler and timeline views events events can still be moved between resources. To control movement between resources, use the dragBetweenResources option.

Consider that dragToMove has to be enabled.

Using the extendDefaultEvent option extra properties can be set for the created event.

The event deletion functionality can be overwritten using the eventDelete option.

Enables or disables event deletion. When true, the focused event will be deleted on pressing the Delete or Backspace keys on the keyboard.

By default the event deletion depends on the clickToCreate and dragToCreate options. If either of those are true, and no eventDelete option is set, then event deletion is also enabled, otherwise not.

• all day events
• rest of events, sorted by start time; events with identical start times, will be ordered alphabetically based on their title

Use this option to set properties to the new event created with click or drag. This event creation is handled by the clickToCreate and dragToCreate options. It takes a function that should return the properties for the new event. The object passed to this function has the following properties:

• start: Date - The date when the newly created event will start.
• resource: String, Number, Array - The id of the resource where the event creation started.

function newEventData() {
    return {
        color: 'green',
        title: 'My event',
    };
}

Can contain dates (Javascript Date objects, ISO 8601 strings, or moment objects), or objects with the following properties:

• allDay: Boolean - If true the specified date will cover the whole day.
• start: Date, String, Object - Start of the invalid range.
• end: Date, String, Object - End of the invalid range.
• recurring: String, Object - Recurrence rule for recurring invalid ranges.
• recurringException: String, Object, Array - Represents the exceptions of a recurring invalid. Useful when specific dates need to be skipped from the rule.
• recurringExceptionRule: String, Object - Represents the exception rule of a recurring invalid. Useful when recurring dates need to be skipped from the rule.
• title: String - Text which will be displayed on the schedule view for the invalid range.
• resource: String, Number, Array - specify resource ids for the invalid range. The invalid range will be displayed only for the specified resources. If there is no resource defined, the invalid range will be displayed for every resource.
• slot: String, Number - specify slot ids for the invalid range. The invalid range will be displayed only for the specified slot. If there is no slot defined, the invalid range will be displayed for every slot.
• cssClass String - Specifies the custom CSS class name of the invalid. Useful when customization is needed for specific invalids. This property is only applicable in the case of the scheduler and timeline view.

invalid: [
    // Passing exact dates and times
    new Date(2021, 1, 7), // Date object
    '2021-10-15T12:00', // ISO 8601 string
    moment("2020-12-25"), // moment object

    // Passing invalid ranges
    { 
      // ISO 8601 strings
      start: '2021-10-15T12:00',
      end: '2021-10-18T13:00', 
      title: 'Company 10th anniversary',
    },
    {
      // Date objects
      allDay: true,
      start: new Date(2021, 2, 7),
      end: new Date(2021, 2, 9),
      title: 'Conference for the whole team',
    },
    {
      // Time range with recurrence
      start: '13:00',
      end: '12:00',
      recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' },
      title: 'Lunch break',
    },
    {
      // Disable weekends
      recurring: {
          repeat: 'weekly',
          weekDays: 'SA,SU'
      }
    }
];

Configures how to validate events against invalid ranges on create/move/resize:

When set to 'strict', event cannot intersect with an invalid range at all.

When set to 'start-end', event start and end cannot be inside an invalid range.

• date Date, String, Object - Date of the calendar label.
• start Date, String, Object - Start date of the calendar label.
• end Date, String, Object - End date of the calendar label.
• color String - The color of the label, can be any valid CSS color ('red', '#ff0000', 'rgb(255,0,0)', etc.).
• text String - The text of the label.
• recurring: String, Object - Recurrence rule for recurring labels.
• recurringException: String, Object, Array - Represents the exceptions of a recurring label. Useful when specific dates need to be skipped from the rule.
• recurringExceptionRule: String, Object - Represents the exception rule of a recurring label. Useful when recurring dates need to be skipped from the rule.
• cellCssClass: String - CSS class for the day cell. This property is only applicable in the case of the calendar view.

labels: [{
  start: new Date(2020, 2, 23),
  end: new Date(2020, 2, 24),
  text: 'Conference',
  color: 'red'
}, {
  text: 'Christmas',
  recurring: { repeat: 'yearly', month: 12, day: 24 }
}]

• date Date, String, Object - Date of the day to be marked.
• start Date, String, Object - Start date of the days to be marked.
• end Date, String, Object - End date of the days to be marked.
• color String - The color of the mark, can be any valid CSS color ('red', '#ff0000', 'rgb(255,0,0)', etc.).
• recurring: String, Object - Recurrence rule for recurring marked days.
• recurringException: String, Object, Array - Represents the exceptions of a recurring marked rule. Useful when specific dates need to be skipped from the rule.
• recurringExceptionRule: String, Object - Represents the exception rule of a recurring marked rule. Useful when recurring dates need to be skipped from the rule.
• cellCssClass: String - CSS class for the day cell. This property is only applicable in the case of the calendar view.
• markCssClass: String - CSS class for the mark.

marked: [
  new Date(2020, 2, 15),
  new Date(2020, 2, 22),
  {
    start: new Date(2020, 2, 23),
    end: new Date(2020, 2, 24),
    color: 'red'
  },
  {
    color: 'green',
    recurring: { repeat: 'yearly', month: 12, day: 24 }
  }
]

mobiscroll.eventcalendar('#mycalendar', {
    max: new Date(2021, 11, 12)
});

mobiscroll.eventcalendar('#mycalendar', {
    min: new Date(2021, 11, 12)
});

• events: Array - The events of the current view, grouped by day. A day object has the following properties:
  • date: String - The formatted date of the day.
  • events: Array - The list of events for the day. An event object has the following properties:
    • allDay: String - The localized all-day text in case of all day events.
    • end: String - The formatted end time, if the event is not all day.
    • id: String - The id of the event.
    • isMultiDay: Boolean - True if the event spans across multiple days.
    • lastDay: Boolean - True if it's rendered on the last day of a multiple event.
    • original: Object - The original event object.
    • start: String - The formatted start time, if the event is not all day.
    • title: String - The title of the event.
  • timestamp: Number - The timestamp of the day
• options: Object - The current settings of the component.

Use this option to customize the empty state message that appears on the agenda. It should return the desired markup.

You can use the renderDay option to customize the day cells of the calendar view and the header date container in case of schedule and timeline view. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

If you are looking to customize only the content and don't want to bother with the styling of the event, in case of calendar and schedule view you can use the renderDayContent option.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• selected: Boolean - True if the date is selected. (In case of calendar view)
• events: Array - The list of events of the day.
• resource: String, Number - The id of the resource in case of scheduler(week and month views) when the events are grouped by resources.
• isActive: Boolean - On the timeline view, this parameter will be true when rendering the current day/week/month/year.

renderDay: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('DDDD', date) +`</div>` +
    `<p>`+ formatDate('MMMM DD', date) +`</p>`;
}

You can use the renderDayContent option to customize the day content of the Eventcalendar. It takes a function that should return the desired markup. The Eventcalendar will take care of styling and you can focus on what you show beside the day number a.k.a the content.

If you are looking to fully customize the day (ex. add custom hover effects) you will need to use the renderDay option. In that case you will only get the positioning done by the Eventcalendar and everything else is up to you.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the template has the following properties:

• date: Date object - The specific date as a Date object.
• selected: Boolean - True if the date is selected.
• events: Array - The list of events of the day.
• resource: String, Number - The id of the resource in case of week view scheduler when the events are grouped by resources.

renderDay: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('DDDD', date) +`</div>` +
    `<p>`+ formatDate('MMMM DD', date) +`</p>`;
}

Use this option to render a custom footer for the timeline. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well. This element only renders for the timeline view.

The template will receive an object as data. This data can be used to show day specific things on the day footer. The object passed to the template has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the day.

function myCustomDayFooterTemplate() {
    return <div>Day footer</div>;
}

You can use the renderEvent option to customize the events that appear on the agenda and the popover. It should return the markup of the event. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

If you are looking to customize only the content (ex. add custom elements) and don't want to bother with the styling of the event, you can use the renderEventContent option.

For customizing the events on other part of the Eventcalendar check out the customizing the events section

The render function will receive an event object as parameter. This data can be used to show event specific things on the agenda and popover. The object passed to the function has computed properties, as well as a reference to the original event it comes from:

• allDay: String - The localized all-day text in case of all day events.
• end: String - The formatted end time, if the event is not all day.
• id: String - The id of the event.
• isMultiDay: Boolean - True if the event spans across multiple days.
• lastDay: Boolean - True if it's rendered on the last day of a multiple event.
• original: Object - The original event object.
• start: String - The formatted start time, if the event is not all day.
• title: String - The title of the event.

You can use the renderEventContent option to customize the event content that appears on the agenda and the popover. It should return the markup that is added to the event. The Eventcalendar will take care of styling and you can focus on what you show inside of the event a.k.a the content.

If you are looking to fully customize the event (ex. add custom hover effects) you will need to use the renderEvent option. In that case you will only get the positioning done by the Eventcalendar and everything else is up to you.

For customizing the events on other part of the Eventcalendar check out the customizing the events section.

The render function will receive an event object as parameter. This data can be used to show event specific things on the agenda and popover. The object passed to the function has computed properties, as well as a reference to the original event it comes from:

• allDay: String - The localized all-day text in case of all day events.
• end: String - The formatted end time, if the event is not all day.
• id: String - The id of the event.
• isMultiDay: Boolean - True if the event spans across multiple days.
• lastDay: Boolean - True if it's rendered on the last day of a multiple event.
• original: Object - The original event object.
• start: String - The formatted start time, if the event is not all day.
• title: String - The title of the event.

Use this option to customize the header of the Eventcalendar. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well as the built in header components of the calendar.

Check out the customizing the header section for a more detailed description on built in components.

function myCustomHeader() {
    return `<button mbsc-calendar-prev></button>
            <button mbsc-calendar-next></button>
            <div mbsc-calendar-nav></div>`;
}

You can use the renderHour option to customize the header hour container in case of the timeline view. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the hour.
• isActive: Boolean - On the timeline view, this parameter will be true when rendering the current hour.

renderHour: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('hh:mm', date) +`</div>`;
}

You can use the renderHourFooter option to customize the footer hour container in case of the timeline view. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the hour.

renderHourFooter: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('hh:mm', date) +`</div>`;
}

You can use the renderLabel option to fully customize the labels that appear on the calendar. It should return the markup of the event. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

If you are looking to customize only the content (ex. add custom elements) and don't want to bother with the styling of the label, you can use the renderLabelContent option.

For customizing the events on other part of the Eventcalendar check out the customizing the events section

The render function will receive an event object as parameter. This data can be used to show event specific things on the calendar. The object passed to the function has computed properties, as well as a reference to the original event it comes from:

• end: String - Computed property. It holds the formatted end time, if the event is not all day.
• id: String - It holds the id of the event. If there's no id on the event object, this property is generated.
• isMultiDay: Boolean - Computed property. It's true if the event spans across multiple days.
• original: Object - Reference to the original event object. Any custom property on the event can be access through this property.
• start: String - Computed property. It holds the formatted start time, if the event is not all day.

You can use the renderLabelContent option to customize the label contents, that appears on the calendar. It should return the markup that is added to the label. The Eventcalendar will take care of styling and you can focus on what you show inside of the label a.k.a the content.

If you are looking to fully customize the label (ex. add custom hover effects) you will need to use the renderLabel option. In that case you will only get the positioning done by the Eventcalendar and everything else is up to you.

For customizing the events on other part of the Eventcalendar check out the customizing the events section

The render function will receive an event object as parameter. This data can be used to show event specific things on the calendar. The object passed to the function has computed properties, as well as a reference to the original event it comes from:

• end: String - Computed property. It holds the formatted end time, if the event is not all day.
• id: String - It holds the id of the event. If there's no id on the event object, this property is generated.
• isMultiDay: Boolean - Computed property. It's true if the event spans across multiple days.
• original: Object - Reference to the original event object. Any custom property on the event can be access through this property.
• start: String - Computed property. It holds the formatted start time, if the event is not all day.

You can use the renderMonth option to customize the header month container in case of the timeline view. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the month.
• isActive: Boolean - On the timeline view, this parameter will be true when rendering the current month.

renderMonth: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('MMMM DD', date) +`</div>`;
}

You can use the renderMonthFooter option to customize the footer month container in case of the timeline view. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the month.

renderMonthFooter: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('MMMM DD', date) +`</div>`;
}

You can use the renderQuarter option to customize the header cells of the timeline view when resolutionHorizontal is set to 'quarter'. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show quarter specific details on the event calendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the quarter.
• isActive: Boolean - On the timeline view, this parameter will be true when rendering the current quarter

renderQuarter: function (quarter) {
  var date = quarter.date;
  var formatDate = mobiscroll.util.datetime.formatDate;
  return `<div>`+ formatDate('hh:mm', date) +`</div>`;
}

You can use the renderQuarterFooter option to customize the footer cells of the timeline view when resolutionHorizontal is set to 'quarter'. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show quarter specific details on the event calendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the quarter.
• isActive: Boolean - On the timeline view, this parameter will be true when rendering the current quarter

renderQuarterFooter: function (quarter) {
  var date = quarter.date;
  var formatDate = mobiscroll.util.datetime.formatDate;
  return `<div>`+ formatDate('hh:mm', date) +`</div>`;
}

Use this option to customize the resource template of the Scheduler. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well.

function myCustomResourceTemplate(resource) {
    return `<div>`+ resource.name +`</div>` +
            `<p>`+ resource.description +`</p>` +
            `<img src="`+ resource.img +`"/>`;
}

Use this option to customize the empty cell content below the resource column. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well. This element only renders for the timeline view, if the renderDayFooter option is present.

function myCustomResourceFooterTemplate() {
    return <div>Resource footer</div>;
}

Use this option to customize the empty cell content above the resource column. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well.

function myCustomResourceHeaderTemplate() {
    return <div>Resources</div>;
}

You can use the renderScheduleEvent option to customize the events that appear on the scheduler and timeline. It should return the markup of the event. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

If you are looking to customize only the content (ex. add custom elements) and don't want to bother with the styling of the event, you can use the renderScheduleEventContent option.

For customizing the events on other part of the Eventcalendar check out the customizing the events section

The render function will receive an event object as parameter. This data can be used to show event specific things on the scheduler. The object passed to the function has computed properties, as well as a reference to the original event it comes from:

• allDay: String - The localized all-day text in case of all day events.
• end: String - The formatted end time, if the event is not all day.
• id: String - The id of the event.
• isMultiDay: Boolean - True if the event spans across multiple days.
• lastDay: Boolean - True if it's rendered on the last day of a multiple event.
• original: Object - The original event object.
• start: String - The formatted start time, if the event is not all day.
• title: String - The title of the event.
• currentResource: String, Number - Represents the resource of the row or column where the event is being rendered.

You can use the renderScheduleEventContent option to customize the event content that appears on the scheduler and timeline. It should return the markup that is added to the event. The Eventcalendar will take care of styling and you can focus on what you show inside of the event a.k.a the content.

If you are looking to fully customize the event (ex. add custom hover effects) you will need to use the renderScheduleEvent option. In that case you will only get the positioning done by the Eventcalendar and everything else is up to you.

For customizing the events on other part of the Eventcalendar check out the customizing the events section

The render function will receive an event object as parameter. This data can be used to show event specific things on the scheduler. The object passed to the function has computed properties, as well as a reference to the original event it comes from:

• allDay: String - The localized all-day text in case of all day events.
• end: String - The formatted end time, if the event is not all day.
• id: String - The id of the event.
• isMultiDay: Boolean - True if the event spans across multiple days.
• lastDay: Boolean - True if it's rendered on the last day of a multiple event.
• original: Object - The original event object.
• start: String - The formatted start time, if the event is not all day.
• title: String - The title of the event.
• currentResource: String, Number - Represents the resource of the row or column where the event is being rendered.

Use this option to render a custom sidebar on the right side of the timeline. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well. This element only renders for the timeline view.

The template will receive the resource object as data. This data can be used to show resource specific things on the sidebar.

function myCustomSidebarTemplate(resource: MbscResource) {
    return `<div>`+ resource.name +`</div>` +
            `<p>`+ resource.description +`</p>` +
            `<img src="`+ resource.img +`"/>`;
}

Use this option to customize the empty cell content below the sidebar column. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well. This element only renders for the timeline view, if the renderSidebar option is present.

function myCustomSidebarFooterTemplate() {
    return <div>Sidebar footer</div>;
}

Use this option to customize the empty cell content above the sidebar column. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well. This element only renders for the timeline view, if the renderSidebar option is present.

function myCustomSidebarHeaderTemplate() {
    return <div>Sidebar header</div>;
}

Use this option to customize the slot template of the Timeline view. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well.
It will recieve an object as parameter and has the following properties:

• date: Date object - The specific date where the slot is rendered.
• slot: Object - Data of the rendered slot.

function myCustomSlotTemplate(slotData) {
    return `<div>`+ slotData.slot.name +`</div>` +
            `<p>`+ slotData.slot.description +`</p>` +
            `<img src="`+ slotData.slot.img +`"/>`;
}

You can use the renderWeek option to customize the header week container in case of the timeline view. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the week.
• isActive: Boolean - On the timeline view, this parameter will be true when rendering the current week.

renderWeek: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('MMMM DD', date) +`</div>`;
}

You can use the renderWeekFooter option to customize the header week container in case of the timeline view. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the week.
∂

renderWeekFooter: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('MMMM DD', date) +`</div>`;
}

You can use the renderYear option to customize the header year container in case of the timeline view. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the year.
• isActive: Boolean - On the timeline view, this parameter will be true when rendering the current year.

renderYear: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('YYYY', date) +`</div>`;
}

You can use the renderYearFooter option to customize the footer year container in case of the timeline view. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

The render function will receive an object as parameter. This data can be used to show day specific things on the Eventcalendar. The object passed to the function has the following properties:

• date: Date object - The specific date as a Date object.
• events: Array - The list of events of the year.

renderYearFooter: function (day) {
    var date = day.date;
    var formatDate = mobiscroll.util.datetime.formatDate;

    return `<div>`+ formatDate('YYYY', date) +`</div>`;
}

The scheduler can handle multiple resources inside a single instance. Resource grouping can be modified with the help of the groupBy option.

If set null or undefined, all events will be displayed, regardless of their resource property. If set to an empty array, only those events will be displayed which are not tied to any resource.

The timeline view can render multiple levels of hierachy groups. Levels can be added wiht the help of the children property.

The resource object has the following properties:

• children: Array of object - Array of resoruce objects which will render as a child of the specified resource.
• collapsed: Boolean - Defines the displayed state of the child resoruce group.
• id: Number, String - This is an id that can be referenced in the events/invalids/colors data.
• name: String - The name of the resource that will be displayed at the top of the resource column.
• color: String - The color controls the default event color of the resource. Event colors can be specific above this. If the color is omitted the events of the resource will inherit the default calendar color.
• eventCreation: Boolean - Disables event creation on specific resources by setting it to false. It's true by default.
• eventDragBetweenResources: boolean - Specifies whether the events in the specified resource are movable across resources. It applies for scheduler and timeline views. Has precedence over the dragBetweenResources option.
• eventDragBetweenSlots: boolean - Specifies whether the events in the specified resource are movable across slots. It applies for the timeline view. Has precedence over the dragBetweenSlots option.
• eventDragInTime: boolean - Specifies whether the events in the specified resource are movable in time. Has precedence over the dragInTime option.
• eventOverlap: boolean - Specifies whether any overlap is allowed for the events in the specified resource. It applies for scheduler and timeline views. Has precedence over the eventOverlap option.
• eventResize: boolean - Specifies whether the events in the specified resource are resizable. Has precedence over the dragToResize option.

resources: [{
  id: 1,
  name: 'Flatiron Room',
  color: '#f7c4b4'
}, {
  id: 2,
  name: 'The Capital City',
  color: '#c6f1c9'
}, {
  id: 3,
  name: 'Heroes Square',
  color: '#e8d0ef'
}]

• xsmall - min-width: 0px
• small - min-width: 576px
• medium - min-width: 768px
• large - min-width: 992px
• xlarge - min-width: 1200px

responsive: {
    xsmall: {
        view: {
            calendar: {
                type: 'week'
            },
            agenda: {
                type: 'day'
            }
        }
    },
    custom: { // Custom breakpoint
        breakpoint: 600,
        view: {
            calendar: {
                labels: true
            }
        }
    }
}

The slots besides the resources introduce a horizontal(daily) level of data grouping to the Timeline view.

If set null or undefined, all events will be displayed, regardless of their slot property. If set to an empty array, only those events will be displayed which are not tied to any slot.

The slot object has the following properties:

• id: Number, String - This is an id that can be referenced in the events/invalids/colors data.
• name: String - The name of the slot that will be displayed at the top of the slot column.
• eventDragBetweenSlots: boolean - Specifies whether the events in the specified slot are movable across slots. Has precedence over dragBetweenSlots option.

slots: [{
  id: 1,
  name: 'Morning shift,
}, {
  id: 2,
  name: 'Afternoon shift',
}]

Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme, it will be chosen on the iOS platform instead of the default iOS theme.

• 'ios' - iOS theme
• 'material' - Material theme
• 'windows' - Windows theme

Controls which variant of the theme will be used (light or dark).

• 'light' - Use the light variant of the theme.
• 'dark' - Use the dark variant of the theme.
• 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

Specifies the timezone plugin, which can handle the timezone conversions.

By default the Eventcalendar uses the local timezone of the browser to show event data. If you want to show the data or interpret it in a different timezone, you will need an external library to handle the timezone conversions. There are two supported libraries: moment-timezone and luxon.
Read our guide on how to set up timezones in your app.

You can specify either the dataTimezone or the displayTimezone or both.

Depending on which externa library you use you can pass either the

• momentTimezone
• luxonTimezone

var plugin = mobiscroll.momentTimezone;
var plugin2 = mobiscroll.luxonTimezone;

mobiscroll.eventcalendar('#my-selector', {
    timezonePlugin: mobiscroll.momentTimezone,
    dataTimezone: 'utc',
    displayTimezone: 'America/New_York',
});

Properties

• calendar: Object - Configures the calendar view. If omitted, no calendar will be displayed.
  Properties:
  • type: String (default 'month') - Sets the calendar type. Possible values: 'year', 'month', 'week'.
  • size: Number - Specifies the number of displayed weeks/months.
  • count: Boolean (default false) - If true, it will display the number of events on days with events.
  • outerDays: Boolean (default false) - Show or hide days from previous and next months. Hiding only works for type: 'month'.
  • labels: Boolean, String, Number (default false) - Enable displaying events as labels on calendar days. Supported values:
    • boolean - If is set to true events will be displayed in the available space. If there are more events for a day, than the available space, a label with "x more" text will be displayed, which opens the popover showing all the events for the given day. In this mode to display multiple events on a day, set the calendar height to an appropriate value, using the height setting.
    • 'all' - In this mode all the event labels will be displayed in the calendar cell and the row height will auto-expand based on the diplayed events. The row conatiner will became scrollable if the rows overflow the available height.
    • number - Specify how many events will be displayed before the "more" button in a calendar cell. The row height will auto expand until the labels count reaches the given number and after that the "x more" button will be displayed. In the case when only one event should go in the "more" popup, that event will be displayed in the place of the "x more" button.
  • popover: Boolean (default undefined) - Enable popover for event listing on days containing events. If not explicitly defined, the popover will not show up if event listing is used. If event labels are used, popover will only show up for days where all labels do not fit on the calendar, and a "more" label is present.
  • popoverClass: String (default undefined) - A CSS class that's added to the popover element. Can be used to customize the styling of the popover on a calendar basis.
  • scroll: String (default 'horizontal') - Specifies the direction of the calendar scroll. Can be 'horizontal' or 'vertical'.
  • weekNumbers: Boolean (default false) - Show or hide week numbers.
• agenda: Object - Configures the event list. If omitted, no event list will be displayed.
  Properties:
  • type: String (default undefined) - Sets the list type. Possible values: 'year', 'month', 'week', 'day'.
    If calendar is also displayed, only month, week and day values are supported.
    In case of month and week, the type and size should match the calendar type and size.
    In case of day type events on the selected calendar day will be displayed, so size will always be 1.
  • size: Number (default 1) - Specifies the number of years, months, weeks or days included in the list (depending on the specified type).
  • scrollable: Boolean (default false) - Setting this to true makes the event listing independently scrollable. There are two prerequisites for making this work:
    
    1 - The calendar needs to be to placed inside a container which has a height. This can be either a fixed height, a height in percentage, or a flex height. When the calendar is placed directly in a container with a fixed height, it will work out of the box.
    If the height of the container is specified in percentage, e.g. you'd like to fill the full page height, you need to make sure that all parent elements also have height: 100% specified, up until the body and html elements, or until the closest parent which has a fixed height.
    If the container is inside a parent with flex layout, it will also work out of the box.
    
    2 - The event list has a minimum calculated height of 200px - the result of the container height minus the height of the calendar header minus the height of the displayed calendar rows. If the calculated height is less then 200px, the event list will not be scrollable.
• schedule: Object - Configures the schedule view. If omitted, no schedule will be displayed.
  Properties:
  • type: String (default 'week') - Sets the schedule type. Possible values: 'day', 'week' ,'month' .
  • size: Number - Specifies the number of displayed days/weeks.
  • allDay: Boolean (default true) - Show or hide the all day events.
  • currentTimeIndicator: Boolean (default true when the resolution is less than a day) - Show or hide the current time indicator
  • days: Boolean (default true) - Show or hide week days above the schedule grid.
  • startDay: Number (default 0) - Set the first day of the view: Friday is 5, Saturday is 6, etc.
  • endDay: Number (default 6) - Set the last day of the view: Sunday is 0, Monday is 1, etc.
  • startTime: String (default 00:00) - Set the start time of schedule column. Hours and minutes can be specified in the string, example: '09:30'.
  • endTime: String (default 24:00) - Set the end time of schedule column. Hours and minutes can be specified in the same string, example: '18:30'.
  • timeCellStep: Number (default 60) - Set the step of the grid cells in minutes. Supported values: 1, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 480, 720, 1440.
  • timeLabelStep: Number (default 60) - Set the step of the time labels in minutes. Supported values: 1, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 480, 720, 1440.
  • timezones: Array - Use this to display times in multiple timezones on the time scale and time indicator. The timezones array can contain timezone strings or objects with timezone and label properties. Timezone strings must use the name from the IANA time zone database. If no label is provided, the time column label will be UTC +/- the timezone offset.

    timezones: [
        'Europe/Berlin',
        'Europe/Bucharest'
    ]
    

    timezones: [{
        timezone: 'America/Chicago',
        label: 'CHI'
    }, {
        timezone: 'America/New_York',
        label: 'NY'
    }]
    

• timeline: Object - Configures the timeline view. If omitted, no timeline will be displayed.
  Properties:
  • type: String (default 'week') - Sets the timeline type. Possible values: 'day', 'week' , 'month', 'year'.
  • resolutionHorizontal: String (default 'hour') - Sets the resolution of the timeline column. Possible values: 'hour', 'day', 'week', 'month', 'quarter', 'year'. In case of hourly resolution, the columns can be split to minutes (1, 5, 15, 20, 30) or merge to multiple hours (2, 3, 4, 6, 8, 12) using the timeCellStep and timeLabelStep properties.
  • resolutionVertical: String (default 'none') - Sets the vertical time unit of a timeline rows Possible values: 'day', 'none'. If set to 'day', the days will be rendered on the vertical axis, while the hours of the day will be displayed on the horizontal axis.
  • size: Number - Specifies the number of displayed days/weeks/months.
  • currentTimeIndicator: Boolean (default true when the resolution is less than a day) - Show or hide the current time indicator
  • eventList: Boolean (default false) - If true, transforms the hour-by-hour layout into a daily summary view. The events are listed under the appropriate day one after the other.
  • startDay: Number (default 0) - Set the first day of the view: Friday is 5, Saturday is 6, etc.
  • endDay: Number (default 6) - Set the last day of the view: Sunday is 0, Monday is 1, etc.
  • rowHeight: String (default 'variable') - Controls the height of the timeline view rows. By default timeline rows will have 'variable' height and will expand to accommodate the displayed events. If it is set to 'equal', the rows will have equal heights.
  • startTime: String (default 00:00) - Set the start time of timeline days. Hours and minutes can be specified in the string, example: '09:30'.
  • endTime: String (default 24:00) - Set the end time of timeline days. Hours and minutes can be specified in the same string, example: '18:30'.
  • timeCellStep: Number (default 60) - Set the step of the grid cells in minutes. Supported values: 1, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 480, 720, 1440.
  • timeLabelStep: Number (default 60) - Set the step of the time labels in minutes. Supported values: 1, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 480, 720, 1440.
  • virtualScroll: Boolean (default true) - Enable or disable virtual scroll.
  • weekNumbers: Boolean (default false) - Show or hide week numbers.

Example

view: {
  calendar: {
    type: 'week',
    size: 2
  },
  agenda: {
    type: 'week',
    size: 2
  }
}

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date of the clicked cell.
  • domEvent: Event The DOM event of the click.
  • events: Array - The events for the clicked date.
  • resource: String, Number - The id of the resource where the cell was clicked, if resources are set.
  • selected: Boolean - Specifies if the day is currently selected or not (before it was clicked).
  • source: String - The view where the cell was clicked, 'calendar', 'schedule' or 'timeline'.
  • target: HTMLElement - The DOM element of the clicked cell.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onCellClick: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date of the clicked cell.
  • domEvent: Event The DOM event of the click.
  • events: Array - The events for the clicked date.
  • resource: String, Number - The id of the resource where the cell was clicked, if resources are set.
  • selected: Boolean - Specifies if the day is currently selected or not (before it was clicked).
  • source: String - The view where the cell was clicked, 'calendar', 'schedule' or 'timeline'.
  • target: HTMLElement - The DOM element of the clicked cell.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onCellDoubleClick: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: The selected date as a Date object.
  • events: The events for the hovered day.
  • labels: If the day has labels, contains the label objects for the hovered day.
  • marked: If the day is marked, contains the marked objects for the hovered day.
  • selected: Specifies if the day is currently selected or not.
  • target: The table cell HTML DOM element.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onCellHoverIn: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: The selected date as a Date object.
  • events: The events for the hovered day.
  • labels: If the day has labels, contains the label objects for the hovered day.
  • marked: If the day is marked, contains the marked objects for the hovered day.
  • selected: Specifies if the day is currently selected or not.
  • target: The table cell HTML DOM element.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onCellHoverOut: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date of the clicked cell.
  • domEvent: Event The DOM event of the click.
  • events: Array - The events for the clicked date.
  • resource: String, Number - The id of the resource where the cell was clicked, if resources are set.
  • selected: Boolean - Specifies if the day is currently selected or not (before it was clicked).
  • source: String - The view where the cell was clicked, 'calendar', 'schedule' or 'timeline'.
  • target: HTMLElement - The DOM element of the clicked cell.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onCellRightClick: function (event, inst) {
    }
});

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onDestroy: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date of the day on which the event was clicked.
  • domEvent: Event - The DOM event of the click.
  • event: Object - The clicked calendar event.
  • resource: String, Number - The id of the resource where the event was clicked, if resources are set.
  • source: String - The view where the event was clicked, 'agenda', 'calendar', 'schedule', 'timeline' or 'popover'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventClick: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • action: String - The action which created the event ('click', 'drag' or 'externalDrop').
  • domEvent: Event - The DOM event from the end of the gesture (mouseup or touchend).
  • event: Object - The newly created event object.
  • originEvent: Object - The occurrence of the event which was dragged. Will be set only if the event was created by dragging a recurring event occurrence.
  • source: String - The view where the event is being created, 'calendar', 'timeline' or 'schedule'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventCreate: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • action: String - The action which created the event ('click', 'drag' or 'externalDrop').
  • event: Object - The newly created event object.
  • source: String - The view where the event was created, 'calendar', 'timeline' or 'schedule'.
  • target: HTMLElement - The DOM element of the created event.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventCreated: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • action: String - The action which created the event ('click', 'drag' or 'externalDrop').
  • event: Object - The newly created event object.
  • invalid: Object - The invalid object which the event interacted with.
  • overlap: Object - The overlapping object which the event interacted with.
  • originEvent: Object - The occurrence of the event which was dragged. Will be set only if the event was created by dragging a recurring event occurrence.
  • source: String - The view where the event was created, 'calendar', 'timeline' or 'schedule'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventCreateFailed: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • domEvent: Event - The DOM event from the onKeyDown action.
  • event: Object - The deleted event's data object.
  • events: Array - The selected events in case of multiple select.
  • source: String - The view where the event is being deleted, 'calendar', 'timeline' or 'schedule'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventDelete: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • event: Object - The deleted event's data object.
  • events: Array - The selected events in case of multiple select.
  • source: String - The view where the event was deleted, 'calendar', 'timeline' or 'schedule'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventDeleted: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date of the day on which the event was clicked.
  • domEvent: Event - The DOM event of the click.
  • event: Object - The clicked calendar event.
  • resource: String, Number - The id of the resource where the event was clicked, if resources are set.
  • source: String - The view where the event was clicked, 'agenda', 'calendar', 'schedule', 'timeline' or 'popover'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventDoubleClick: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • domEvent: Event - The DOM event of the dragged event.
  • event: Object - The dragged calendar event.
  • resource: String, Number - The id of the resource where the event is dragged, if resources are set.
  • slot: String, Number - The id of the slot where the event is dragged, if slots are set.
  • source: String - The view where the event is dragged, 'calendar', 'schedule' or 'timeline'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventDragEnd: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • domEvent: Event - The DOM event of the dragged event.
  • event: Object - The dragged calendar event.
  • source: String - The view where the event is dragged, 'calendar', 'schedule' or 'timeline'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventDragEnter: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • domEvent: Event - The DOM event of the dragged event.
  • event: Object - The dragged calendar event.
  • source: String - The view where the event is dragged, 'calendar', 'schedule' or 'timeline'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventDragLeave: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • action: String - The user action which triggered the event: 'create', 'resize' or 'move'.
  • domEvent: Event - The DOM event of the dragged event.
  • event: Object - The dragged calendar event.
  • resource: String, Number - The id of the resource where the event is dragged, if resources are set.
  • slot: String, Number - The id of the slot where the event is dragged, if slots are set.
  • source: String - The view where the event is dragged, 'calendar', 'schedule' or 'timeline'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventDragStart: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date of the day on which the event was hovered.
  • domEvent: Event - The DOM event of the hover.
  • event: Object - The hovered calendar event.
  • resource: String, Number - The id of the resource where the event was hovered, if resources are set.
  • source: String - The view where the event was hovered, 'agenda', 'calendar', 'schedule', 'timeline' or 'popover'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventHoverIn: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date of the day on which the event was hovered.
  • domEvent: Event - The DOM event of the hover.
  • event: Object - The hovered calendar event.
  • resource: String, Number - The id of the resource where the event was hovered, if resources are set.
  • source: String - The view where the event was hovered, 'agenda', 'calendar', 'schedule', 'timeline' or 'popover'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventHoverOut: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date of the day on which the event was clicked.
  • domEvent: Event - The DOM event of the right click.
  • event: Object - The clicked calendar event.
  • resource: String, Number - The id of the resource where the event was clicked, if resources are set.
  • source: String - The view where the event was clicked, 'agenda', 'calendar', 'schedule', 'timeline' or 'popover'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventRightClick: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • domEvent: Event - The DOM event from the end of the gesture (mouseup or touchend).
  • newEvent: Object - The newly created event object. Will be set only if the dragged event was a recurring event occurrence.
  • event: Object - The updated event object.
  • events: Object - The updated events. This property is present on recurring event delete, when selectMultipleEvents is set to true.
  • oldEvents: Object - The original events before the update. This property is present on recurring event delete, when selectMultipleEvents is set to true..
  • oldEvent: Object - The original event object before the update.
  • oldEventOccurrence: Object - The occurrence of the event which was dragged. Will be set only if the dragged event was a recurring event occurrence.
  • source: String - The view where the event is being updated, 'calendar', 'timeline' or 'schedule'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventUpdate: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • event: Object - The updated event object.
  • events: Object - The updated events. This property is present on recurring event delete, when selectMultipleEvents is set to true.
  • oldEvents: Object - The original events before the update. This property is present on recurring event delete, when selectMultipleEvents is set to true..
  • oldEvent: Object - The original event object before the update.
  • source: String - The view where the event was updated, 'calendar', 'timeline' or 'schedule'.
  • target: HTMLElement - The DOM element of the created event.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventUpdated: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • event: Object - The updated event object.
  • newEvent: Object - The newly created event object. Will be set only if the dragged event was a recurring event occurrence.
  • oldEvent: Object - The original event object before the update.
  • oldEventOccurrence: Object - The occurrence of the event which was dragged. Will be set only if the dragged event was a recurring event occurrence.
  • invalid: Object - The invalid object which the event interacted with.
  • overlap: Object - The overlapping object which the event interacted with.
  • source: String - The view where the event was updated, 'calendar', 'timeline' or 'schedule'.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventUpdateFailed: function (event, inst) {
    }
});

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onInit: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date of the day on which the label was clicked.
  • domEvent: Event - The DOM event of the click.
  • label: Object - The original object of the label which was clicked, undefined in case of the "more" label.
  • labels: Array - An array containing each label object for the given day.
  • target: HTMLElement - The DOM element of the label.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onLabelClick: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day of the displayed page.
  • lastDay: Date - The last day of the displayed page.
  • month: Date - The first day of the visible month in case of month view.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onPageChange: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day of the displayed page.
  • lastDay: Date - The last day of the displayed page.
  • month: Date - The first day of the visible month in case of month view.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onPageLoaded: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day of the displayed page.
  • lastDay: Date - The last day of the displayed page.
  • month: Date - The first day of the visible month in case of month view.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onPageLoading: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • domEvent: Event - The DOM event of the click.
  • resource: String, Number - The id of the collapsed resource.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onResourceCollapse: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • domEvent: Event - The DOM event of the click.
  • resource: String, Number - The id of the expanded resource.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onResourceExpand: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The selected date.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onSelectedDateChange: function (event, inst) {
    }
});

Parameters

• args: Object - The args object has the following properties:
  • events: Array - The selected events.
• inst: Object - The instance object of the eventcalendar.

Example

$('#mobiscroll').mobiscroll().eventcalendar({
    onSelectedEventsChange: function (event, inst) {
    }
});

Parameters

• events: Object or Array - The javascript event object(s) to add.

Returns: Array

• An array containing the list of IDs generated for the events.

Example

mobiscrollInstance.addEvent({
    start: new Date(2016, 1, 1),
    end: new Date(2016, 1, 2),
    title: 'Conference',
    color: 'red'
});

Returns: Object

• Returns the element back to its pre-init state.

Example

mobiscrollInstance.destroy();

Parameters

• startDate (Optional): Date - Start date of the specified interval.
• endDate (Optional): Date - End date of the specified interval.

Returns: Array

• An array containing the event objects.

Example

mobiscrollInstance.getEvents();

Returns: Object

• The object instance.

Example

mobiscrollInstance.getInst();

Parameters

• startDate (Optional): Date - Start date of the specified interval.
• endDate (Optional): Date - End date of the specified interval.

Returns: Array

• An array containing the invalid objects.

Example

mobiscrollInstance.getInvalids();

Returns: Array

• An array containing the selected event objects.

Example

mobiscrollInstance.getSelectedEvents();

Parameters

• date: Date, String, Object - Date to navigate to. Can be a Date object, ISO8601 date string, or moment object.

Example

mobiscrollInstance.navigate(new Date(2016, 1, 1));

Navigates to the specified event on the agenda/calendar/schedule/timeline views.

eventCalendarInstance.navigateToEvent(event);

Parameters

• event: Object - The javascript event object of the event. The id, start and resource(in case if resources are used in timeline or schedule views) properties must be present in the object.

Prints the Eventcalendar, when the print module is properly set up.

eventCalendarInstance.print();

The Print Module is an optional module, that includes styles and functions for printing. It can be installed and used with the Eventcalendar as described in the Print Module section.

Parameters

The print method can be passed a config object as parameter, that supports the following properties:

• config.baseUrl: String - The base url for the styles and links if you are using relative paths.

Parameters

• eventIDs: Array - An array containing the ID of one or more list events.

Example

mobiscrollInstance.removeEvent([1, 3]);

Parameters

• events: Array - An array containing the events.

Returns: Array

• An array containing the event IDs.

Example

mobiscrollInstance.setEvents([{
    start: new Date(2016, 1, 1),
    end: new Date(2016, 1, 2),
    title: 'Conference',
    color: 'red'
}]);

Parameters

• options: Object - A map of option-value pairs to set.

Example

mobiscrollInstance.setOptions({
    display: 'bottom'
});

Parameters

• events: Array - An array containing the selected event objects.

Example

mobiscrollInstance.setSelectedEvents([{
    id: 1,
    title: 'My selected event'
}]);

Parameters

• event: Object - The event object to update.

Example

mobiscrollInstance.updateEvent(updatedEvent);

• M - month of year (no leading zero)
• MM - month of year (two digit)
• MMM - month name short
• MMMM - month name long
• D - day of month (no leading zero)
• DD - day of month (two digit)
• DDD - day of week (short)
• DDDD - day of week (long)
• YY - year (two digit)
• YYYY - year (four digit)
• '...' - literal text
• '' - single quote
• anything else - literal text

When preset-range selection is used the range start day can be specified with the firstSelectDay option.

• Arabic: localeAr, 'ar'
• Bulgarian: localeBg, 'bg'
• Catalan: localeCa, 'ca'
• Czech: localeCs, 'cs'
• Chinese: localeZh, 'zh'
• Croatian: localeHr, 'hr'
• Danish: localeDa, 'da'
• Dutch: localeNl, 'nl'
• English: localeEn or undefined, 'en'
• English (UK): localeEnGB, 'en-GB'
• Farsi: localeFa, 'fa'
• German: localeDe, 'de'
• Greek: localeEl, 'el'
• Spanish: localeEs, 'es'
• Finnish: localeFi, 'fi'
• French: localeFr, 'fr'
• Hebrew: localeHe, 'he'
• Hindi: localeHi, 'hi'
• Hungarian: localeHu, 'hu'
• Italian: localeIt, 'it'
• Japanese: localeJa, 'ja'
• Korean: localeKo, 'ko'
• Lithuanian: localeLt, 'lt'
• Norwegian: localeNo, 'no'
• Polish: localePl, 'pl'
• Portuguese (Brazilian): localePtBR, 'pt-BR'
• Portuguese (European): localePtPT, 'pt-PT'
• Romanian: localeRo, 'ro'
• Russian: localeRu, 'ru'
• Russian (UA): localeRuUA, 'ru-UA'
• Slovak: localeSk, 'sk'
• Serbian: localeSr, 'sr'
• Swedish:localeSv, 'sv'
• Thai: localeTh, 'th'
• Turkish: localeTr, 'tr'
• Ukrainian: localeUa, 'ua'
• Vietnamese: localeVi, 'vi'

mobiscroll.eventcalendar('#myexample', {
  locale: mobiscroll.localeDe
});

In some cases it's more convenient to set the locale using the language code string. You can do that by using the locale object, which contains all translations by language codes as keys.

mobiscroll.eventcalendar('#myexample', {
  locale: mobiscroll.locale['de']
});

• h - 12 hour format (no leading zero)
• hh - 12 hour format (leading zero)
• H - 24 hour format (no leading zero)
• HH - 24 hour format (leading zero)
• m - minutes (no leading zero)
• mm - minutes (leading zero)
• s - seconds (no leading zero)
• ss - seconds (leading zero)
• a - lowercase am/pm
• A - uppercase AM/PM
• '...' - literal text
• '' - single quote
• anything else - literal text

• clientId: String - The client ID obtained from the Google API Console Credentials page.
• apiKey: String - The API Key obtained from the Google API Console Credentials page.
• auth: String - Can be 'client', or 'server'. If set to 'server', server-side endpoints must be implemented to get the auth access token from Google. See the Server side tokens section for details and examples.
• authUrl: String - Server side endpoint for receiving an access token from Google on sign in, when the auth option is set to 'server'.
• refreshUrl: String - Server side endpoint for receiving a new access token from Google on expiry, when the auth option is set to 'server'.
• gapi: Object - The gapi object, if already loaded. If not specified, the library will load it.
• gis: Object - The Google Identity Services client library, if already loaded. If not specified, the library will load it.
• scopes: String - Specify custom scopes for Google authentication. The default scopes are 'https://www.googleapis.com/auth/calendar.events.public.readonly https://www.googleapis.com/auth/calendar.readonly https://www.googleapis.com/auth/calendar.events.owned'.
• timezone: String - If specified, the event dates will be returned in this timezone.
• timezonePlugin: Object - The timezone plugin, needed if timezone is specified.
• onInit: Function - Callback executed when the library is initialized and ready to use.
• onSignedIn: Function - Callback executed when the user signed in.
• onSignedOut: Function - Callback executed when the user signed out.

Example

googleCalendarSync.init({
    apiKey: 'YOUR_APY_KEY',
    clientId: 'YOUR_CLIENT_ID',
});

Example

googleCalendarSync.signIn();

Example

googleCalendarSync.signOut();

Returns: Boolean

• true if the user is signed in, false if not.

Example

googleCalendarSync.isSignedIn();

Parameters

• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the list of calendars as parameter.

Returns: Promise

• Returns a promise which resolves with an array containing the calendar list.

Example

googleCalendarSync.getCalendars();

Parameters

• calendarIds: Array - Array of the calendar IDs.
• start: Date - Start date of the specified interval.
• end: Date - End date of the specified interval.
• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the list of events as parameter.

Returns: Promise

• Returns a promise which resolves with an array containing the events.

Example

googleCalendarSync.getEvents(
    ['MY_FIRST_CALENDAR_ID', 'MY_SECOND_CALENDAR_ID'],
    new Date(2022, 1, 1),
    new Date(2022, 3, 0)
).then(function(events){
    mobiscrollInstance.setEvents(events);
});

Parameters

• calendarId: Array - The ID of the calendar.
• event: Object - The event to add. You can pass Google specific event properties through the `googleEvent` property. The rest of custom properties will be passed to the `extendedProperties` field.
• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the added event.

Returns: Promise

• Returns a promise which resolves with the added event.

Example

googleCalendarSync.addEvent(
    'MY_CALENDAR_ID', 
    { 
        start: new Date(2022, 1, 15, 12),
        end: new Date(2022, 1, 16, 14),
        title: 'My new event',
        googleEvent: {
            description: 'My new event description'
        }
    });

Parameters

• calendarId: Array - The ID of the calendar.
• event: Object - The event to update. You can pass Google specific event properties through the `googleEvent` property.
• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the updated event as parameter.

Returns: Promise

• Returns a promise which resolves with the updated event.

Example

googleCalendarSync.updateEvent(
    'MY_CALENDAR_ID', 
    { 
        start: new Date(2022, 1, 20, 10),
        end: new Date(2022, 1, 11, 15),
        title: 'My updated event',
        id: 1,
        googleEvent: {
            description: 'My updated event description'
        }
    });

Parameters

• calendarId: Array - The ID of the calendar.
• event: Object - The event to remove.
• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the deleted event as parameter.

Returns: Promise

• Returns a promise which resolves with the removed event.

Example

googleCalendarSync.deleteEvent(
    'MY_CALENDAR_ID', 
    { 
        title: 'My event'
        id: 1, 
    });

• clientId: String - The client ID obtained from the Outlook web app.
• msal: Object - The Microsoft Authentication Library, if already loaded. If not specified, the library will load it.
• msalClient: Object - The instance of the client application, if already loaded. If not specified, the library will load it.
• pageSize: Number - The maximum number of events to retreive with one request. Default value is '1000'.
• redirectUri: String - The location where the authorization server sends the user once the app has been successfully authorized. Default value is 'http://localhost:3000'.
• timezone: String - If specified, the event dates will be returned in this timezone.
• timezonePlugin: Object - The timezone plugin, needed if timezone is specified.
• onInit: Function - Callback executed when the library is initialized and ready to use.
• onSignedIn: Function - Callback executed when the user signed in.
• onSignedOut: Function - Callback executed when the user signed out.

Example

outlookCalendarSync.init({
    clientId: 'YOUR_CLIENT_ID',
    redirectUri 'MY_REDIRECT_URI',
});

Example

outlookCalendarSync.signIn();

Example

outlookCalendarSync.signOut();

Returns: Boolean

• true if the user is signed in, false if not.

Example

outlookCalendarSync.isSignedIn();

Parameters

• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the list of calendars as parameter.

Example

outlookCalendarSync.getCalendars();

Parameters

• calendarIds: Array - Array of the calendar IDs.
• start: Date - Start date of the specified interval.
• end: Date - End date of the specified interval.
• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the list of events as parameter.

Returns: Promise

• An array containing the event list.

Example

outlookCalendarSync.getEvents(
    ['MY_FIRST_CALENDAR_ID', 'MY_SECOND_CALENDAR_ID'],
    new Date(2022,1,1),
    new Date(2022,3,0)
).then(function(events){
    mobiscrollInstance.setEvents(events);
});

Parameters

• calendarId: Array - The ID of the calendar.
• event: Object - The event to add. You can pass Outlook specific event properties through the `outlookEvent` property.
• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the added event as parameter.

Returns: Promise

• Returns a promise which resolves with the added event.

Example

outlookCalendarSync.addEvent(
    'MY_CALENDAR_ID', 
    { 
        start: new Date(2022,1,15,12),
        end: new Date(2022,1,16,14),
        title: 'My new event',
        outlookEvent: {
            isReminderOn: true
        }
    });

Parameters

• calendarId: Array - The ID of the calendar.
• event: Object - The event to update. You can pass Outlook specific event properties through the `outlookEvent` property.
• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the updated event as parameter.

Returns: Promise

• Returns a promise which resolves with the updated event.

Example

outlookCalendarSync.updateEvent(
    'MY_CALENDAR_ID', 
    { 
        start: new Date(2022,1,20,10),
        end: new Date(2022,1,11,15),
        title: 'My updated event'
        id: 1,
        outlookEvent: {
            isReminderOn: false
        }
    });

Parameters

• calendarId: Array - The ID of the calendar.
• event: Object - The event to remove.
• callback(Optional): Function - Callback function which is executed then the request is complete. Receives the deleted event as parameter.

Returns: Promise

• Returns a promise which resolves with the removed event.

Example

outlookCalendarSync.deleteEvent(
    'MY_CALENDAR_ID', 
    { 
        title: 'My event'
        id: 1, 
    });