Datepicker

• 'pop'
• 'slide-down'
• 'slide-up'

• 'set' - Sets 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.
  • '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) {
            alert('Custom button clicked!');
        }
    },
    'cancel'
]

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

Controls the direction the calendar can be navigated. You can navigate by scrolling, swiping or by clicking the arrow buttons in the header.

• 'horizontal' - navigating the view horizontally.
• 'vertical' - navigationg the view vertically.

When navigation is 'vertical' the outer days (days from previous and next months) are hidden. You can explicitly override it with the showOuterDays option.

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

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

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

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

Sets the calendar type. Possible values: 'month', 'week'.

In case of 'month' set the number of displayed months using the pages option.

In case of 'week' set the number of displayed weeks using the weeks option.

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

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

• ['calendar']
• ['calendar', 'time']
• ['date']
• ['datetime']
• ['date', 'time']
• ['time']

Default selection which appears on the picker. The provided value will not be set as picker value, it's only a pre-selection.

If not provided, the default selection will be the current date and/or time.

If null is passed, in case of the calendar control there will be no selected value, in case of scroller controls the current date and time will still be displayed on the selected line, as an empty value cannot be displayed on the scroller.

• '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.
• 'anchored' - The component appears positioned to the element defined by the anchor option. 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.

The default display mode depends on the theme, it defaults to 'bottom' for the iOS theme and to 'center' for all other themes.

In desktop mode (when the touchUi option is set to false) the default display mode is 'anchored'.

• start: Date, String, Object - Start date of the calendar days which should be invalid.
• end: Date, String, Object - End date of the calendar days which should be invalid.
• recurring: String, Object - Recurrence rule for recurring invalid days.

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

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

It sets the maximum range that can be selected. When selecting a date without the time part, it sets the maximum number of days the selected range can contain. When there is a time part in the selection, it sets the maximum range in milliseconds.

It sets the minimum range that can be selected. When selecting a date range without the time part, it sets the minimum number of days the selected range can contain. When there is a time part in the selection, it sets the minimum range in milliseconds.

When selecting a range on the calendar control, it is optional to highlight the dates between the start and end date.

By default, the dates are highlighted between the start and end values. When the highlight is turned off, only the start and end dates are shown as selected on the calendar.

On desktop devices where a cursor is available, hovering the calendar days also help to visualize the selecting range. The hover styling is also turned off, when the range is not highlighted.

Use this option to customize the header of the Datepicker. 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>`;
}

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

responsive: {
    small: {
        display: 'bottom'
    },
    custom: { // Custom breakpoint
        breakpoint: 600,
        display: 'center'
    },
    large: {
        display: 'anchored'
    }
}

• 'jsdate' - Javascript date object
• 'iso8601' - ISO 8601 date string.
• 'locale' - Formatted date string based on the lang setting, or the dateFormat and timeFormat settings, if they are specified.
• 'moment' - moment object. Ensure that moment.js is loaded.

In terms of value selection, the datepicker can be used to select a single date/time or multiple dates/times, as well as a date range or a time range.

The select setting defines if the picker is used for selecting independent dates or a range.

Possible values are:

• 'date' - it is used for single of multiple date/time selection,
• 'range' - it is used for date range or time range selection

Show or hide days from previous and next months.

Outer days are automatically hidden if calendarScroll is set to 'vertical'.

By default when selecting a range, a start and end label is shown on the Datepicker. These labels indicate which part of the range are we selecting (start or end). The labels can also be used to switch the active selection from start to end or vice versa.

The showRangeLabels option can be used to show or hide the labels.

The start label text and end label text as well as the start value placeholder and end value placeholder can be localized and/or customized.

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

Use true to render a touch optimized user interface, or false for a user interface optimized for pointer devices (mouse, touchpad).

Can be used with the responsive option to change the user interface based on viewport width.

If set to 'auto', the touch UI will be automatically enabled based on the platform.

invalid: [
    { start: '00:00', end: '23:59' }, // Invalid time
    { start: new Date(2018, 11, 21), end: new Date(2018, 11, 31) } // Invalid date
],
valid: [
    { start: '09:00', end: '20:00' }, // Valid time
    { start: new Date(2018, 11, 26), end: new Date(2018, 11, 30) } // Valid date
]