Event Calendar

• 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.

• 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 - Recurrence exception for recurring colors.
• recurringExceptionRule: String, Object - Recurrence exception rule for recurring colors.
• cellCssClass: String - CSS class for the day cell.
• 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.

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' } }
]

• 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.
• 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 - Recurrence exception for the recurring event.
• recurringExceptionRule: String, Object - Recurrence exception rule for the recurring event.
• tooltip: String - Specifies the tooltip text of the event.

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"

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

• 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',
    };
}

• 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 - Recurrence exception for recurring invalids.
• recurringExceptionRule: String, Object - Recurrence exception rule for recurring invalids.
• 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.

invalid: [
    /* Passing exact dates will block out the entire day */
    new Date(2021, 1, 7), // Date object
    '2021-10-15T12:00', // string
    moment("2020-12-25"), // moment object

    /* Passing invalids as an object and defining start/end ranges */
    { 
      // specify invalid date ranges using ISO 8601 strings
      start: '2021-10-15T12:00',
      end: '2021-10-18T13:00', 
      title: 'Company 10th anniversary',
    },
    {
      // specify invalid date ranges using Date objects
      allDay: true,
      start: new Date(2021, 2, 7),
      end: new Date(2021, 2, 9),
      title: 'Conference for the whole team',
    },
    {
      // specify invalid time ranges only
      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 - Recurrence exception for recurring labels.
• recurringExceptionRule: String, Object - Recurrence exception rule for recurring labels.
• cellCssClass: String - CSS class for the day cell.

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 - Recurrence exception for marked days.
• recurringExceptionRule: String, Object - Recurrence exception rule for marked days.
• cellCssClass: String - CSS class for the day cell.
• 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.

You can use the renderDay option to customize the day cells of the Eventcalendar. 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, 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.
• 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>`;
}

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>`;
}

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 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.

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 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. 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. 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 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 +`"/>`;
}

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.

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.

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 component 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 (default false) - Enable displaying events as labels on calendar days. To display multiple events on a day, set the calendar height to an appropriate value, using the height setting, The 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.
  • 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'.
  • size: Number - Specifies the number of displayed days/weeks.
  • allDay: Boolean (default true) - Show or hide the all day events.
  • 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.
• 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'.
  • size: Number - Specifies the number of displayed days/weeks/months.
  • 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 accomodate 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.

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.
  • 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.
  • 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.
  • 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.
  • 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:
  • 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).
  • event: Object - The updated event object.
  • oldEvent: Object - The original event object before the update.
  • 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.
  • 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.
  • oldEvent: Object - The original event object before the update.
  • invalid: Object - The invalid 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:
  • date: Date - The selected date.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onSelectedDateChange: 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();

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

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

• 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

• 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