Skip to main content

Eventcalendar API

Here is a comprehensive list of all the options, events and method the Eventcalendar has.

Options​

Explore the following API options that help you easily configure the Eventcalendar.

actionableEvents​

boolean

Specifies if the events on the agenda and inside the calendar popover are actionable or not. If actionable, the event items will have hover and active states, and pointer cursor. Set to false when custom event rendering is used and the event list items contain other actionable elements, e.g. buttons.

Default value: true

clickToCreate​

boolean | "double" | "single"

Enable new event creation on click. If true or 'double', a new event will be created only with a double click and with the 'single' value the event will be created instantly with a single click.

This option will only work on desktop environment where mouse events are fired. It will also allow deleting of the focused events using the Delete or Backspace key.

In touch environment a long tap should be used to create a new event and it is controlled by the dragToCreate option.

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

The event deletion functionality can be overwritten using the eventDelete option.

Default value: undefined

colors​

Array<MbscCalendarColor>

Specifies the color for certain dates or date ranges on the calendar.

The MbscCalendarColor type has the following properties:

  • allDay: boolean - Specifies whether the date you want to color is all day or not.
  • background: string - Background color of the cell. It can be any valid CSS color ('red', '#ff0000', 'rgb(255, 0, 0)', etc.).
  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • cssClass: string - Specifies a custom CSS class for the color. Useful when customization is needed for the background of cells and time ranges. Only applicable for the timeline and scheduler views.
  • date: string | object | Date - Specifies a single date for the color
  • end: string | object | Date - Specifies the end date/time of a date/time range for the color
  • highlight: string - Highlight color of the day, can be any valid CSS color ('red', '#ff0000', 'rgb(255, 0, 0)', etc.).
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • resource: string | number | Array<string | number> - In case of the timeline and scheduler view of the Eventcalendar, specifies the resource ids for the color. The color will be displayed only on the specified resource. If there is no resource defined, it will be applied to every resource.
  • slot: string | number - In case of the timeline view of the Eventcalendar, specifies the slot id for the color. The color will be displayed only on the specified slot. If there is no slot defined, it will be applied to every slot.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the color
  • textColor: string - A color applied on the text.
  • title: string - A title that will be displayed on the item.
info

The colored range will be considered all-day if:

  • the allDay property is explicitly set.
  • the start / end properties are not specified, only the date.
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

info

For Javascript Date objects the month numbers are zero based. Like: 0 - January, 1 - February ... 11 - December.

info

The colors can be combined with the labels or marked options.

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

Default value: undefined

connections​

Array<MbscEventConnection>

Specifies connections between events. On the UI events will be linked with lines and additionally arrows can be displayed to illustrate the direction of the connection. Events can have multiple connections simultaneously.

An array of connection objects can be passed.

The MbscEventConnection type has the following properties:

  • arrow: boolean | "from" | "to" | "bidirectional" - Specifies where to display arrows If true, the arrow will display only at the end side of the connection.
  • color: string - Specifies the color of the connection.
  • cssClass: string - Custom CSS class for the connection line for further customization.
  • from: string | number - The id of the event where the connection will begin
  • to: string | number - The id of the event where the connection will end.
  • type: "fs" | "sf" | "ss" | "ff" - The type of the connection. Possible values: 'fs' - finish-to-start, 'sf' - start-to-finish, 'ss' - start-to-start, 'ff' - finish-to-finish.

Default value: undefined

context​

string | HTMLElement

The DOM element in which the popups (event popover, year and month picker) are rendered. Can be a selector string or a DOM element.

Default value: 'body'

cssClass​

string

Specifies a custom CSS class for the component.

Default value: undefined

data​

Array<MbscCalendarEvent>

The events for the Eventcalendar.

The MbscCalendarEvent type has the following properties:

  • allDay: boolean - Specifies if the event is all day or not.
  • bufferAfter: number - Defines a buffer time in minutes that will be displayed after the end of the event.
  • bufferBefore: number - Defines a buffer time in minutes that will be displayed before the start of the event.
  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Background color of the event
  • cssClass: string - Specifies a custom CSS class that is applied to the event. Useful when customization is needed on the event level. For example: setting the width for specific events.
  • date: string | object | Date - Specifies a single date for the event
  • dragBetweenResources: boolean - Specifies whether the event is movable across resources.
  • dragBetweenSlots: boolean - Specifies whether the event is movable across across slots.
  • dragInTime: boolean - Specifies whether the event is movable in time.
  • editable: boolean - Specifies if an event is editable or not. If false, drag & drop and resize is not allowed.
  • end: string | object | Date - Specifies the end date/time of a date/time range for the event
  • id: string | number - A unique id for the event. If not specified, the event will get a generated id.
  • order: number - Specifies the order of the event in the array. Has precedence over the default ordering rules.
  • overlap: boolean - Specifies whether the event can be overlapped. Has precedence over the eventOverlap property of the resource and the eventOverlap option.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring events.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • resize: boolean - Specifies whether the event is resizable. Has precedence over the eventResize property of the resource and the dragToResize option.
  • resource: string | number | Array<string | number> - In case of the timeline and scheduler view of the Eventcalendar, specifies the resource ids for the event. The event will be displayed only on the specified resource. If there is no resource defined, it will be displayed on every resource.
  • slot: string | number - In case of the timeline view of the Eventcalendar, specifies the slot id for the event. The event will be displayed only on the specified slot. If there is no slot defined, it will be displayed on every slot.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the event
  • textColor: string - A color applied on the text.
  • timezone: string - Timezone of the event
  • title: string - The title of the event.
  • tooltip: string - The tooltip text of the event.
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

info

For Javascript Date objects the month numbers are zero based. Like: 0 - January, 1 - February ... 11 - December.

info

The event objects may have additional custom properties as well. The custom properties are not used by the event calendar, but they are kept and will be available anywhere the event objects are used. E.g. the onEventClick event will receive the event object as argument, containing the custom properties as well.

info

Use the getEvents method to get the events between two dates.

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

Default value: undefined

dataTimezone​

string

The timezone in which the data is interpreted. If the data contains timezone information (when the ISO string has a timezone offset, e.g. "2021-03-28T01:00:00Z" or "2021-03-28T03:00:00+03:00") then the data's timezone is used instead.

info

When using timezones, the exclusiveEndDates option is also turned on by default.

info

When using anything other than the default ('local'), a timezone plugin must be also passed to the component.

Possible values:

  • 'local' - The system's local timezone.
  • 'utc' - UTC (Universal Coordinated Time) timezone.
  • Timezone name - The timezone name from the IANA time zone database, e.g. "America/New_York".

If not specified, it defaults to the displayTimezone.

Default value: undefined

defaultSelectedDate​

MbscDateType

Specifies the initial selected date on the calendar.

For views, where time is also displayed, the view will be scrolled to the specified time. If the time part is not explicitly specified, it defaults to the start of the day.

Default value: undefined

displayTimezone​

string

The timezone in which the data is displayed.

info

When using timezones, the exclusiveEndDates option is also turned on by default.

info

When using anything other than the default ('local'), a timezone plugin must be also passed to the component.

Possible values:

  • 'local' - The system's local timezone.
  • 'utc' - UTC (Universal Coordinated Time) timezone.
  • Timezone name - The timezone name from the IANA time zone database, e.g. "America/New_York".

Default value: 'local'

dragBetweenResources​

boolean

If false, the events will not be moveable across resources, only in time. To control movement in time, use the dragInTime option.

Consider that dragToMove has to be enabled.

Default value: true

dragBetweenSlots​

boolean

If false, the events will not be moveable across slots, only in time and resource. To control movement in time, use the dragInTime option.

Consider that dragToMove has to be enabled.

Default value: true

dragInTime​

boolean

If false, the events will not be moveable in time. In case of the scheduler and timeline views events events can still be moved between resources. To control movement between resources, use the dragBetweenResources option.

Consider that dragToMove has to be enabled.

Default value: true

dragTimeStep​

number

Specifies the steps in minutes for the scheduler and timeline events during drag.

Default value: 15

dragTimeStepBase​

"viewStart" | "dayStart"

Specifies the base of the dragTimeStep calculation. If set to 'viewStart' it takes the startTime property of the view option as reference.

Default value: 'dayStart'

dragToCreate​

boolean

If true, dragging on an empty cell will create a new event. It will also allow deleting of the focused events using the Delete or Backspace key.

The title of the new event can be specified with the newEventText option.

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

The event deletion functionality can be overwritten using the eventDelete option.

Default value: undefined

dragToMove​

boolean

If true, the events will be moveable.

Default value: undefined

dragToResize​

boolean

If true, the events will be resizable.

Default value: undefined

eventDelete​

boolean

Enables or disables event deletion. When true, the focused event will be deleted on pressing the Delete or Backspace keys on the keyboard.

By default the event deletion depends on the clickToCreate and dragToCreate options. If either of those are true, and no eventDelete option is set, then event deletion is also enabled, otherwise not.

Default value: undefined

eventOrder​

(event1: MbscCalendarEvent, event2: MbscCalendarEvent) => number

Determines the ordering of the events within the same day. Can be a function that accepts two event objects as arguments and should return -1 or 1.

If not specified, the default order is:

  • all day events
  • rest of events, sorted by start time; events with identical start times, will be ordered alphabetically based on their title

Default value: undefined

eventOverlap​

boolean

If false, the events cannot overlap.

Default value: true

exclusiveEndDates​

boolean

If true, the Eventcalendar will work in exclusive end dates mode, meaning that the last moment of the range (event, invalid, colors, etc.) is not part of the range.

E.g. end: '2021-07-03T00:00' means that the event ends on 2nd of July and will not be displayed on 3rd of July.

info

When using timezones, the exclusiveEndDates option will default to true.

extendDefaultEvent​

(args: MbscNewEventData) => void | MbscCalendarEvent

Use this option to set properties to the new event created with click or drag. The event creation is handled by the clickToCreate and dragToCreate options. It takes a function that should return the properties for the new event. The argument object passed to this function has the following properties:

  • start: Date - The date when the newly created event will start.
  • resource: string | number - The id of the resource where the event creation started.
extendDefaultEvent: (args) => {
  return {
    color: args.resource === 'admin' ? 'green' : 'red',
    title: 'My event',
  };
}

Default value: undefined

externalDrag​

boolean

If true, external drag & drop is allowed and events can be dragged outside of the component view.

Default value: undefined

externalDrop​

boolean

If true, external events can be dragged into the view.

Default value: undefined

externalResourceDrag​

boolean

If true, external drag & drop is allowed and resource can be dragged outside of the component view.

Default value: undefined

externalResourceDrop​

boolean

If true, external resources can be dragged into the view.

Default value: undefined

groupBy​

"date" | "resource"

Groups the events by date or by resource.

Default value: 'resource'

height​

string | number

Sets the height of the component.

The height of the calendar view impacts the number of labels that fit into a table cell. A "show more" label will be displayed for events that don't fit.

Default value: undefined

immutableData​

boolean

If true, the Eventcalendar will work in immutable mode. In this mode the component won't update the data directly, only fire the necessary lifecycle events, where the original data can be updated manually.

Default value: undefined

invalid​

Array<MbscDateType> | Array<MbscCalendarInvalid>

An array containing the invalid values. Can contain dates, or objects with the following properties:

  • allDay: boolean - Specifies whether the invalid range is all day or not.
  • 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<string | object> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | object - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • resource: string | number | Array<string | number> - Specifies the resource ids for the invalid range. The invalid range will be displayed only in the specified resource. If there is no resource defined, the invalid range will be displayed in every resource.
  • slot: string | number - Specifies the slot id for the invalid range. The invalid range will be displayed only in the specified slot. If there is no slot defined, the invalid range will be displayed in every slot.
  • title: string - Text which will be displayed for the invalid range. Only applicable for the timeline and scheduler views.
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

info

For Javascript Date objects the month numbers are zero based. Like: 0 - January, 1 - February ... 11 - December.

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

Default value: undefined

The MbscCalendarInvalid type has the following properties:

  • allDay: boolean - If true the specified invalid will cover the whole day.
  • end: MbscDateType - Specifies the end of the invalid range.
  • recurring: string | MbscRecurrenceRule - Recurrence rule for recurring invalid ranges.
  • recurringException: MbscDateType | Array<MbscDateType> - Specifies recurring exceptions. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Specifies a recurrence exception rule. Useful when recurring dates need to be skipped from the rule.
  • start: MbscDateType - Specifies the start of the invalid range.

invalidateEvent​

"strict" | "start-end"

Specifies how to validate events against invalid ranges on create/move/resize:

  • 'strict' - The event cannot intersect with an invalid range at all.
  • `'start-end' - The event start and end cannot be inside an invalid range.

Default value: 'strict'

labels​

Array<MbscCalendarLabel>

Specifies labels for calendar days.

The MbscCalendarLabel type has the following properties:

  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Background color of the label.
  • cssClass: string - Specifies a custom CSS class that is applied to the label.
  • date: string | object | Date - Specifies a single date for the label
  • end: string | object | Date - Specifies the end date/time of a date/time range for the label
  • order: number - Specifies the order of the label in the array. Has precedence over the default ordering rules.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the label
  • textColor: string - A color applied on the text.
  • title: string - The title of the label.
  • tooltip: string - Tooltip for the label
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

info

For Javascript Date objects the month numbers are zero based. Like: 0 - January, 1 - February ... 11 - December.

info

The labels can be combined with the colors option.

[
  {
    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 }
  }
]

Default value: undefined

marked​

Array<MbscCalendarMarked>

Mark certain dates on the calendar. An array containing dates, or objects with the following properties:

The MbscCalendarMarked type has the following properties:

  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Color of the mark.
  • date: string | object | Date - Specifies a single date when this is applicable
  • end: string | object | Date - Specifies the end date/time of a date/time range when this is applicable
  • markCssClass: string - CSS class for the mark.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • start: string | object | Date - Specifies the start date/time of a date/time range when this is applicable
  • textColor: string - A color applied on the text.
  • title: string - A title that will be displayed on the item.
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

info

For Javascript Date objects the month numbers are zero based. Like: 0 - January, 1 - February ... 11 - December.

info

The marked days can be combined with the colors option.

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

Default value: undefined

max​

MbscDateType

Maximum date and time. The calendar cannot be navigated beyond the specified maximum date. If navigation is needed, but event creation should not be allowed after a specific date, use the invalid option with daily recurrence starting from the specific date.

Default value: undefined

min​

MbscDateType

Minimum date and time. The calendar cannot be navigated beyond the specified minimum date. If navigation is needed, but event creation should not be allowed before a specific date, use the invalid option with daily recurrence until the specific date.

Default value: undefined

modules​

Array<IModule>

Additional modules can be added to the eventcalendar. The option receives an array of module objects. For example, the print module can be added through this option.

// import the print module
import { print } from '@mobiscroll/print';

// later on, add it to the modules array:
modules: [print]

refDate​

MbscDateType

Specifies the reference date for the view calculation, when multiple days, weeks, months or years are displayed. If not specified, will be today's date.

It denotes the reference point when calculating the pages going in the future and in the past. For example if the view type is day, the view size is 3, and the current date is 01/16/2024, the pages are calculated from this date, so the initial page will contain [01/16/2024, 01/16/2024, 01/17/2024], the next page [01/18/2024, 01/19/2024, 01/20/2024] and so on.

In case of day view, the reference point will be exactly the specified date. For week, month and year views the reference point will be the start of the week, month or year of the specified day.

Changing the reference date will not navigate the calendar to the specified date, it only recalculates the pages from the new reference date. To navigate the view to a specified date and time, use the selectedDate option.

Default value: undefined

resources​

Array<MbscResource>

The scheduler and timeline views can handle multiple resources. Resource grouping can be modified with the help of the groupBy option.

If set to null or undefined, all events will be displayed, regardless of their resource property. The timeline view will not display the resource column, if the resources option is not set.

If set to an empty array, only those events will be displayed which are not tied to any resource. The timeline view will display an empty resource column when an empty array is passed.

The timeline view can render multiple levels of hierarchy groups. Levels can be added with the help of the children property.

The MbscResource type has the following properties:

  • background: string - Specifies the background color of the resource row or column.
  • children: Array<MbscResource> - Child resources.
  • collapsed: boolean - Specifies the displayed state of the child resource group.
  • color: string - Specifies the default event color of the resource. If an event has an explicit color set, the resource color will be overridden. If the color is not set, the events of the resource will inherit the default calendar color.
  • cssClass: string - Specifies a css class for the resource row or column.
  • eventCreation: boolean - Disables event creation on specific resources by setting it to false. Defaults to true.
  • eventDragBetweenResources: boolean - Specifies whether the events in this resource are movable across resources. It applies for scheduler and timeline views. Has precedence over the dragBetweenResources option.
  • eventDragBetweenSlots: boolean - Specifies whether the events in this slot are movable across slots. Has precedence over the dragBetweenSlots option.
  • eventDragInTime: boolean - Specifies whether the events in this resource are movable in time. Has precedence over the dragInTime option.
  • eventOverlap: boolean - Specifies whether the events in this resource can be overlapped. Has precedence over the eventOverlap option.
  • eventResize: boolean - Specifies whether the events in this resource are resizable. Has precedence over the dragToResize option.
  • fixed: boolean - Specifies whether the resource is fixed to the top. It applies for timeline view if resolutionVertical in view option is not given, or it's value is set to none. Consider that the fixed resources always have to be the first elements of the array in a sequence (no non-fixed resources inserted in between) so that the dra & rop and event creation functionalities to work properly.
  • id: string | number - The id of the resource.
  • name: string - Specifies the name of the resource.
  • reorder: boolean - Specifies whether the resource can be dragged and reordered. It applies for timeline view if resourceReorder in view option is enabled.
resources: [
  {
    id: 1,
    name: 'Flatiron Room',
    color: '#f7c4b4'
  },
  {
    id: 2,
    name: 'The Capital City',
    color: '#c6f1c9'
  },
  {
    id: 3,
    name: 'Heroes Square',
    color: '#e8d0ef'
  }
]

Default value: undefined

responsive​

MbscResponsiveOptions<MbscEventcalendarOptions>

Specifies different options for different container widths, in a form of an object, where the keys are the name of the breakpoints, and the values are objects containing the options for the given breakpoint.

info

The available width is queried from the container element of the component and not the browsers viewport like in css media queries

There are five predefined breakpoints:

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

Custom breakpoints can be defined by passing an object containing the breakpoint property specifying the min-width in pixels. Example:

responsive: {
  small: {
    display: 'bottom'
  },
  custom: { // Custom breakpoint, you can use multiple, but each must have a unique name
    breakpoint: 600,
    display: 'center'
  },
  large: {
    display: 'anchored'
  }
}

Default value: undefined

selectMultipleEvents​

boolean

When true, enables multiple event selection on the calendar.

Default value: false

selectedDate​

MbscDateType

Specifies the selected date on the calendar. This can be changed programmatically and when changed the calendar will automatically navigate to the specified date.

For views, where time is also displayed, the view will be scrolled to the specified time. If the time part is not explicitly specified, it defaults to the start of the day.

This does not change the reference date that defines the reference point of the navigation pages. To change the reference point for the navigation (e.g. start the paging from the newly selected date) use the refDate option.

You also need to pass a handler for the onSelectedDateChange event to update the selected date when the date is changed from the calendar.

Default value: undefined

selectedEvents​

Array<MbscCalendarEvent>

Specifies the selected events on the calendar. The onSelectedEventsChange event will be fired when the selected events change from the calendar.

The MbscCalendarEvent type has the following properties:

  • allDay: boolean - Specifies if the event is all day or not.
  • bufferAfter: number - Defines a buffer time in minutes that will be displayed after the end of the event.
  • bufferBefore: number - Defines a buffer time in minutes that will be displayed before the start of the event.
  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Background color of the event
  • cssClass: string - Specifies a custom CSS class that is applied to the event. Useful when customization is needed on the event level. For example: setting the width for specific events.
  • date: string | object | Date - Specifies a single date for the event
  • dragBetweenResources: boolean - Specifies whether the event is movable across resources.
  • dragBetweenSlots: boolean - Specifies whether the event is movable across across slots.
  • dragInTime: boolean - Specifies whether the event is movable in time.
  • editable: boolean - Specifies if an event is editable or not. If false, drag & drop and resize is not allowed.
  • end: string | object | Date - Specifies the end date/time of a date/time range for the event
  • id: string | number - A unique id for the event. If not specified, the event will get a generated id.
  • order: number - Specifies the order of the event in the array. Has precedence over the default ordering rules.
  • overlap: boolean - Specifies whether the event can be overlapped. Has precedence over the eventOverlap property of the resource and the eventOverlap option.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring events.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • resize: boolean - Specifies whether the event is resizable. Has precedence over the eventResize property of the resource and the dragToResize option.
  • resource: string | number | Array<string | number> - In case of the timeline and scheduler view of the Eventcalendar, specifies the resource ids for the event. The event will be displayed only on the specified resource. If there is no resource defined, it will be displayed on every resource.
  • slot: string | number - In case of the timeline view of the Eventcalendar, specifies the slot id for the event. The event will be displayed only on the specified slot. If there is no slot defined, it will be displayed on every slot.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the event
  • textColor: string - A color applied on the text.
  • timezone: string - Timezone of the event
  • title: string - The title of the event.
  • tooltip: string - The tooltip text of the event.

Default value: undefined

separator​

string

Separator between date and time in the formatted date string.

Default value: ' '

showControls​

boolean

Show or hide the calendar header controls: the previous and next buttons, and the current view button together with the year and month picker.

Default value: true

showEventBuffer​

boolean

If true, it will display the event buffers defined in the event data.

Default value: true

showEventTooltip​

boolean

If false, it will hide the native tooltip that shows up when hovering over an event.

Default value: true

slots​

Array<MbscSlot>

The slots, besides the resources introduce a horizontal level of data grouping to the timeline view.

If set to 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 MbscSlot type has the following properties:

  • eventDragBetweenSlots: boolean - Specifies whether the event is movable across slots.
  • id: string | number - The id of the slot. It 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',
  }
]

Default value: undefined

theme​

string

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

Supplied themes:

  • 'ios' - iOS theme
  • 'material' - Material theme
  • 'windows' - Windows theme

It's possible to modify theme colors or create custom themes.

info

Make sure that the theme you set is included in the downloaded package.

Default value: undefined

themeVariant​

"auto" | "light" | "dark"

Controls which variant of the theme will be used (light or dark).

Possible values:

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

Default value: undefined

timezonePlugin​

MbscTimezonePlugin

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

By default the component uses the local timezone of the browser to interpret dates. If you want to interpret dates a different timezone, you will need an external library to handle the timezone conversions. There are two supported libraries: moment-timezone and luxon.

You can specify either the dataTimezone or the displayTimezone or both.

Depending on which external library you use you can pass either the momentTimezone, dayjsTimezone or luxonTimezone objects. These objects can be imported from the mobiscroll bundle.

Default value: undefined

The MbscTimezonePlugin type has the following properties:

  • createDate: (s: any, year: string | number | Date | MbscTimezonedDate, month: number, date: number, h: number, min: number, sec: number, ms: number) => MbscTimezonedDate -
  • parse: (date: string | number, s: any) => MbscTimezonedDate -

view​

MbscEventcalendarView

Configures the Eventcalendar view. Possible views:

calendar: Configures the calendar view. Properties:

  • type: 'week' | 'month' | 'year' (default 'month') - Sets the calendar type.
  • size: number (default 1) - Specifies the number of displayed weeks or months.
  • count: boolean (default false) - If true, it will display the number of events on the days with events.
  • eventDisplay: 'fill' | 'exact' (default 'fill') - Specifies how events are displayed.
    • If set to 'exact', events are displayed according to their start and end times.
    • If set to 'fill', events cover the entire day.
  • outerDays: boolean (default false) - Show or hide days from previous and next months. Does not apply to week view.
  • labels: boolean | number | 'all' (default true) - Enable displaying events as labels on calendar days.
    • If set to true, events will be displayed in the available space. If there are more events for a day, than the available space, a label with "more" text will be displayed, which opens a popover showing all the events for the given day. To fit more events on a day, set the calendar height to an appropriate value, using the height option.
    • If set to 'all', all the events will be displayed in the calendar cell and the row height will auto-expand based on the displayed events. The view will became scrollable if the rows overflow the available height.
    • Specify a number to set how many events will be displayed before the "more" button in a calendar cell. The row height will auto expand until the labels count reaches the given number and after that the "x more" button will be displayed. In the case when only one event should go in the "more" popup, that event will be displayed in the place of the "x more" button.
  • popover: boolean (default undefined) - Enable popover on days containing events. If not explicitly defined, the popover will not show up if an agenda view is also displayed. If event labels are displayed, the popover will only show up for days where the labels do not fit on the calendar, and a "more" label is present.
  • popoverClass: string (default undefined) - A custom CSS class added to the popover element. Can be used to customize the styling of the popover.
  • scroll: 'horizontal' | 'vertical' (default 'horizontal') - Specifies the direction of the calendar scroll.
  • weekNumbers: boolean (default false) - Show or hide week numbers.

agenda: Configures the agenda view. Properties:

  • type: 'day' | 'week' | 'month' | 'year' (default 'month') - Sets the agenda type. 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 displayed years, months, weeks or days.

  • scrollable: boolean (default true) - Setting this to true makes the agenda independently scrollable.

    info

    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 agenda needs a minimum 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 agenda will not be scrollable.

  • showEmptyDays: boolean (default false) - When set to true, it will display day headers for every day in the list, even for those without events.

scheduler: Configures the scheduler view. Properties:

  • type: 'day' | 'week' | 'month' (default 'week') - Sets the scheduler type.

  • size: number (default: 1)- Specifies the number of displayed months, weeks or days.

  • allDay: boolean (default true) - Show or hide the all day events.

  • currentTimeIndicator: boolean (default true) - Show or hide the current time indicator.

  • days: boolean (default true) - Show or hide week days above the scheduler grid.

  • startDay: number (default 0) - Specifies the first visible weekday of the view. Sunday is 0, Monday is 1, etc. Days outside of the startDay and endDay range will not be visible. Should not be mistaken for the firstDay option, which sets the first day of the week, and, if not set, is defined by the localization.

  • endDay: number (default 6) - Specifies the last visible weekday of the view. Sunday is 0, Monday is 1, etc.

  • startTime: string (default '00:00') - Set the start time of scheduler column. Hours, minutes and an optional negative day offset can be specified in the same string.

    • Standard format: 'HH:MM' (e.g., '09:30').
    • Offset format (initiates the view N days prior): 'HH:MM-N' (e.g., '20:00-1').

  • endTime: string (default '24:00') - Set the end time of scheduler column. Hours, minutes and an optional positive day offset can be specified in the same string.

    • Standard format: 'HH:MM' (e.g., '18:30').
    • Offset format (extends the view N days after): 'HH:MM+N' (e.g., '08:00+1').

  • hideEmptyColumns: boolean (default false) - Hide the empty columns in the scheduler view. If set to true, the scheduler will not display columns without events.

  • hideInvalidColumns: boolean (default false) - Hide the fully invalid columns in the scheduler view. If set to true, the scheduler will not display fully invalid columns.

  • maxEventStack: 'all' | 'auto' | number - Limit the number of displayed events. When the number of overlapping events reaches the specified value, a "more" button will be displayed which opens a popover showing the rest of the events.

    • If it is a number, it specifies how many events will be displayed before the "more" button appears.
    • If set to 'all', all events will be displayed.
    • If set to 'auto', the component will decide how many events can be placed inside the column, based on the minEventWidth view option and the actual column width.

  • minEventWidth: number - Specifies the minimum event width. Will be used when maxEventStack: 'auto' is used.

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

  • timezones: Array<string | object> - Display times in multiple timezones on the time scale and time indicator. The timezones array can contain timezone strings or objects with timezone and label properties. Timezone strings must use the name from the IANA time zone database. If no label is provided, the time column label will be UTC +/- the timezone offset.

    timezones: ['Europe/Berlin','Europe/Bucharest']
    timezones: [
      { timezone: 'America/Chicago', label: 'CHI'},
      { timezone: 'America/New_York', label: 'NY'}
    ]

  • virtualScroll: boolean (default true) - Enable or disable virtual scroll.

timeline: Configures the timeline view. Properties:

  • type: 'day' | 'week' | 'month' | 'year' (default 'week') - Sets the timeline type.
  • size: number (default: 1)- Specifies the number of displayed years, months, weeks or days.
  • resolutionHorizontal: 'hour', 'day', 'week', 'month', 'quarter', 'year' (default 'hour') - Sets the horizontal resolution of the timeline. In case of hourly resolution, the columns can be split to minutes (1, 5, 15, 20, 30) or merge to multiple hours (2, 3, 4, 6, 8, 12) using the timeCellStep and timeLabelStep properties.
  • currentTimeIndicator: boolean - Show or hide the current time indicator. Defaults to true, when the horizontal resolution is less than a day.
  • hideEmptyRows: boolean (default false) - Hide the empty rows in the timeline view. If set to true, the timeline will not display rows without events.
    info

    Parent resources will always be displayed, even when empty.

  • hideInvalidRows: boolean (default false) - Hide the fully invalid rows in the timeline view. If set to true, the timeline will not display the fully invalid rows.
    info

    Parent resources will always be displayed, even when fully invalid.

  • startDay: number (default 0) - Specifies the first visible weekday of the view. Sunday is 0, Monday is 1, etc. Days outside of the startDay and endDay range will not be visible. Should not be mistaken for the firstDay option, which sets the first day of the week, and, if not set, is defined by the localization.
  • endDay: number (default 6) - Specifies the last visible weekday of the view. Sunday is 0, Monday is 1, etc.
  • maxEventStack: 'all' | number - Limit the number of displayed events. When the number of overlapping events reaches the specified value, a "more" button will be displayed which opens a popover showing the rest of the events.
    • If it is a number, it specifies how many events will be displayed before the "more" button appears.
    • If set to 'all', all events will be displayed.
  • startTime: string (default '00:00') - Set the start time of the timeline days. Hours, minutes and an optional negative day offset can be specified in the same string.
    • Standard format: 'HH:MM' (e.g., '09:30').
    • Offset format (initiates the view N days prior - supported only for single day view): 'HH:MM-N' (e.g., '20:00-1').
  • endTime: string (default '24:00') - Set the end time of the timeline days. Hours, minutes and an optional positive day offset can be specified in the same string.
    • Standard format: 'HH:MM' (e.g., '18:30').
    • Offset format (extends the view N days after - supported only for single day view): 'HH:MM+N' (e.g., '08:00+1').
  • 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.
  • eventDisplay: 'fill' | 'exact' (default 'exact') - Specifies how events are displayed.
    • If set to 'exact', events are displayed according to their start and end times.
    • If set to 'fill', events cover the entire cell.
  • eventHeight: 'variable' | 'equal' (default 'equal') - Specifies wether the height of the events is equal or variable.
    info

    Learn more about variable event heights.

  • rowHeight: 'variable' | 'equal' (default 'variable') - Controls the height of the timeline rows. By default rows will have variable height and will expand to accommodate the displayed events. If it is set to 'equal', the rows will have equal heights.
  • virtualScroll: boolean (default true) - Enable or disable virtual scroll.
  • weekNumbers: boolean (default false) - Show or hide week numbers.
view: {
  calendar: {
    type: 'week',
    size: 2
  },
  agenda: {
    type: 'week',
    size: 2
  }
}

width​

string | number

Sets the width of the component.

Default value: undefined

zoomLevel​

string | number

Specifies the current zoom level of the timeline view. The zoom levels can be listed using the zoomLevels property of the timeline inside the view option.

Default value: undefined

Events​

The Eventcalendar ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

onCellClick​

(args: MbscCellClickEvent, inst: EventcalendarBase) => void

Triggered when a cell is clicked on the calendar view, scheduler grid, or timeline grid.

Parameters:

  • args - 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<MbscCalendarEvent> - 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: 'calendar' | 'scheduler' | 'timeline' - The view where the cell was clicked.
    • target: HTMLElement - The DOM element of the clicked cell.

  • inst - The component instance.

onCellDoubleClick​

(args: MbscCellClickEvent, inst: EventcalendarBase) => void

Triggered when a cell is double-clicked on the calendar view, scheduler grid, or timeline grid.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the clicked cell.
    • domEvent: Event - The DOM event of the click.
    • events: Array<MbscCalendarEvent> - 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: 'calendar' | 'scheduler' | 'timeline' - The view where the cell was clicked.
    • target: HTMLElement - The DOM element of the clicked cell.

  • inst - The component instance.

onCellHoverIn​

(args: MbscCellHoverEvent, inst: EventcalendarBase) => void

Triggered when the mouse pointer hovers on a calendar day, scheduler cell, or timeline cell.

Parameters:

  • args - The event argument with the following properties:

    • colors: Array<MbscCalendarColor> - The colors for the hovered cell.
    • date: Date - The date of the hovered day.
    • events: Array<MbscCalendarEvent> - The events for the hovered cell.
    • invalids: Array<MbscCalendarInvalid> - The invalid dates for the hovered cell.
    • labels: Array<MbscCalendarLabel> - If the cell has labels, contains the label objects for the hovered cell.
    • marked: Array<MbscCalendarMarked> - If the cell is marked, contains the marked objects for the hovered cell.
    • selected: boolean - Specifies if the cell is currently selected or not (in case of calendar view).
    • target: HTMLElement - The DOM element of the cell.
    • resource: MbscResource - The resource object for the hovered cell.

  • inst - The component instance.

onCellHoverOut​

(args: MbscCellHoverEvent, inst: EventcalendarBase) => void

Triggered when the mouse pointer leaves a calendar day, scheduler cell, or timeline cell.

Parameters:

  • args - The event argument with the following properties:

    • colors: Array<MbscCalendarColor> - The colors for the hovered cell.
    • date: Date - The date of the hovered cell.
    • events: Array<MbscCalendarEvent> - The events for the hovered cell.
    • invalids: Array<MbscCalendarInvalid> - The invalid dates for the hovered cell.
    • labels: Array<MbscCalendarLabel> - If the cell has labels, contains the label objects for the hovered cell.
    • marked: Array<MbscCalendarMarked> - If the cell is marked, contains the marked objects for the hovered cell.
    • selected: boolean - Specifies if the cell is currently selected or not (in case of calendar view).
    • target: HTMLElement - The DOM element of the cell.
    • resource: MbscResource - The resource object for the hovered cell.

  • inst - The component instance.

onCellRightClick​

(args: MbscCellClickEvent, inst: EventcalendarBase) => void

Triggered when a cell is right-clicked on the calendar view, scheduler grid, or timeline grid.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the clicked cell.
    • domEvent: Event - The DOM event of the click.
    • events: Array<MbscCalendarEvent> - 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: 'calendar' | 'scheduler' | 'timeline' - The view where the cell was clicked.
    • target: HTMLElement - The DOM element of the clicked cell.

  • inst - The component instance.

onDestroy​

(args: any, inst: any) => void

Triggered when the component is destroyed.

Parameters:

  • args - The event argument object.

  • inst - The component instance.

onEventClick​

(args: MbscEventClickEvent, inst: EventcalendarBase) => void

Triggered when an event is clicked.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date on which the event was clicked. In case of the timeline view, this will be the first day of the event on the current view.
    • domEvent: Event - The DOM event of the click.
    • event: MbscCalendarEvent - The clicked calendar event.
    • resource: string | number - The id of the resource where the event was clicked, if resources are set.
    • resourceObj: MbscResource - The resource where the event was clicked, if resources are set.
    • slot: string | number - The id of the slot where the event was clicked, if slots are set.
    • slotObj: MbscSlot - The slot where the event was clicked, if slots are set.
    • source: 'agenda' | 'calendar' | 'scheduler' | 'timeline' | 'popover' - The view where the event was clicked.
    • target: HTMLElement - The DOM element of the event.

  • inst - The component instance.

onEventCreate​

(args: MbscEventCreateEvent, inst: EventcalendarBase) => void

Triggered when an event is about to create and it is not yet rendered on its final position. Event creation can be prevented by returning false from the handler function.

Parameters:

  • args - The event argument with the following properties:

    • action: 'click' | 'drag' | 'externalDrop' - The action which created the event.
    • domEvent: Event - The DOM event from the end of the gesture (mouseup or touchend).
    • event: MbscCalendarEvent - The newly created event.
    • originEvent: MbscCalendarEvent - The occurrence of the event which was dragged. Will be set only if the event was created by dragging a recurring event occurrence.
    • resourceObj: MbscResource - The resource where the event is being created, if resources are set.
    • slotObj: MbscSlot - The slot where the event is being created, if slots are set.
    • source: 'calendar' | 'timeline' | 'scheduler' - The view where the event is being created.

  • inst - The component instance.

onEventCreateFailed​

(args: MbscEventCreateFailedEvent, inst: EventcalendarBase) => void

Triggered when an event creation failed due to overlapping an invalid range or another event.

Parameters:

  • args - The event argument with the following properties:

    • action: 'click' | 'drag' | 'externalDrop' - The action which created the event.
    • event: MbscCalendarEvent - The newly created event.
    • invalid: object - The invalid object which the event overlapped.
    • overlap: MbscCalendarEvent - The overlapped event.
    • originEvent: MbscCalendarEvent - The occurrence of the event which was dragged. Will be set only if the event was created by dragging a recurring event occurrence.
    • source: 'calendar' | 'timeline' | 'scheduler' - The view where the event was created.

  • inst - The component instance.

onEventCreated​

(args: MbscEventCreatedEvent, inst: EventcalendarBase) => void

Triggered when an event is created and it is rendered in its position.

Parameters:

  • args - The event argument with the following properties:

    • action: 'click' | 'drag' | 'externalDrop' - The action which created the event.
    • event: MbscCalendarEvent - The newly created event.
    • source: 'calendar' | 'timeline' | 'scheduler' - The view where the event was created.
    • target: HTMLElement - The DOM element of the created event.
    • resourceObj: MbscResource - The resource where the event is being created, if resources are set.
    • slotObj: MbscSlot - The slot where the event is being created, if slots are set.

  • inst - The component instance.

onEventDelete​

(args: MbscEventDeleteEvent, inst: EventcalendarBase) => void

Triggered when an event is about to be deleted and it is not yet removed from the view. Event deletion can be performed with delete and backspace button on an active event. Deletion can be prevented by returning false from the handler function.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event from of the keydown action.
    • event: MbscCalendarEvent - The event being deleted.
    • events: Array<MbscCalendarEvent> - The events being deleted in case of multiple event selection.
    • source: 'agenda' | 'calendar' | 'timeline' | 'scheduler' - The view where the event is being deleted.

  • inst - The component instance.

onEventDeleted​

(args: MbscEventDeletedEvent, inst: EventcalendarBase) => void

Triggered when an event is deleted and it is removed from the view.

Parameters:

  • args - The event argument with the following properties:

    • event: MbscCalendarEvent - The deleted event.
    • events: Array<MbscCalendarEvent> - The deleted events in case of multiple event selection.
    • source: 'agenda' | 'calendar' | 'timeline' | 'scheduler' - The view where the event was deleted.

  • inst - The component instance.

onEventDoubleClick​

(args: MbscEventClickEvent, inst: EventcalendarBase) => void

Triggered when an event is double-clicked.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date on which the event was clicked. In case of the timeline view, this will be the first day of the event on the current view.
    • domEvent: Event - The DOM event of the click.
    • event: MbscCalendarEvent - The clicked calendar event.
    • resource: string | number - The id of the resource where the event was clicked, if resources are set.
    • resourceObj: MbscResource - The resource where the event was clicked, if resources are set.
    • slot: string | number - The id of the slot where the event was clicker, if slots are set.
    • slotObj: MbscResource - The resource where the event was clicker, if slots are set.
    • source: 'agenda' | 'calendar' | 'scheduler' | 'timeline' | 'popover' - The view where the event was clicked.
    • target: HTMLElement - The DOM element of the event.

  • inst - The component instance.

onEventDragEnd​

(args: MbscEventDragEvent, inst: EventcalendarBase) => void

Triggered when an event drag has ended.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event of the drag.
    • event: MbscCalendarEvent - The dragged calendar event.
    • resource: string | number - The id of the resource where the event was dragged, if resources are set.
    • resourceObj: MbscResource - The resource where the event was dragged, if resources are set.
    • slot: string | number - The id of the slot where the event was dragged, if slots are set.
    • slotObj: MbscSlot - The slot where the event was dragged, if slots are set.
    • source: 'calendar' | 'scheduler' | 'timeline' - The view where the event was dragged.

  • inst - The component instance.

onEventDragEnter​

(args: MbscEventDragEvent) => void

Triggered when an event is dragged into the calendar/timeline/scheduler view.

Parameters:

  • args - The event argument with the following properties:
    • domEvent: Event - The DOM event of the drag.
    • event: MbscCalendarEvent - The dragged calendar event.
    • source: 'calendar' | 'scheduler' | 'timeline' - The view where the event is dragged.

onEventDragLeave​

(args: MbscEventDragEvent) => void

Triggered when an event is dragged out form the calendar/timeline/scheduler view.

Parameters:

  • args - The event argument with the following properties:
    • domEvent: Event - The DOM event of the drag.
    • event: MbscCalendarEvent - The dragged calendar event.
    • source: 'calendar' | 'scheduler' | 'timeline' - The view where the event is dragged.

onEventDragStart​

(args: MbscEventDragEvent, inst: EventcalendarBase) => void

Triggered when an event drag has started.

Parameters:

  • args - The event argument with the following properties:

    • action: 'create' | 'resize' | 'move' - The user action which triggered the event.
    • domEvent: Event - The DOM event of the drag.
    • event: MbscCalendarEvent - The dragged calendar event.
    • resource: string | number - The id of the resource where the event is dragged, if resources are set.
    • resourceObj: MbscResource - The resource where the event is dragged, if resources are set.
    • slot: string | number - The id of the slot where the event is dragged, if slots are set.
    • slotObj: MbscSlot - The slot where the event is dragged, if slots are set.
    • source: 'calendar' | 'scheduler' | 'timeline' - The view where the event is dragged.

  • inst - The component instance.

onEventHoverIn​

(args: MbscEventClickEvent, inst: EventcalendarBase) => void

Triggered when the mouse pointer hovers an event on the calendar.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date on which the event is hovered. In case of the timeline view, this will be the first day of the event on the current view.
    • domEvent: Event - The DOM event of the hover.
    • event: MbscCalendarEvent - The hovered calendar event.
    • resource: string | number - The id of the resource where the event is hovered, if resources are set.
    • resourceObj: MbscResource - The resource where the event is hovered, if resources are set.
    • slot: string | number - The id of the slot where the event is hovered, if slots are set.
    • slotObj: MbscSlot - The slot where the event is hovered, if slots are set.
    • source: 'agenda' | 'calendar' | 'scheduler' | 'timeline' | 'popover' - The view where the event is hovered.
    • target: HTMLElement - The DOM element of the event.

  • inst - The component instance.

onEventHoverOut​

(args: MbscEventClickEvent, inst: EventcalendarBase) => void

Triggered when the mouse pointer leaves an event on the calendar.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date on which the event was hovered. In case of the timeline view, this will be the first day of the event on the current view.
    • domEvent: Event - The DOM event of the hover.
    • event: MbscCalendarEvent - The hovered calendar event.
    • resource: string | number - The id of the resource where the event was hovered, if resources are set.
    • resourceObj: MbscResource - The resource where the event was hovered, if resources are set.
    • slot: string | number - The id of the slot where the event was hovered, if slots are set.
    • slotObj: MbscSlot - The slot where the event was hovered, if slots are set.
    • source: 'agenda' | 'calendar' | 'scheduler' | 'timeline' | 'popover' - The view where the event was hovered.
    • target: HTMLElement - The DOM element of the event.

  • inst - The component instance.

onEventRightClick​

(args: MbscEventClickEvent, inst: EventcalendarBase) => void

Triggered when an event is right-clicked.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date on which the event was clicked. In case of the timeline view, this will be the first day of the event on the current view.
    • domEvent: Event - The DOM event of the click.
    • event: MbscCalendarEvent - The clicked calendar event.
    • resource: string | number - The id of the resource where the event was clicked, if resources are set.
    • resourceObj: MbscResource - The resource where the event was clicked, if resources are set.
    • slot: string | number - The id of the slot where the event was clicked, if slots are set.
    • slotObj: MbscSlot - The slot where the event was clicked, if slots are set.
    • source: 'agenda' | 'calendar' | 'scheduler' | 'timeline' | 'popover' - The view where the event was clicked.
    • target: HTMLElement - The DOM element of the event.

  • inst - The component instance.

onEventUpdate​

(args: MbscEventUpdateEvent, inst: EventcalendarBase) => void

Triggered when an event is about to update. Update can be prevented by returning false from the handler function.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event from the end of the gesture (mouseup or touchend).
    • event: MbscCalendarEvent - The updated event.
    • events: Array<MbscCalendarEvent> - The updated events. It is set on recurring event delete, when multiple event selection is enabled.
    • newEvent: MbscCalendarEvent - The newly created event. Will be set only if the dragged event was a recurring event occurrence.
    • oldEvent: MbscCalendarEvent - The original event before the update.
    • oldEvents: Array<MbscCalendarEvent> - The original events before the update. It is set on recurring event delete, when multiple event selection is enabled.
    • oldEventOccurrence: MbscCalendarEvent - The occurrence of the event which was dragged. Will be set only if the dragged event was a recurring event occurrence.
    • oldResource: number | string - The id of the resource from which the event was dragged.
    • oldResourceObj: MbscResource - The resource from which the event was dragged.
    • oldSlot: number | string - The id of the slot from which the event was dragged.
    • oldSlotObj: MbscSlot - The slot from which the event was dragged.
    • resource: number | string - The id of the resource where the event was dropped.
    • resourceObj: MbscResource - The resource where the event was dropped.
    • slot: number | string - The id of the slot where the event was dropped.
    • slotObj: MbscSlot - The slot where the event was dropped.
    • source: 'calendar' | 'timeline' | 'scheduler' - The view where the event is being updated.

  • inst - The component instance.

onEventUpdateFailed​

(args: MbscEventUpdateFailedEvent, inst: EventcalendarBase) => void

Triggered when an event update failed due to overlapping an invalid range or another event.

Parameters:

  • args - The event argument with the following properties:

    • event: MbscCalendarEvent - The updated event.
    • invalid: object - The invalid object which the event overlapped.
    • overlap: MbscCalendarEvent - The overlapped event.
    • newEvent: MbscCalendarEvent - The newly created event. Will be set only if the dragged event was a recurring event occurrence.
    • oldEvent: MbscCalendarEvent - The original event before the update.
    • oldEventOccurrence: MbscCalendarEvent - The occurrence of the event which was dragged. Will be set only if the dragged event was a recurring event occurrence.
    • source: 'calendar' | 'timeline' | 'scheduler' - The view where the event was updated.

  • inst - The component instance.

onEventUpdated​

(args: MbscEventUpdatedEvent, inst: EventcalendarBase) => void

Triggered when an event is updated and is rendered in its new position. This is where you update the event in your database or persistent storage.

Parameters:

  • args - The event argument with the following properties:

    • event: MbscCalendarEvent - The updated event.
    • events: Array<MbscCalendarEvent> - The updated events. It is set on recurring event delete, when multiple event selection is enabled.
    • oldEvent: MbscCalendarEvent - The original event before the update.
    • oldEvents: Array<MbscCalendarEvent> - The original events before the update. It is set on recurring event delete, when multiple event selection is enabled.
    • resourceObj: MbscResource - The resource where the event is updated, if resources are set.
    • slotObj: MbscSlot - The slot where the event is updated, if slots are set.
    • source: 'calendar' | 'timeline' | 'scheduler' - The view where the event was updated.
    • target: HTMLElement - The DOM element of the updated event.

  • inst - The component instance.

onInit​

(args: any, inst: any) => void

Triggered when the component is initialized.

Parameters:

  • args - The event argument object.

  • inst - The component instance.

onLabelClick​

(args: MbscLabelClickEvent, inst: EventcalendarBase) => void

Triggered when a label is clicked on the calendar.

Parameters:

  • args - The event argument with 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: MbscCalendarLabel - The original object of the label which was clicked, undefined in case of the "more" label.
    • labels: Array<MbscCalendarLabel> - An array containing each label object for the given day.
    • target: HTMLElement - The DOM element of the label.

  • inst - The component instance.

onPageChange​

(args: MbscPageChangeEvent, inst: EventcalendarBase) => void

Triggered when the calendar page is changed (with buttons or swipe).

Parameters:

  • args - The event argument with the following properties:

    • firstDay: Date - The first day of the displayed page.
    • lastDay: Date - The last day of the displayed page, as an exclusive end date, pointing to 00:00 of the next day.
    • month: Date - The first day of the visible month in case of month view.

  • inst - The component instance.

onPageLoaded​

(args: MbscPageLoadedEvent, inst: EventcalendarBase) => void

Triggered when the calendar page is changed (with buttons or swipe) and the view finished rendering.

Parameters:

  • args - The event argument with the following properties:

    • firstDay: Date - The first day of the displayed page.
    • lastDay: Date - The last day of the displayed page, as an exclusive end date, pointing to 00:00 of the next day.
    • month: Date - The first day of the visible month in case of month view.

  • inst - The component instance.

onPageLoading​

(args: MbscPageLoadingEvent, inst: EventcalendarBase) => void

Triggered before the markup of a calendar page is starting to render.

Parameters:

  • args - The event argument with the following properties:

    • firstDay: Date - The first day of the displayed page.
    • lastDay: Date - The last day of the displayed page, as an exclusive end date, pointing to 00:00 of the next day.
    • month: Date - The first day of the visible month in case of month view.

  • inst - The component instance.

onResourceClick​

(args: MbscResourceClickEvent, inst: EventcalendarBase) => void

Triggered when a resource cell is clicked on the scheduler or timeline.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the day on which the resource was clicked, when resources are grouped by day.
    • domEvent: Event - The DOM event of the click.
    • resource: MbscResource - The resource associated with the clicked cell.
    • source: 'scheduler' | 'timeline' - The view where the cell was clicked.
    • target: HTMLElement - The DOM element of the clicked cell.

  • inst - The component instance.

onResourceCollapse​

(args: MbscResourceCollapseEvent, inst: EventcalendarBase) => void

Triggered when a parent resource is collapsed on the timeline.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event of the click.
    • resource: string | number - The id of the collapsed resource.
    • resourceObj: MbscResource - The collapsed resource.

  • inst - The component instance.

onResourceCreate​

(args: MbscResourceCreateEvent, inst: EventcalendarBase) => void

Triggered when an resource is about to create and it is not yet rendered on its final position. Resource creation can be prevented by returning false from the handler function.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event from the end of the gesture (mouseup or touchend).
    • index: number - The position of the resource within its siblings.
    • parent: MbscResource - The parent resource.
    • resource: MbscResource - The newly created resource.

  • inst - The component instance.

onResourceCreated​

(args: MbscResourceCreatedEvent, inst: EventcalendarBase) => void

Triggered when a resource is created and it is rendered in its position.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event from the end of the gesture (mouseup or touchend).
    • index: number - The position of the resource within its siblings.
    • parent: MbscResource - The parent resource.
    • resource: MbscResource - The newly created resource.

  • inst - The component instance.

onResourceDelete​

(args: MbscResourceDeleteEvent, inst: EventcalendarBase) => void

Triggered when an resource is about to be deleted and it is not yet removed from the view. Resource deletion can be prevented by returning false from the handler function.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event from the end of the gesture (mouseup or touchend).
    • index: number - The former position of the resource within its siblings.
    • parent: MbscResource - The parent resource.
    • resource: MbscResource - The resource being deleted.

  • inst - The component instance.

onResourceDeleted​

(args: MbscResourceDeletedEvent, inst: EventcalendarBase) => void

Triggered when a resource is deleted and it is removed from the view.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event from the end of the gesture (mouseup or touchend).
    • index: number - The former position of the resource within its siblings.
    • parent: MbscResource - The parent resource.
    • resource: MbscResource - The deleted resource.

  • inst - The component instance.

onResourceDoubleClick​

(args: MbscResourceClickEvent, inst: EventcalendarBase) => void

Triggered when a resource cell is double-clicked on the scheduler or timeline.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the day on which the resource was clicked, when resources are grouped by day.
    • domEvent: Event - The DOM event of the click.
    • resource: MbscResource - The resource associated with the clicked cell.
    • source: 'scheduler' | 'timeline' - The view where the cell was clicked.
    • target: HTMLElement - The DOM element of the clicked cell.

  • inst - The component instance.

onResourceDragEnter​

(args: MbscResourceDragEvent, inst: EventcalendarBase) => void

Triggered when a resource is dragged into the timeline view.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event of the drag.
    • resource: MbscResource - The dragged resource.

  • inst - The component instance.

onResourceDragLeave​

(args: MbscResourceDragEvent, inst: EventcalendarBase) => void

Triggered when a resource is dragged out from the timeline view.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event of the drag.
    • resource: MbscResource - The dragged resource.

  • inst - The component instance.

onResourceExpand​

(args: MbscResourceExpandEvent, inst: EventcalendarBase) => void

Triggered when a parent resource is expanded on the timeline.

Parameters:

  • args - The event argument with the following properties:

    • domEvent: Event - The DOM event of the click.
    • resource: string | number - The id of the expanded resource.
    • resourceObj: MbscResource - The expanded resource.

  • inst - The component instance.

onResourceHoverIn​

(args: MbscResourceHoverEvent, inst: EventcalendarBase) => void

Triggered when the mouse pointer hovers a resource cell on the timeline or scheduler view.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the hovered resource cell in case of group by date.
    • resource: MbscResource - The hovered resource.
    • source: 'scheduler' | 'timeline' - The view where the resource cell was hovered.
    • target: HTMLElement - The DOM element of the resource cell.

  • inst - The component instance.

onResourceHoverOut​

(args: MbscResourceHoverEvent, inst: EventcalendarBase) => void

Triggered when the mouse pointer leaves a resource cell on the timeline or scheduler view.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the hovered resource cell in case of group by date.
    • resource: MbscResource - The hovered resource.
    • source: 'scheduler' | 'timeline' - The view where the resource cell was hovered.
    • target: HTMLElement - The DOM element of the resource cell.

  • inst - The component instance.

onResourceOrderUpdate​

(args: MbscResourceOrderEvent, inst: EventcalendarBase) => void

Triggered after a resource is dragged and dropped into a new location. Resource reorder can be prevented by returning false from the handler function. It applies for timeline view if resourceReorder in view option is enabled.

Parameters:

  • args - The event argument with the following properties:

    • index: Resource - The new position of the resource within its siblings.
    • oldIndex: Resource - The old position of the resource within its siblings.
    • oldParent: Resource - The old parent resource.
    • parent: Resource - The parent resource.
    • resource: Resource - The updated resource.
    • resources: Array<Resource> - The entire resources array with the new order.

  • inst - The component instance.

onResourceRightClick​

(args: MbscResourceClickEvent, inst: EventcalendarBase) => void

Triggered when a resource cell is right-clicked on the scheduler or timeline.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the day on which the resource was clicked, when resources are grouped by day.
    • domEvent: Event - The DOM event of the click.
    • resource: MbscResource - The resource associated with the clicked cell.
    • source: 'scheduler' | 'timeline' - The view where the cell was clicked.
    • target: HTMLElement - The DOM element of the clicked cell.

  • inst - The component instance.

onSelectedDateChange​

(args: MbscSelectedDateChangeEvent, inst: EventcalendarBase) => void

Triggered when the selected date is changed, e.g. by clicking on a day on a calendar view, or by using the navigation arrows. You can use this event in conjunction with the selectedDate option to customize where the Eventcalendar should navigate.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The newly selected date.

  • inst - The component instance.

onSelectedEventsChange​

(args: MbscSelectedEventsChangeEvent, inst: EventcalendarBase) => void

Triggered when an event is selected or deselected on the UI, when multiple event selection is enabled.

You can also select events programmatically using the selectedEvents option.

Parameters:

  • args - The event argument with the following properties:

    • events: Array<MbscCalendarEvent> - The selected events.

  • inst - The component instance.

onVirtualLoading​

(args: MbscVirtualLoadEvent, inst: EventcalendarBase) => void

Triggered when a new virtual page is loaded. You can use this to load events and resources on demand while scrolling the timeline and scheduler grid.

Parameters:

  • args - The event argument with the following properties:

    • viewStart: Date - The date where the virtual view starts.
    • viewEnd: Date - The date where the virtual view end.
    • resourceStart: number|string - The id of the resource where the virtual view starts.
    • resourceEnd: number|string - The id of the resource where the virtual view ends.
    • timeStart: number - The time in milliseconds where the virtual view starts on the scheduler view.
    • timeEnd: number - The time in milliseconds where the virtual view ends on the scheduler view.
    • oldResourceStart: number|string - The id of the resource where the previous virtual view started.
    • oldResourceEnd: number|string - The id of the resource where the previous virtual view ended.
    • oldViewStart: Date - The date where the previous virtual view started.
    • oldViewEnd: Date- The date where the previous virtual view ended.
    • oldTimeStart: number - The time in milliseconds where the previous virtual view started on the scheduler view.
    • oldTimeEnd: number - The time in milliseconds where the previous virtual view ended on the scheduler view.

  • inst - The component instance.

Localization​

The Eventcalendar is fully localized. This covers date and time format, button copy, rtl and more.

allDayText​

string

Text for all day events.

Default value: 'All-day'

amText​

string

Text for AM.

Default value: 'am'

calendarSystem​

MbscCalendarSystem

Specifies the calendar system to be used. Supported calendars:

  • Gregorian - Gregorian calendar. This is the default calendar system.
  • Jalali - Persian calendar. The Farsi language needs to be included to the package.
  • Hijri - Hijri calendar. The Arabic language needs to be included to the package

Default value: undefined

dateFormat​

string

The format for parsed and displayed dates:

  • 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

Default value: 'MM/DD/YYYY'

dateFormatFull​

string

Human readable date format, used by screen readers to read out full dates. Characters have the same meaning as in the dateFormat option.

Default value: 'DDDD, MMMM D, YYYY'

dateFormatLong​

string

Long date format, used by the agenda view and timeline day headers. Characters have the same meaning as in the dateFormat option.

Default value: 'D DDD MMM YYYY'

dayNames​

Array<string>

The list of long day names, starting from Sunday.

Default value: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

dayNamesMin​

Array<string>

The list of minimal day names, starting from Sunday.

Default value: ['S', 'M', 'T', 'W', 'T', 'F', 'S']

dayNamesShort​

Array<string>

The list of abbreviated day names, starting from Sunday.

Default value: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

eventText​

string

Text for the event word.

Default value: 'event'

eventsText​

string

Text for the events word (plural).

Default value: 'events'

firstDay​

number

Set the first day of the week: Sunday is 0, Monday is 1, etc.

Default value: 0

locale​

MbscLocale

Sets the language of the component. The locale object contains all the translations for a given language. The built in language modules are listed below. If a language is not listed, it can be provided as a custom language module.

Supported values:

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

Default value: undefined

monthNames​

Array<string>

The list of full month names.

Default value: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

monthNamesShort​

Array<string>

The list of abbreviated month names.

Default value: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

moreEventsPluralText​

string

Text for the "more" label on the calendar, when there's not enough space to display all the labels for the day, and there are more than one extra labels. The &#123;count&#125; inside the string will be replaced with the number of extra labels. When not specified, the moreEventsText option will be used for both plural and singular form.

Default value: undefined

moreEventsText​

string

Text for the "more" label on the calendar, when there's not enough space to display all the labels for the day. The &#123;count&#125; inside the string will be replaced with the number of extra labels. Use the moreEventsPluralText as well, if the plural form is different.

Default value: '&#123;count&#125; more'

newEventText​

string

Title for the newly created event with the dragToCreate and the clickToCreate action.

Default value: 'New event'

nextPageText​

string

Text for the next button in the calendar header, used as accessibility label.

Default value: 'Next page'

noEventsText​

string

Text for empty event list.

Default value: 'No events'

pmText​

string

Text for PM.

Default value: 'pm'

prevPageText​

string

Text for the previous button in the calendar header, used as accessibility label.

Default value: 'Previous page'

quarterText​

string

Text for quarter numbers in the timeline header. The {count} inside the string will be replaced with the number of the current quarter.

Default value: 'Q &#123;count&#125;'

rtl​

boolean

Enables right-to-left display.

Default value: false

timeFormat​

string

The format for parsed and displayed times:

  • 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

Default value: 'hh:mm A'

todayText​

string

Text for the "Today" button.

Default value: 'Today'

weekText​

string

Text for week numbers in the timeline header. The {count} inside the string will be replaced with the number of the current week.

Default value: 'Week &#123;count&#125;'

Methods​

These methods are actions that can be performed on a component instance.

getEvents​

(start: MbscDateType, end: MbscDateType) => Array<MbscCalendarEvent>

Returns the events between two dates. If start and end are not specified, it defaults to the start and end days of the current view. If end is not specified, it defaults to start date + 1 day.

Parameters:

  • start - Start date of the specified interval.

  • end - End date of the specified interval.

getInvalids​

(start: MbscDateType, end: MbscDateType) => Array<MbscCalendarEvent>

Returns the invalids between two dates. If start and end are not specified, it defaults to the start and end days of the current view. If end is not specified, it defaults to start date + 1 day.

Parameters:

  • start - Start date of the specified interval.

  • end - End date of the specified interval.

getViewDate​

() => Date

Returns the view date which is representing the currently displayed date on the component.

navigateToEvent​

(event: MbscCalendarEvent) => void

Navigates to the specified event on the calendar.

Parameters:

  • event - The event object. The id, start and resource properties (in case if resources are used in timeline or scheduler views) must be present in the object.

Templates​

The display of the Eventcalendar can be customized with different templating functions.

agendaDayTemplate​

Customize the day cells of the agenda view.

The template will receive an object as data. 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.
  • events: Array - The list of events of the day.

Default value: undefined

agendaEmptyTemplate​

Template to customize the agenda empty state. Should contain the desired template to be used in the agenda when the events list is empty.

agendaEventContentTemplate​

Template to customize the event content that appears on the agenda. The Eventcalendar will take care of styling and you can focus on what you show inside of the event.

If you are looking to fully customize the event (e.g. add custom hover effects) you will need to use the agendaEventTemplate option.

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - The original event object. Any custom property on the event can be accessed through this property.
  • start: string - The formatted start time, if the event is not all day.
  • title: string - The title of the event.

Default value: undefined

agendaEventTemplate​

Template to customize the events that appear on the agenda.

If you are looking to customize only the content (e.g. add custom elements) and don't want to bother with the styling of the event, you can use the agendaEventContentTemplate option.

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - The original event object.
  • start: string - The formatted start time, if the event is not all day.
  • title: string - The title of the event.

Default value: undefined

agendaTemplate​

Template to customize agenda listing.

There is a scrolling functionality of the list: when clicking on a calendar date scrolls to the date on the list as well, and scrolling the list updates the selected date on the calendar. For this functionality to work, you need to use the mbsc-event-list-day directive on the elements of the days in your template with the day timestamp as parameter:

<mbsc-eventcalendar [agendaTemplate]="myTemplate">
  <ng-template #myTemplate let-data>
    <ul *ngFor="let day of data; trackBy: getDayKey" mbsc-event-list-day [timestamp]="day.timestamp">
      <li>{{day.date}}</li>
      <li *ngFor="let event of day.events; trackBy: getEventKey">
        {{event.title}}
      </li>
    </ul>
  </ng-template>
</mbsc-eventcalendar>

The template data is an array containing 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

bufferAfterTemplate​

Template reference to fully customize the buffer area that is displayed at the end of the scheduler and timeline events. The buffer can be defined with the help of the bufferAfter property of the event data.

The template will receive an event object as data. Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - 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 - The resource of the row or column where the event is being rendered.

Default value: undefined

bufferBeforeTemplate​

Template reference to fully customize the buffer area that is displayed at the start of the scheduler and timeline events. The buffer can be defined with the help of the bufferBefore property of the event data.

The template will receive an event object as data. Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - 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 - The resource of the row or column where the event is being rendered.

Default value: undefined

calendarDayContentTemplate​

Customize the day cells content of the event calendar. The Eventcalendar will take care of the styling and you can focus on what you show beside the day number.

If you are looking to fully customize the day (e.g. add custom hover effects) you will need to use the calendarDayTemplate option.

The template will receive an object as data. 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.

Default value: undefined

calendarDayTemplate​

Customize the day cells of the calendar view.

If you are looking to customize only the day cells content and don't want to bother with the styling of the event, in case of calendar and scheduler views you can use the calendarDayContentTemplate option.

The template will receive an object as data. 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.

Default value: undefined

calendarEventContentTemplate​

Template to customize the event contents, that appears on the calendar. The Eventcalendar will take care of styling and you can focus on what you show inside of the event.

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

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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.
  • original: MbscCalendarEvent - The original event object. Any custom property on the event can be accessed through this property.
  • start: string - The formatted start time, if the event is not all day.

Default value: undefined

calendarEventTemplate​

Customize the events that appear on the calendar view. 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 (e.g. add custom elements) and don't want to bother with the styling of the event, you can use the calendarEventContentTemplate option.

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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.
  • original: MbscCalendarEvent - The original event object. Any custom property on the event can be accessed through this property.
  • start: string - The formatted start time, if the event is not all day.

Default value: undefined

cellTemplate​

Customize the cells of the Eventcalendar in scheduler and timeline views.

The template will receive an object as context, which can be used to display custom content in the cells. Keep the cell template simple, as it will be called and rendered very frequently during scroll and view changes.

The object passed to the template contains the following properties:

  • colors: Array<MbscCalendarColor> - The list of colors for the current cell.
  • date: Date – The current cell's date.
  • events: Array<MbscCalendarEvent> List of events for the current cell.
  • invalids: Array<MbscCalendarInvalid> - The list of invalids for the current cell.
  • resource: MbscResource - The resource object of the current cell.
  • slot: MbscSlot - The slot object of the rendered cell.

Default value: undefined

dayFooterTemplate​

Template to customize the footer of each day for the timeline.

The following day specific details are available:

  • date: Date - The date of the day.
  • events: Array<MbscCalendarEvent> - The list of events for the day.

Default value: undefined

headerTemplate​

Template to customize the header of the event calendar. You can use custom markup or components as well as the built in header components of the calendar.

Default value: undefined

hourFooterTemplate​

Template to customize the footer of the hour columns on the timeline view.

The following properties are available:

  • date: Date - The date and time of the rendered hour.
  • events: Array<MbscCalendarEvent> - The list of events for the hour.
  • isActive: boolean - True for the current hour.

Default value: undefined

hourTemplate​

Template to customize the header of the hour columns on the timeline view.

The following properties are available:

  • date: Date - The date and time of the rendered hour.
  • events: Array<MbscCalendarEvent> - The list of events for the hour.
  • isActive: boolean - True for the current hour.

Default value: undefined

monthFooterTemplate​

Template to customize the footer of the month column on the timeline view.

The following properties are available:

  • date: Date - First day of the rendered month.
  • events: Array<MbscCalendarEvent> - The list of events for the month.
  • isActive: boolean - True for the current month.

Default value: undefined

monthTemplate​

Template to customize the header of the month column on the timeline view.

The following properties are available:

  • date: Date - First day of the rendered month.
  • events: Array<MbscCalendarEvent> - The list of events for the month.
  • isActive: boolean - True for the current month.

Default value: undefined

popoverEventContentTemplate​

Template to customize the event content that appears on the popover. The Eventcalendar will take care of styling and you can focus on what you show inside of the event.

If you are looking to fully customize the event (e.g. add custom hover effects) you will need to use the popoverEventTemplate option.

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - The original event object. Any custom property on the event can be accessed through this property.
  • start: string - The formatted start time, if the event is not all day.
  • title: string - The title of the event.

Default value: undefined

popoverEventTemplate​

Template to customize the events that appear on the popover.

If you are looking to customize only the content (e.g. add custom elements) and don't want to bother with the styling of the event, you can use the popoverEventContentTemplate option.

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - The original event object.
  • start: string - The formatted start time, if the event is not all day.
  • title: string - The title of the event.

Default value: undefined

quarterFooterTemplate​

Template to customize the footer of the quarter column on the timeline view.

The following properties are available:

  • date: Date - First day of the rendered quarter.
  • events: Array<MbscCalendarEvent> - The list of events for the quarter.
  • isActive: boolean - True for the current quarter.

Default value: undefined

quarterTemplate​

Template to customize the header of the quarter columns on the timeline view.

The following properties are available:

  • date: Date - First day of the rendered quarter.
  • events: Array<MbscCalendarEvent> - The list of events for the quarter.
  • isActive: boolean - True for the current quarter.

Default value: undefined

resourceEmptyTemplate​

Template to customize the content of the resource column in case of an empty resource array.

It will receive the following parameter:

  • day: Date - The date on which the resource is rendered in case of vertical day resolution.
<mbsc-eventcalendar [resourceEmptyTemplate]="myEmptyTemplate">
  <ng-template #myEmptyTemplate>
    <!-- content -->
  </ng-template>
</mbsc-eventcalendar>

Default value: undefined

resourceFooterTemplate​

Template to customize the cell content below the resource column on the timeline view.

Default value: undefined

resourceHeaderTemplate​

Template to customize the cell content above the resource column on the timeline view.

Default value: undefined

resourceTemplate​

Template to customize the resource template of the scheduler and timeline views.

The following properties are available:

  • resource: MbscResource - The rendered resource.
  • day: Date - The date on which the resource is rendered. Available when grouping by date in the scheduler view, or when vertical day resolution is used in the timeline view.
<mbsc-eventcalendar [resourceTemplate]="myTemplate">
  <ng-template #myTemplate let-resource>
    <div>{{resource.name}}</div>
    <p>{{resource.description}}</p>
    <img [src]="resource.img" />
  </ng-template>
</mbsc-eventcalendar>

Default value: undefined

schedulerDayContentTemplate​

Customize the day cells content of the event calendar. The Eventcalendar will take care of the styling and you can focus on what you show beside the day number.

If you are looking to fully customize the day (e.g. add custom hover effects) you will need to use the schedulerDayTemplate option.

The template will receive an object as data. 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.
  • events: Array - The list of events of the day.
  • resource: String, Number - The id of the resource in case of scheduler(week and month views) when the events are grouped by resources.

Default value: undefined

schedulerDayTemplate​

Customize the day cells of the scheduler view.

If you are looking to customize only the day cells content and don't want to bother with the styling of the event, in case of calendar and scheduler views you can use the schedulerDayContentTemplate option.

The template will receive an object as data. 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.
  • events: Array - The list of events of the day.
  • resource: String, Number - The id of the resource in case of scheduler(week and month views) when the events are grouped by resources.

Default value: undefined

schedulerEventContentTemplate​

Template to customize the event content that appears on the scheduler. The Eventcalendar will take care of styling and you can focus on what you show inside of the event.

If you are looking to fully customize the event (e.g. add custom hover effects) you will need to use the schedulerEventTemplate option. In that case you will only get the positioning done by the Eventcalendar and everything else is up to you.

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - 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 - The resource of the row or column where the event is being rendered.

Default value: undefined

schedulerEventTemplate​

Template to customize the events that appear on the scheduler. 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 (e.g. add custom elements) and don't want to bother with the styling of the event, you can use the schedulerEventContentTemplate option.

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - 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 - The resource of the row or column where the event is being rendered.

Default value: undefined

sidebarFooterTemplate​

Template to customize the empty cell content below the sidebar column. This template is only rendered for the timeline view, if the sidebarTemplate is present.

Default value: undefined

sidebarHeaderTemplate​

Template to customize the empty cell content above the sidebar column. This template is only rendered for the timeline view, if the sidebarTemplate is present.

Default value: undefined

sidebarTemplate​

Template to customize and add a sidebar on the right side of the timeline.

The template will receive the resource object as data. This data can be used to show resource specific things on the sidebar.

It will receive the following parameters:

  • resource: MbscResource - The rendered resource.
  • day: Date - The date on which the resource is rendered in case of vertical day resolution in the timeline view.

Default value: undefined

slotTemplate​

Template to customize the slot template of the timeline view.

It will receive an object as parameter that has the following properties:

  • date: Date - The specific date where the slot is rendered.
  • slot: MbscSlot - Data of the rendered slot.
<mbsc-eventcalendar [slotTemplate]="myTemplate">
  <ng-template #myTemplate let-slotdata>
    <div>{{slotdata.slot.name}}</div>
    <p>{{slotdata.slot.description}}</p>
    <img [src]="slotdata.slot.img" />
  </ng-template>
</mbsc-eventcalendar>

Default value: undefined

timelineDayTemplate​

Customize the day cells of the calendar view and the date header in case of scheduler and timeline views.

The template will receive an object as data. 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.
  • events: Array - The list of events of the day.
  • isActive: Boolean - This parameter will be true when rendering the current day/week/month/year

Default value: undefined

timelineEventContentTemplate​

Template to customize the event content that appears on the timeline. The Eventcalendar will take care of styling and you can focus on what you show inside of the event.

If you are looking to fully customize the event (e.g. add custom hover effects) you will need to use the timelineEventTemplate option. In that case you will only get the positioning done by the Eventcalendar and everything else is up to you.

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - 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 - The resource of the row or column where the event is being rendered.

Default value: undefined

timelineEventTemplate​

Template to customize the events that appear on the timeline. 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 (e.g. add custom elements) and don't want to bother with the styling of the event, you can use the timelineEventContentTemplate option.

Some of the event specific details are computed, but there is also a reference to the original event they come from. The following event specific properties are available:

  • 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: MbscCalendarEvent - 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 - The resource of the row or column where the event is being rendered.

Default value: undefined

weekFooterTemplate​

Template to customize the footer of the week column on the timeline view.

The following properties are available:

  • date: Date - First day of the rendered week.
  • events: Array<MbscCalendarEvent> - The list of events for the week.
  • isActive: boolean - True for the current week.
  • endDate: Date - The end date of the week.
  • startDate: Date - The start date of the week.
  • weekNr: number - The week number. Enumeration starts with the first week of the year.

Default value: undefined

weekTemplate​

Template to customize the header of the week column on the timeline view.

The following properties are available:

  • date: Date - First day of the rendered week.
  • events: Array<MbscCalendarEvent> - The list of events for the week.
  • isActive: boolean - True for the current week.
  • endDate: Date - The end date of the week.
  • startDate: Date - The start date of the week.
  • weekNr: number - The week number. Enumeration starts with the first week of the year.

Default value: undefined

yearFooterTemplate​

Template to customize the footer of the year column on the timeline view.

The following properties are available:

  • date: Date - First day of the rendered year.
  • events: Array<MbscCalendarEvent> - The list of events for the year.
  • isActive: boolean - True for the current year.

Default value: undefined

yearTemplate​

Template to customize the header of the year column on the timeline view.

The following properties are available:

  • date: Date - First day of the rendered year.
  • events: Array<MbscCalendarEvent> - The list of events for the year.
  • isActive: boolean - True for the current year.

Default value: undefined

Types​

MbscCalendarColor​

Interface

Properties:

  • allDay: boolean - Specifies whether the date you want to color is all day or not.
  • background: string - Background color of the cell. It can be any valid CSS color ('red', '#ff0000', 'rgb(255, 0, 0)', etc.).
  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • cssClass: string - Specifies a custom CSS class for the color. Useful when customization is needed for the background of cells and time ranges. Only applicable for the timeline and scheduler views.
  • date: string | object | Date - Specifies a single date for the color
  • end: string | object | Date - Specifies the end date/time of a date/time range for the color
  • highlight: string - Highlight color of the day, can be any valid CSS color ('red', '#ff0000', 'rgb(255, 0, 0)', etc.).
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • resource: string | number | Array<string | number> - In case of the timeline and scheduler view of the Eventcalendar, specifies the resource ids for the color. The color will be displayed only on the specified resource. If there is no resource defined, it will be applied to every resource.
  • slot: string | number - In case of the timeline view of the Eventcalendar, specifies the slot id for the color. The color will be displayed only on the specified slot. If there is no slot defined, it will be applied to every slot.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the color
  • textColor: string - A color applied on the text.
  • title: string - A title that will be displayed on the item.

MbscCalendarEvent​

Interface

Properties:

  • allDay: boolean - Specifies if the event is all day or not.
  • bufferAfter: number - Defines a buffer time in minutes that will be displayed after the end of the event.
  • bufferBefore: number - Defines a buffer time in minutes that will be displayed before the start of the event.
  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Background color of the event
  • cssClass: string - Specifies a custom CSS class that is applied to the event. Useful when customization is needed on the event level. For example: setting the width for specific events.
  • date: string | object | Date - Specifies a single date for the event
  • dragBetweenResources: boolean - Specifies whether the event is movable across resources.
  • dragBetweenSlots: boolean - Specifies whether the event is movable across across slots.
  • dragInTime: boolean - Specifies whether the event is movable in time.
  • editable: boolean - Specifies if an event is editable or not. If false, drag & drop and resize is not allowed.
  • end: string | object | Date - Specifies the end date/time of a date/time range for the event
  • id: string | number - A unique id for the event. If not specified, the event will get a generated id.
  • order: number - Specifies the order of the event in the array. Has precedence over the default ordering rules.
  • overlap: boolean - Specifies whether the event can be overlapped. Has precedence over the eventOverlap property of the resource and the eventOverlap option.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring events.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • resize: boolean - Specifies whether the event is resizable. Has precedence over the eventResize property of the resource and the dragToResize option.
  • resource: string | number | Array<string | number> - In case of the timeline and scheduler view of the Eventcalendar, specifies the resource ids for the event. The event will be displayed only on the specified resource. If there is no resource defined, it will be displayed on every resource.
  • slot: string | number - In case of the timeline view of the Eventcalendar, specifies the slot id for the event. The event will be displayed only on the specified slot. If there is no slot defined, it will be displayed on every slot.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the event
  • textColor: string - A color applied on the text.
  • timezone: string - Timezone of the event
  • title: string - The title of the event.
  • tooltip: string - The tooltip text of the event.

MbscCalendarInvalid​

Interface

Properties:

  • allDay: boolean - If true the specified invalid will cover the whole day.
  • end: MbscDateType - Specifies the end of the invalid range.
  • recurring: string | MbscRecurrenceRule - Recurrence rule for recurring invalid ranges.
  • recurringException: MbscDateType | Array<MbscDateType> - Specifies recurring exceptions. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Specifies a recurrence exception rule. Useful when recurring dates need to be skipped from the rule.
  • start: MbscDateType - Specifies the start of the invalid range.

MbscCalendarLabel​

Interface

Properties:

  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Background color of the label.
  • cssClass: string - Specifies a custom CSS class that is applied to the label.
  • date: string | object | Date - Specifies a single date for the label
  • end: string | object | Date - Specifies the end date/time of a date/time range for the label
  • order: number - Specifies the order of the label in the array. Has precedence over the default ordering rules.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the label
  • textColor: string - A color applied on the text.
  • title: string - The title of the label.
  • tooltip: string - Tooltip for the label

MbscCalendarMarked​

Interface

Properties:

  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Color of the mark.
  • date: string | object | Date - Specifies a single date when this is applicable
  • end: string | object | Date - Specifies the end date/time of a date/time range when this is applicable
  • markCssClass: string - CSS class for the mark.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • start: string | object | Date - Specifies the start date/time of a date/time range when this is applicable
  • textColor: string - A color applied on the text.
  • title: string - A title that will be displayed on the item.

MbscDateType​

string | Date | object

MbscEventConnection​

Interface

Properties:

  • arrow: boolean | "from" | "to" | "bidirectional" - Specifies where to display arrows If true, the arrow will display only at the end side of the connection.
  • color: string - Specifies the color of the connection.
  • cssClass: string - Custom CSS class for the connection line for further customization.
  • from: string | number - The id of the event where the connection will begin
  • to: string | number - The id of the event where the connection will end.
  • type: "fs" | "sf" | "ss" | "ff" - The type of the connection. Possible values: 'fs' - finish-to-start, 'sf' - start-to-finish, 'ss' - start-to-start, 'ff' - finish-to-finish.

MbscEventcalendarView​

Interface

Properties:

  • agenda: {scrollable?: boolean, showEmptyDays?: boolean, size?: number, type?: "day" | "month" | "year" | "week"} - Configures the agenda view.
  • calendar: {count?: boolean, eventDisplay?: "fill" | "exact", labels?: number | boolean | "all", outerDays?: boolean, popover?: boolean, popoverClass?: string, scroll?: "horizontal" | "vertical", size?: number, type?: "month" | "year" | "week", weekNumbers?: boolean} - Configures the calendar view.
  • schedule: {allDay?: boolean, currentTimeIndicator?: boolean, days?: boolean, endDay?: number, endTime?: string, hideEmptyColumns?: boolean, hideInvalidColumns?: boolean, maxEventStack?: number | "all" | "auto", minEventWidth?: number, size?: number, startDay?: number, startTime?: string, timeCellStep?: number, timeLabelStep?: number, timezones?: Array<string | MbscSchedulerTimezone>, type?: "day" | "month" | "week", virtualScroll?: boolean}
  • scheduler: {allDay?: boolean, currentTimeIndicator?: boolean, days?: boolean, endDay?: number, endTime?: string, hideEmptyColumns?: boolean, hideInvalidColumns?: boolean, maxEventStack?: number | "all" | "auto", minEventWidth?: number, size?: number, startDay?: number, startTime?: string, timeCellStep?: number, timeLabelStep?: number, timezones?: Array<string | MbscSchedulerTimezone>, type?: "day" | "month" | "week", virtualScroll?: boolean} - Configures the scheduler view.
  • timeline: {columnWidth?: MbscTimelineColumnWidth, currentTimeIndicator?: boolean, endDay?: number, endTime?: string, eventDisplay?: "fill" | "exact", eventHeight?: "variable" | "equal", eventList?: boolean, hideEmptyRows?: boolean, hideInvalidRows?: boolean, maxEventStack?: number | "all", resolutionHorizontal?: "day" | "hour" | "month" | "year" | "week" | "quarter", resolutionVertical?: "day", resourceReorder?: boolean, rowHeight?: "variable" | "equal", size?: number, startDay?: number, startTime?: string, timeCellStep?: number, timeLabelStep?: number, type?: "day" | "month" | "year" | "week", virtualScroll?: boolean, weekNumbers?: boolean, zoomLevels?: { [key:string]: MbscTimelineZoomLevel }} - Configures the timeline view.

MbscLocale​

Interface

Properties:

  • allDayText: string
  • amText: string
  • calendarSystem: MbscCalendarSystem
  • cancelText: string
  • clearText: string
  • closeText: string
  • dateFormat: string
  • dateFormatFull: string
  • dateFormatLong: string
  • dateText: string
  • dateWheelFormat: string
  • dayNames: Array<string>
  • dayNamesMin: Array<string>
  • dayNamesShort: Array<string>
  • daySuffix: string
  • dayText: string
  • eventText: string
  • eventsText: string
  • filterEmptyText: string
  • filterPlaceholderText: string
  • firstDay: number
  • fromText: string
  • hourText: string
  • minuteText: string
  • monthNames: Array<string>
  • monthNamesShort: Array<string>
  • monthSuffix: string
  • monthText: string
  • moreEventsPluralText: string
  • moreEventsText: string
  • nextMonthText: string
  • nextYearText: string
  • noEventsText: string
  • nowText: string
  • pmText: string
  • prevMonthText: string
  • prevYearText: string
  • rangeEndHelp: string
  • rangeEndLabel: string
  • rangeStartHelp: string
  • rangeStartLabel: string
  • rtl: boolean
  • secondText: string
  • selectedPluralText: string
  • selectedText: string
  • setText: string
  • timeFormat: string
  • timeText: string
  • timeWheels: string
  • toText: string
  • todayText: string
  • weekText: string
  • yearSuffix: string
  • yearText: string

MbscRecurrenceRule​

Interface

Properties:

  • count: number
  • day: number | Array<number>
  • from: MbscDateType
  • interval: number
  • month: number | Array<number>
  • pos: number
  • repeat: "daily" | "weekly" | "monthly" | "yearly"
  • until: MbscDateType
  • weekDays: string
  • weekStart: string

MbscResource​

Interface

Properties:

  • background: string - Specifies the background color of the resource row or column.
  • children: Array<MbscResource> - Child resources.
  • collapsed: boolean - Specifies the displayed state of the child resource group.
  • color: string - Specifies the default event color of the resource. If an event has an explicit color set, the resource color will be overridden. If the color is not set, the events of the resource will inherit the default calendar color.
  • cssClass: string - Specifies a css class for the resource row or column.
  • eventCreation: boolean - Disables event creation on specific resources by setting it to false. Defaults to true.
  • eventDragBetweenResources: boolean - Specifies whether the events in this resource are movable across resources. It applies for scheduler and timeline views. Has precedence over the dragBetweenResources option.
  • eventDragBetweenSlots: boolean - Specifies whether the events in this slot are movable across slots. Has precedence over the dragBetweenSlots option.
  • eventDragInTime: boolean - Specifies whether the events in this resource are movable in time. Has precedence over the dragInTime option.
  • eventOverlap: boolean - Specifies whether the events in this resource can be overlapped. Has precedence over the eventOverlap option.
  • eventResize: boolean - Specifies whether the events in this resource are resizable. Has precedence over the dragToResize option.
  • fixed: boolean - Specifies whether the resource is fixed to the top. It applies for timeline view if resolutionVertical in view option is not given, or it's value is set to none. Consider that the fixed resources always have to be the first elements of the array in a sequence (no non-fixed resources inserted in between) so that the dra & rop and event creation functionalities to work properly.
  • id: string | number - The id of the resource.
  • name: string - Specifies the name of the resource.
  • reorder: boolean - Specifies whether the resource can be dragged and reordered. It applies for timeline view if resourceReorder in view option is enabled.

The MbscResource supports custom properties in the form:

[x:string]: any

MbscResponsiveOptions<MbscEventcalendarOptions>​

Interface

The MbscResponsiveOptions&lt;MbscEventcalendarOptions&gt; supports custom properties in the form:

[key:string]: MbscEventcalendarOptions & {breakpoint?: number}

The keys are the names of the breakpoints, and the values are objects containing the options for the given breakpoint. The breakpoint property, when present, specifies the min-width in pixels. The options will take into effect from that width.

info

The available width is queried from the container element of the component and not the browsers viewport like in css media queries

There are five predefined breakpoints:

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

MbscSlot​

Interface

Properties:

  • eventDragBetweenSlots: boolean - Specifies whether the event is movable across slots.
  • id: string | number - The id of the slot. It 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.

The MbscSlot supports custom properties in the form:

[x:string]: any

MbscTimezonePlugin​

Interface

Properties:

  • createDate: (s: any, year: string | number | Date | MbscTimezonedDate, month: number, date: number, h: number, min: number, sec: number, ms: number) => MbscTimezonedDate
  • parse: (date: string | number, s: any) => MbscTimezonedDate