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.

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

• date Date, String, Object - Date of the calendar day which should be colored.
• start Date, String, Object - Start date of the calendar days which should be colored.
• end Date, String, Object - End date of the calendar days which should be colored.
• background: String - Background color of the day 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.
• cellCssClass: String - CSS class for the day cell. This property is only applicable in the case of the calendar 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' } }
]

• 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.
• recurring: String, Object - Recurrence rule for 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'
          }
        }]
        

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.
• title: String - Text which will be displayed on the schedule view for the invalid range.

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

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

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.

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.

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.

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

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

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: 'month', 'week'.
  • size: Number - Specifies the number of displayed weeks.
  • 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' .
  • days: Boolean (default true) - Show or hide week days above the schedule grid.

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.
  • selected: Boolean - Specifies if the day is currently selected or not (before it was clicked).
  • 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: The selected date as a Date object.
  • events: The events 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.
  • 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.
• 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.
• 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:
  • 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:
  • 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:
  • 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 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();

Returns: Array

• An array containing the event objects.

Example

mobiscrollInstance.getEvents();

Returns: Object

• The object instance.

Example

mobiscrollInstance.getInst();

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

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