Timeline
The timeline view displays a timeline with its related events. It can be configured as a daily, weekly, monthly or yearly timeline. Work hours and work days along with disabled time-spans, breaks can be added. Use it to for advanced scheduling tasks with built-in drag & drop.
The displayed week days can be modified with the startDay
and endDay
properties of the view option.
The displayed hours can be modified with the startTime
and endTime
properties of the view option.
With these properties both hours and minutes can be specified.
Options
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 color object 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, 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
: Date | string | object - Date of the calendar day which should be colored.start
: Date | string | object - Start of the colored range.end
: Date, string | object - End of the colored range.highlight
: string - Highlight color of the day, can be any valid CSS color ('red'
,'#ff0000'
,'rgb(255, 0, 0)'
, etc.).recurring
: string | object - Recurrence rule for coloring recurring days.recurringException
: string | object | Array<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 color. The color will be displayed only in the specified resource. If there is no resource defined, the color will be displayed in every resource.slot
: string | number - Specifies the slot id for the color. The color will be displayed only in the specified slot. If there is no slot defined, the color will be displayed in every slot.textColor
: string - Specifies the text color of the colored range title.title
: string - Text which will be displayed for the colored range. Only applicable for the timeline and scheduler views.
The colored range will be considered all-day if:
- the
allDay
property is explicitly set. - the
start
/end
properties are not specified, only thedate
.
The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.
colors: [
{ date: new Date(2020, 2, 23), background: 'pink' },
{ date: new Date(2020, 2, 24), background: 'green' },
{ background: '#ff0000', recurring: { repeat: 'weekly', weekDays: 'SU' } },
{ background: 'yellow', recurring: { repeat: 'weekly', weekDays: 'SA' } }
]
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 connection object has the following properties:
arrow
: boolean | 'from' | 'to' | 'bidirectional' - Specify where to display arrows. Iftrue
, the arrow will display only at the end side of the connection.color
: string - The color of the connection.cssClass
: string - Custom CSS class for the connection line for further customization.from
: string - The id of the event where the connection will begin.to
: string - The id of the event where the connection will end.
Default value: undefined
cssClass
string
Specifies a custom CSS class for the component.
Default value: undefined
data
Array<MbscCalendarEvent>
The events for the calendar, as an array of event objects. The event object supports the following properties:
allDay
: boolean - Specifies if the event is all day or not.color
: string - The color of the event.cssClass
string - Custom CSS class for the event. Useful when customization is needed on the event level. For example: setting the width for specific events.editable
: boolean - Specifies if an event is editable or not. Setting it tofalse
disables drag & drop, resize and delete,end
: Date | string | object - The end of the event.id
: string | number, Number - A unique id for the event. If not specified, the event will get a generated id. and the event will have thembsc-readonly-event
CSS class. With this class, the fixed events will be easily customizable, for example: add opacity or disable the cursor on the fixed events.recurring
: string | object - Recurrence rule for the event.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 event. The event will be displayed only in the specified resources. If there is no resource defined, the event will be displayed in every resource.slot
: string | number - Specifies the slot id for the event.start
: Date | string | object - The start of the event. The event will be displayed only in the specified slot. If there is no slot defined, the event will be displayed in every slot.title
: string - The title of the event.tooltip
: string - The tooltip text of the event.
The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.
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.
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.
When using timezones, the exclusiveEndDates option is also turned on by default.
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
DateType
Specifies the initial selected date on the calendar.
Default value: undefined
displayTimezone
string
The timezone in which the data is displayed.
When using timezones, the exclusiveEndDates option is also turned on by default.
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'
dragTimeStep
number
Specifies the steps in minutes for the scheduler and timeline events during drag.
Default value: 15
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
exclusiveEndDates
boolean
If true
, the event calendar 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.
When using timezones, the exclusiveEndDates
option will default to true
.
extendDefaultEvent
(args: MbscNewEventData) => MbscCalendarEvent
externalDrop
boolean
If true
, external drag & drop is allowed.
Default value: undefined
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
invalid
Array<DateType> | Array<IValidateProps>
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.
The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.
invalid: [
// Passing exact dates and times
new Date(2021, 1, 7), // Date object
'2021-10-15T12:00', // ISO 8601 string
moment('2020-12-25'), // moment object
// Passing invalid ranges
{
// ISO 8601 strings
start: '2021-10-15T12:00',
end: '2021-10-18T13:00',
title: 'Company 10th anniversary',
},
{
// Date objects
allDay: true,
start: new Date(2021, 2, 7),
end: new Date(2021, 2, 9),
title: 'Conference for the whole team',
},
{
// Time range with recurrence
start: '13:00',
end: '12:00',
recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' },
title: 'Lunch break',
},
{
// Disable weekends
recurring: {
repeat: 'weekly',
weekDays: 'SA,SU'
}
}
];
Default value: undefined
invalidateEvent
"start-end" | "strict"
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'
max
DateType
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
DateType
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
refDate
DateType
Specifies the reference date of the component, which represents when to start to calculate the view you want to display. For example, if you want to display 14 days from today, you can specify today as the reference date.
If not defined, in case of scheduler and timeline views it will default to today, in other views it will default to '1970/01/01'
.
Default value: undefined
resources
null | 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.
If set to an empty array, only those events will be displayed which are not tied to any resource.
The timeline view can render multiple levels of hierarchy groups. Levels can be added with the help of the children
property.
The resource object supports the following properties:
children
: Array<MbscResource> - Children resources.collapsed
: boolean - The displayed state of the children resources.id
: Number, string - The id of the resource.name
: string - The name of the resource.color
: string - The color sets the default color for the events 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.eventCreation
: boolean - Disable event creation on specific resources by setting it tofalse
. It'strue
by default.
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
missing
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.
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: 0pxsmall
- min-width: 576pxmedium
- min-width: 768pxlarge
- min-width: 992pxxlarge
- 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 if needed, 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
DateType
Specifies the selected date on the calendar. Setting this option will force the calendar to display the passed date and won't display anything else unless another selected date is set. This is called a controlled usage, and the onSelectedDateChange event can be used to get notified and act on navigational changes.
To set the initially displayed date without a controlled usage, use the defaultSelectedDate option instead.
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.
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
showEventTooltip
boolean
If false
, it will hide the native tooltip that shows up when hovering over an event.
Default value: true
slots
null | 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 slot object supports the following properties:
id
: string | number - The id of the slot.name
: string - The name of the slot.
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.
Make sure that the theme you set is included in the downloaded package.
Default value: undefined
themeVariant
"dark" | "light" | "auto"
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'
orundefined
- 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
ITimezonePlugin
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
or luxonTimezone
objects. These objects can be imported from the mobiscroll bundle.
Default value: undefined
width
string | number
Sets the width of the component.
Default value: undefined
Events
@cell-click
(args: MbscCellClickEvent, inst: EventcalendarBase) => void
Triggered when a cell is clicked on the calendar day, scheduler cell, or timeline cell.
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' | 'schedule' | 'timeline' - The view where the cell was clicked.target
: HTMLElement - The DOM element of the clicked cell.
inst - The component instance.
@cell-double-click
(args: MbscCellClickEvent, inst: EventcalendarBase) => void
Triggered when a cell is double-clicked on the calendar day, scheduler cell, or timeline cell.
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' | 'schedule' | 'timeline' - The view where the cell was clicked.target
: HTMLElement - The DOM element of the clicked cell.
inst - The component instance.
@cell-right-click
(args: MbscCellClickEvent, inst: EventcalendarBase) => void
Triggered when a cell is right-clicked on the calendar, scheduler, 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' | 'schedule' | 'timeline' - The view where the cell was clicked.target
: HTMLElement - The DOM element of the clicked cell.
inst - The component instance.
@destroy
(args: any, inst: any) => void
Triggered when the component is destroyed.
Parameters:
args - The event argument object.
inst - The component instance.
@event-click
(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.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.selected
: boolean - Specifies if the day is currently selected or not (before it was clicked).slot
: string | number - The id of the slot where the event was clicker, if slots are set.source
: 'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover' - The view where the event was clicked.
inst - The component instance.
@event-create
(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.source
: 'calendar' | 'timeline' | 'schedule' - The view where the event is being created.
inst - The component instance.
@event-create-failed
(args: MbscEventCreateFailedEvent, inst: EventcalendarBase) => void
Triggered when an event creation failed due to overlapping an invalid range.
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.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' | 'schedule' - The view where the event was created.
inst - The component instance.
@event-created
(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' | 'schedule' - The view where the event was created.target
: HTMLElement - The DOM element of the created event.
inst - The component instance.
@event-delete
(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' | 'schedule' - The view where the event is being deleted.
inst - The component instance.
@event-deleted
(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' | 'schedule' - The view where the event was deleted.
inst - The component instance.
@event-double-click
(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.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.selected
: boolean - Specifies if the day is currently selected or not (before it was clicked).slot
: string | number - The id of the slot where the event was clicker, if slots are set.source
: 'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover' - The view where the event was clicked.
inst - The component instance.
@event-drag-end
(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.slot
: string | number - The id of the slot where the event was dragged, if slots are set.source
: 'calendar' | 'schedule' | 'timeline' - The view where the event was dragged.
inst - The component instance.
@event-drag-start
(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.slot
: string | number - The id of the slot where the event is dragged, if slots are set.source
: 'calendar' | 'schedule' | 'timeline' - The view where the event is dragged.
inst - The component instance.
@event-hover-in
(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.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.slot
: string | number - The id of the slot where the event is hovered, if slots are set.source
: 'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover' - The view where the event is hovered.
inst - The component instance.
@event-hover-out
(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.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.slot
: string | number - The id of the slot where the event was hovered, if slots are set.source
: 'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover' - The view where the event was hovered.
inst - The component instance.
@event-right-click
(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.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.selected
: boolean - Specifies if the day is currently selected or not (before it was clicked).slot
: string | number - The id of the slot where the event was clicker, if slots are set.source
: 'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover' - The view where the event was clicked.
inst - The component instance.
@event-update
(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.source
: 'calendar' | 'timeline' | 'schedule' - The view where the event is being updated.
inst - The component instance.
@event-update-failed
(args: MbscEventUpdateFailedEvent, inst: EventcalendarBase) => void
Triggered when an event update failed due to overlapping an invalid range.
Parameters:
args - The event argument with the following properties:
event
: MbscCalendarEvent - The updated event.invalid
: object - The invalid object which the event overlapped.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' | 'schedule' - The view where the event was updated.
inst - The component instance.
@event-updated
(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.source
: 'calendar' | 'timeline' | 'schedule' - The view where the event was updated.target
: HTMLElement - The DOM element of the updated event.
inst - The component instance.
@init
(args: any, inst: any) => void
Triggered when the component is initialized.
Parameters:
args - The event argument object.
inst - The component instance.
@page-change
(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.month
: Date - The first day of the visible month in case of month view.
inst - The component instance.
@page-loaded
(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.month
: Date - The first day of the visible month in case of month view.
inst - The component instance.
@page-loading
(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.month
: Date - The first day of the visible month in case of month view.
inst - The component instance.
@resource-collapse
(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.
inst - The component instance.
@resource-expand
(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.
inst - The component instance.
@selected-date-change
(args: MbscSelectedDateChangeEvent, inst: EventcalendarBase) => void
Triggered when the selected date is changed from the UI. You can use this event in conjunction with the selectedDate option to customize where the event calendar should navigate.
Parameters:
args - The event argument with the following properties:
date
: Date - The newly selected date.
inst - The component instance.
@selected-events-change
(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.
Localization
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 shortMMMM
- month name longD
- 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'
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']
firstDay
number
Set the first day of the week: Sunday is 0, Monday is 1, etc.
Default value: 0
locale
string | 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
orundefined
,'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']
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'
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'
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/pmA
- 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 {count}'