Event Calendar

• 'fade'
• 'flip'
• 'pop'
• 'swing'
• 'slidevertical'
• 'slidehorizontal'
• 'slidedown'
• 'slideup'

• 'set' - Sets the value.
• 'clear' - Clears the value.
• 'cancel' - Dismisses the popup.

• text String - Text of the button.
• handler String, Function - The function which will run when the button is pressed. If a string, it must be one of the predefined button handlers:
  • 'set' - Sets the value.
  • 'clear' - Clears the value.
  • 'cancel' - Dismisses the popup.
• icon String (Optional) - Icon of the button.
• cssClass String (Optional) - Css class of the button.

buttons: [ 
    'set',
    { 
        text: 'Custom',
        icon: 'checkmark',
        cssClass: 'my-btn', 
        handler: function (event, inst) {
            alert('Custom button clicked!'); 
        } 
    },
    'cancel'
]

buttons: [
    'set',
    { 
        text: 'Hide',
        handler: 'cancel',
        icon: 'close',
        cssClass: 'my-btn'
    }
]

• 'horizontal' - Horizontal scroll.
• 'vertical' - Vertical scroll.

• 'gregorian'
• 'jalali' - Default system of the Persian calendar. Farsi language need to be included to the package.
• 'hijri' - Arabic language need to be included to the package.

• exact dates, both start and end dates - javascript Date objects , ISO 8601 strings, or moment objects for multi-day colors:
  { start: new Date(2014, 5, 5), end: new Date(2014, 5, 7), background: 'red' }
• exact dates - javascript Date objects , ISO 8601 strings, or moment objects .
  { d: new Date(2014, 5, 5), background: 'red' }
• days of week - number of week day (0 - 6) prefixed with 'w', e.g. 'w0', 'w6'.
• days of month - number (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th December).

colors: [
    { d: new Date(2012,5,4), background: 'pink' },
    { d: new Date(2012,5,13), background: 'green' },
    { d: 'w0', background: 'yellow' },
    { d: 'w6', background: 'yellow' },
    { d: '5/1', background: 'red' },
    { d: '12/24', background: '#ff0000' },
    { d: '12/25', background: 'red' }
]

• dDate, String, Number - Defines the date of the event.
• startDate - Specifies the start of the event.
• endDate - Specifies the end of the event.
• textString - The name of the event.
• colorString - Color for the event.
• allDayBoolean - If true, the event will be all-day and listed on the top of the list, together with the repeating events.

• exact dates, both start and end dates - javascript Date objects , ISO 8601 strings, or moment objects for multi-day events:
  { start: new Date(2014, 5, 5), end: new Date(2014, 5, 7), text: 'My event' }
• exact dates - javascript Date objects , ISO 8601 strings, or moment objects.
  { d: new Date(2014, 5, 5), text: 'My event' }
• days of week - number of week day (0 - 6) prefixed with 'w':
  { d: 'w6', text: 'My event' }
• days of month - number (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th December):
  { d: 2, text: '2nd of the month' }

• addEvent
• removeEvent
• getEvents
• setEvents

data: [
    {
        start: new Date(2012,4,4),
        end: new Date(2012,4,5),
        text: 'Conference',
        color: 'red'
    },
    {
        d: '12/25',
        text: 'Christmas'
    }
]

• 'center' - The component appears as a popup at the center of the viewport.
• 'inline' - If called on div element, the component is placed inside the div (overwriting existing content), otherwise is placed after the original element.
• 'bubble' - The component appears as a bubble positioned to the element defined by the 'anchor' setting. By default the anchor is the original element.
• 'top' - The component appears docked to the top of the viewport.
• 'bottom' - The component appears docked to the bottom of the viewport.

• exact dates, both start and end dates - javascript Date objects , ISO 8601 strings, or moment objects for multi-day labels:
  { start: new Date(2014, 5, 5), end: new Date(2014, 5, 7), text: 'My event' }
• exact dates - javascript Date objects , ISO 8601 strings, or moment objects .
  { d: new Date(2014, 5, 5), text: 'My event' }
• days of week - number of week day (0 - 6) prefixed with 'w':
  { d: 'w6', text: 'My event' }
• days of month - number (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th December):
  { d: 2, text: '2nd of the month' }

labels: [
    {
        start: new Date(2012,4,4),
        end: new Date(2012,4,5),
        text: 'Conference',
        color: 'red'
    },
    {
        d: '12/25',
        text: 'Christmas'
    }
]

• 'liquid' - The calendar view expand to the maximum available width
  In 'top' or 'bottom' display mode this is the default behavior.
  In 'center'display mode it will also expand the height to the height of the viewport.
• 'fixed' or undefined - The width and height of the calendar is controlled by the calendarWidth and calendarHeight options.

• exact dates, both start and end dates - javascript Date objects , ISO 8601 strings, or moment objects for multi-day marks:
  { start: new Date(2014, 5, 5), end: new Date(2014, 5, 7) }
• exact dates - javascript Date objects , ISO 8601 strings, or moment objects .
• days of week - number of week day (0 - 6) prefixed with 'w', e.g. 'w0', 'w6'.
• days of month - number (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th December).

marked: [
    new Date(2012,5,4),
    new Date(2012,5,13),
    'w0',
    'w6',
    { d: '5/1', color: 'red' },
    { d: '12/24', color: '#ff0000' },
    { d: '12/25', color: 'red' }
]

mobiscroll.calendar('#mydate', {
    max: new Date(2015, 7, 14)
});

mobiscroll.calendar('#mydatetime', { 
    controls: ['calendar', 'time'],
    max: new Date(2015, 7, 14, 16, 57)
});

mobiscroll.calendar('#mydate', { 
    min: new Date(2015, 7, 14) 
});

mobiscroll.calendar('#mydatetime', {
    controls: ['calendar', 'time'],
    min: new Date(2015, 7, 14, 16, 57)
});

• false - Display marks on days with events.
• true - Display text indicating the number of events on days with events.

• 'bootstrap' - Bootstrap themes
• 'ios' - iOS theme
• 'ios-dark' - iOS dark theme (deprecated)
• 'material' - Material theme
• 'material-dark' - Material dark theme (deprecated)
• 'mobiscroll' - Mobiscroll theme
• 'mobiscroll-dark' - Mobiscroll dark theme (deprecated)
• 'windows' - Windows theme
• 'windows-dark' - Windows dark theme (deprecated)

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

Properties

• calendar: Object - Configures the calendar view. If omitted, no calendar will be displayed.
  Properties:
  • type: String - Sets the calendar type. Possible values: 'month', 'week'.
  • size: Number - Specifies the number of displayed months or weeks (depending on the specified type).
  • popover: Boolean - 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.
  • labels: Boolean - 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 calendarHeight 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.
• eventList: Object - Configures the event list. If omitted, no event list will be displayed.
  Properties:
  • type: String - 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 - Specifies the number of years, months, weeks or days included in the list (depending on the specified type).
  • scrollable: Boolean - Specifies if the event list should be scrollable or not.
    To use this feature, the event calendar should be placed in a container which has a height. The calendar will fill the height of the parent container, and if the space for the event list has a minimum height of 200px, scrolling is turned on.

Example

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

• 'year' - Display week number in the year
• 'month' - Display week number in the month

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
  • button: String - The name of the button which triggered the component to close ('set', or 'cancel').
• inst: Object - The instance object of the eventcalendar.

Example

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

Parameters

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

Example

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

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onClose: 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 selected date.
  • marked: If the day is marked, contains the marked object passed in the settings, otherwise false.
  • selected: Specifies if the day is currently selected or not (before the current selection).
  • target: The table cell HTML DOM element.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onDayChange: 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:
  • event: Object - The selected event.
  • domEvent: Object - The click/tap DOM event.
  • date: Object - The date clicked.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onEventSelect: 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 clicked.
  • domEvent: Event - The click/tap DOM event.
  • 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', {
    onLabelTap: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
• inst: Object - The instance object of the eventcalendar.

Example

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

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day as Date object.
• 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 as Date object.
• 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 as Date object.
• 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:
  • target: Object - The DOM element containing the generated html.
  • windowWidth: Number - The window width.
  • windowHeight: Number - The window height.
• inst: Object - The instance object of the eventcalendar.

Example

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

Parameters

• event: Object - The event object has the following properties:
  • date: The selected date as a Date object
  • control: The control on which the date was selected: calendar, date or time. It will be undefined on initial show, or if date was set programmatically.
• inst: Object - The instance object of the eventcalendar.

Example

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

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the eventcalendar.

Example

mobiscroll.eventcalendar('#mobiscroll', {
    onShow: 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), 
    text: 'Conference', 
    color: 'red' 
}, { 
    d: '12/25', 
    text: 'Christmas' 
}]);

Returns: Object

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

Example

mobiscrollInstance.destroy();

Parameters

• date (Optional): Date - If specified, only returns the list of events for the given date.

Returns: Array

• An array containing the event objects.

Example

mobiscrollInstance.getEvents();

Returns: Object

• The object instance.

Example

mobiscrollInstance.getInst();

Parameters

• prevAnim (Optional): Boolean - If true, hide will not be animated.
• btn (Optional): String - Specifies which button caused the component to hide, and it's passed to the onBeforeClose event.

Example

    mobiscrollInstance.hide();
    

Returns: Boolean

• True if the component is visible, false if it's not.

Example

mobiscrollInstance.isVisible();

Parameters

• date: Date - The specific month on the calendar.
• animate (Optional): Boolean - If true, navigate will be animated.
• pop (Optional): Boolean - If true, it also opens the event listing popover for the given day, if there are events.

Example

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

Parameters

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

Example

mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});

Parameters

• check (Optional): Boolean - If true, the function checks if viewport size changed after last position call, if false or ommitted, position is recalculated anyway.

Example

mobiscrollInstance.position();

Example

mobiscrollInstance.redraw();

Example

mobiscrollInstance.refresh();

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), 
    text: 'Conference',
    color: 'red'  
}, { 
    d: '12/25', 
    text: 'Christmas' 
}]);

Parameters

• prevAnim (Optional): Boolean - If true, show will not be animated.
• prevFocus (Optional): Boolean - If true, the popup will not be focused right after show.

Example

mobiscrollInstance.show();

Parameters

• el: Object - The element with tap event.
• handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

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)
• M - month name short
• MM - month name long
• d - day of month (no leading zero)
• dd - day of month (two digit)
• D - day of week (short)
• DD - day of week (long)
• y - year (two digit)
• yy - year (four digit)
• '...' - literal text
• '' - single quote
• anything else - literal text

• Arabic: 'ar'
• Bulgarian: 'bg'
• Catalan: 'ca'
• Czech: 'cs'
• Chinese: 'zh'
• Croatian: 'hr'
• Danish: 'da'
• Dutch: 'nl'
• English: 'en' or 'en-US' or undefined
• English (UK): 'en-UK' or 'en-GB'
• Farsi: 'fa'
• German: 'de'
• Greek: 'el'
• Spanish: 'es'
• Finnish: 'fi'
• French: 'fr'
• Hebrew: 'he'
• Hindi: 'hi'
• Croatian: 'hr'
• Hungarian: 'hu'
• Italian: 'it'
• Japanese: 'ja'
• Korean: 'ko'
• Lithuanian: 'lt'
• Norwegian: 'no'
• Polish: 'pl'
• Portuguese (Brazilian): 'pt-BR'
• Portuguese (European): 'pt-PT'
• Romanian: 'ro'
• Russian: 'ru'
• Russian (UA): 'ru-UA'
• Slovak: 'sk'
• Serbian: 'sr'
• Thai: 'th'
• Swedish: 'sv'
• Turkish: 'tr'
• Ukrainian: 'ua'
• Vietnamese: 'vi'

• 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)
• i - minutes (no leading zero)
• ii - 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