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.
• disabled Boolean (Optional) - Sets the disabled state of the button.
• keyCode Number, String, Array (Optional) - The key code associated with the button to activate it from keyboard. Can be a single value or multiple value passed as an array. Predifine string values are: 'enter', 'esc' and 'space'.

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

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

Use this option to customize the header of the Datepicker. In the template you can use custom components as well as the built in header controls of the calendar.

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

<ng-template #customTemplate>
    <mbsc-calendar-prev></mbsc-calendar-prev>
    <mbsc-calendar-next></mbsc-calendar-next>
</ng-template>

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.

Number of months/weeks to display.

The months/weeks start from a reference date, that can be set using the refDate 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.

  import { jalaliCalendar } from '@mobiscroll/angular';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent {
      jalali = jalaliCalendar;
  }
  

  <mbsc-eventcalendar [calendarSystem]="jalali"></mbsc-eventcalendar>

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

  import { hijriCalendar } from '@mobiscroll/angular';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent {
      hijri = hijriCalendar;
  }
  

  <mbsc-eventcalendar [calendarSystem]="hijri"></mbsc-eventcalendar>

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

In case of 'month' set the number of displayed months using the pages option (swipeable month view) or the calendarSize option (grid month view).

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

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

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

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

• '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"

You can use dayContentTemplate option to customize the day cells of the Datepicker. You will get the styling taken care of by the Datepicker, and you can focus on what you show besides the day number a.k.a. the content.

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

The template will receive an object as data. This data can be used to show day specific things on the Datepicker. 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.

<ng-template #customDayTemplate>
    <div>{{formatDate('DDDD', day.date)}}</div>
    <p>{{formatDate('MMMM DD', day.date)}}</p>
</ng-template>

You can use the dayTemplate option to customize the day cells of the Datepicker. It takes a function that should return the desired markup. The Datepicker 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 dayContentTemplate option.

The template will receive an object as data. This data can be used to show day specific things on the Datepicker. 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. (In case of calendar view)
• events: Array - The list of events of the day.

<ng-template #customDayTemplate let-day>
    <div>{{formatDate('DDDD', day.date)}}</div>
    <p>{{formatDate('MMMM DD', day.date)}}</p>
</ng-template>

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

• '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"

Sets the first day of the selection, when preset-range selection is used. It takes a number representing the day of the week. Ex. Sunday is 0, Monday is 1, etc.

When not set, it defaults to the first day of the week, which depends on the localization used.

The length of the selection can be controlled with the selectSize option.

• 'underline'
• 'box'
• 'outline'

In case of range selection, determines if the invalid dates are allowed between the start and the end date.

When inRangeInvalid is set to false, the end selection will be limited to the next invalid date from the selected start date.

When designing a booking system, a possible solution for already booked dates is to set those dates to invalid.
When considering "check-in" and "check-out" selections with the datepicker, in some cases it is desireable to be able to check out on dates that already have a check-in. In this case, those dates would be disabled. Using the rangeEndInvalid option it can be allowed that the first invalid day after the start date can be selected as end date.

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

In certain cases it might be more convenient to specify the valid values instead of the invalid ones. In this case use the valid option instead.

• start: Date, String, Object - Start of the invalid range.
• end: Date, String, Object - End of the invalid range.
• recurring: String, Object - Recurrence rule for recurring invalid ranges.
• recurringException: String, Object, Array - Represents the exceptions of a recurring invalid. Useful when specific dates need to be skipped from the rule.
• recurringExceptionRule: String, Object - Represents the exception rule of a recurring invalid. Useful when recurring dates need to be skipped from the rule.
• cssClass String - Specifies the custom CSS class name of the invalid. Useful when customization is needed for specific invalids. This property is only applicable in the case of the scheduler and timeline view.

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

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

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

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

• 'stacked'
• 'inline'
• 'floating'

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

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

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 maximum time that is selectable on the time or the timegrid control.

When there is a date part of the selection, the maximum is applied to each day. For example

maxTime: '18:00'

max: '2021-08-22T18:00

This option can't be used with the ['datetime'] control.

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.

It sets the minimum time that is selectable on the time or the timegrid control.

When there is a date part of the selection, the minimum is applied to each day. For example

minTime: '08:00'

min: '2021-08-22T08:00

This option can't be used with the 'datetime' control.

When true, it enables the end date to be selected on the first invalid date that comes after the selected start date.

For example, when designing a booking system, a possible solution for already booked dates is to set those dates to invalid.
When considering "check-in" and "check-out" selections with the datepicker, in some cases it is desireable to be able to check out on dates that already have a check-in. In this example those dates would be disabled. With the rangeEndInvalid option it can be enabled, so the selection's end can be on the same day the first invalid is.

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.

• 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. It is also possible to select a week or a part of the week as a range, called preset-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 or multiple date/time selection
• 'range' - it is used for date range or time range selection
• 'preset-range' - it is used for a week range selection

Sets the length of the selection in days when the preset-range selection is used.

It defaults to the whole week (7 days).

The selection will start depending on the firstSelectDay option and will have the number of days specified by the selectSize.

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

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

By default the Datepicker uses the local timezone of the browser for value selection. If you want to select a date-time 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

import { momentTimezone, luxonTimezone } from '@mobiscroll/angular';

<mbsc-datepicker [timezonePlugin]="myPlugin" dataTimezone="utc" displayTimezone="America/New_York"></mbsc-eventcalendar>

import { momentTimezone } from '@mobiscroll/angular';

@Compoent({...})
export class MyComponent {
    myPlugin = momentTimezone;
}

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.

An array containing the valid values. Use it when it's more convenient to specify valid values instead of the invalid ones. If specified, everything else is considered to be invalid, and the invalid option will be ignored.

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 valid range.
• end: Date, String, Object - End of the valid range.
• recurring: String, Object - Recurrence rule for recurring valid ranges.
• recurringException: String, Object, Array - Recurrence exception for recurring valids.
• recurringExceptionRule: String, Object - Recurrence exception rule for recurring valids.

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

    // Passing valid ranges
    { 
      // ISO 8601 strings
      start: '2021-10-15T12:00',
      end: '2021-10-18T13:00',
    },
    {
      // Date objects
      allDay: true,
      start: new Date(2021, 2, 7),
      end: new Date(2021, 2, 9),
    },
    {
      // Time range with recurrence
      start: '09:00',
      end: '20:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO,TU,WE,TH,FR',
        interval: 1
      }
    }
];