Besides displaying events as labels, you can have them show up in a pop-over. Set it up through the calendar: {popover: true} object inside the view option. Using the popover setting saves vertical space and provides a subtle cue to the user that there are events. A small dot will appear in day cells with events or if calendar: {count: true} is set, an event count is displayed.

The same popover is rendered when events are displayed as labels and not all fit vertically in the calendar day cells.

When rendering events, they follow the same order: all-day events at the top followed by everything else sorted by the event start time. Events with the same start are ordered alphabetically by title.

The default logic can be overridden using the eventOrder option which expects a function that compares two events and returns an order (-1 or 1). This can be useful in scenario where rendering PROPOSED vacation at the top followed by APPROVED time off is more useful.

If the context requires users being able to change the timezone on the fly, you can add a custom dropdown with the desired timezones to the event calendar header. This can be of course placed externally to the calendar as well, eg. setting page.

Set the timezone of the incoming data through the dataTimezone - eg. 'utc', and set the display timezone through the displayTimezone - eg. 'America/Los_Angeles'

Use the available real estate in the calendar header to add event search. With the templating capabilities of the header you can easily add a search box and use a separate agenda instance to show the search results. This example is relying on a single API endpoint for getting the data onto the primary calendar view and also for getting the filtered data based on the search terms.

Events can be filtered in real time so using an agenda view for the search results is an easy choice. It provides all the necessary styling and advanced features that you might need to customize the experience.

Alternatively, search can be implemented in a sidebar next to the event calendar using a similar search box with an inline agenda instead of a dropdown.

Inline search can be easily implemented with the help of a separate agenda instance. This example is relying on a single API endpoint for getting the data onto the primary calendar view and also for getting the filtered data based on the search terms.

Events can be filtered in real time so using an agenda view for the search results is an easy choice. It provides all the necessary styling and advanced features that you might need to customize the experience.

Alternatively, search can be implemented in the header of the event calendar using a similar search box with an agenda listed in a popup instead of rendered inline.

Besides the single month view, the calendar can be configured to render multiple months or a year. Controlled through the calendar.type and calendar.size properties of the view option.

Depending on the height of the parent container the calendar is rendered in, the header that can be used for navigation is sticky at the top while the months are vertically scrollable.

You can customize the look of the labels and show additional content besides the event.title. There are two approaches you can take:

• Only customize the content of the labels - For this you will want to use the labelContentTemplate option. The color and positioning of the label will be handled by the calendar. The title and any other custom fields you want to show in the template is your responsibility.
• Fully customize how the labels look (like in this example) - Use the labelTemplate option. All original event fields along with computed fields like isMultiDay, lastDay can be leveraged for constructing the template. With the labelTemplate you will have full control over how the labels are styled including things like color, title and any custom fields.

You can customize how the header of the event calendar looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between calendar and scheduler.

Use the headerTemplate option for passing a custom template. There are predefined components - shorthands if you will - that can be used to assemble the header:

• Navigation component - <mbsc-calendar-nav></mbsc-calendar-nav>. Use the .md-header-filter-controls CSS class for custom overrides.
• Today button - <mbsc-calendar-today></mbsc-calendar-today>. Use the .md-header-filter-today CSS class for custom overrides.
• Previous month button - <mbsc-calendar-prev></mbsc-calendar-prev>. Use the .md-header-filter-prev CSS class for custom overrides.
• Next month button - <mbsc-calendar-next></mbsc-calendar-next>. Use the .md-header-filter-next CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the headerTemplate. This example sets a consistent order and layout across all themes and shows a custom control at the far right end.

For a custom order on a theme to theme basis, you will need to use a little CSS. Flex layout makes reordering easy. It's just a matter of setting the order in CSS. For material use the .mbsc-material, for windows the .mbsc-windows prefix and for iOS it is .mbsc-ios class. Eg.:

.mbsc-material .md-header-filter-prev { order: 1; }
.mbsc-material .md-header-filter-next { order: 2; }
.mbsc-material .md-header-filter-controls { order: 3; }
.mbsc-material .md-header-filter-today { order: 4; }

There are several approaches to showing a tooltip when hovering events.

By default, the calendar shows the browser native tooltip when hovering over the event. This includes the times and title of the event, which does the job most of the times. For showing a custom text use the tooltip property of the data object. This tooltip is specific to every event. If you want to hide the native tooltip, you can set the showEventTooltip to false.

Setting the showEventTooltip to false gives room for a fully custom tooltip that can be implemented by using the onEventHoverIn and onEventHoverOut lifecycle events. With the help of the Mobiscroll popup you can show a custom tooltip that holds details, actions applicable to the event it is anchored to.

There are cases when you are using a third party library, something like md-boostrap. For those cases, turn the browser native tooltip off with the showEventTooltip option and use the third-party tooltip accordingly. In case of md-boostrap, you can add the tooltip directive to the custom event template so that the library knows where and when to show the tooltip.

The calendar view doesn't have built in resource listing, however we can easily solve that inside the header using the segmented component. The header of the agenda is a canvas and an opportunity for customization. You can add custom components and enable new interaction in context.

Such an example would be a custom filter block created with the help of a segmented control and placed between the standard UI components, which are:

• Navigation component - <mbsc-calendar-nav></mbsc-calendar-nav>. Use the .md-header-filter-controls CSS class for custom overrides.
• Today button - <mbsc-calendar-today></mbsc-calendar-today>. Use the .md-header-filter-today CSS class for custom overrides.
• Previous month button - <mbsc-calendar-prev></mbsc-calendar-prev>. Use the .md-header-filter-prev CSS class for custom overrides.
• Next month button - <mbsc-calendar-next></mbsc-calendar-next>. Use the .md-header-filter-next CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the headerTemplate.

For a custom order on a theme to theme basis, you will need to use a little CSS. Flex layout makes reordering easy. It's just a matter of setting the order in CSS. For material use the .mbsc-material, for windows the .mbsc-windows prefix and for iOS it is .mbsc-ios class. Eg.:

.mbsc-material .md-header-filter-prev { order: 1; }
.mbsc-material .md-header-filter-next { order: 2; }
.mbsc-material .md-header-filter-controls { order: 3; }
.mbsc-material .md-header-filter-today { order: 4; }

The event calendar comes with third party calendar integration support through the integration plugin. This needs to be added to the download package or installed separately from a dedicated NPM package.

It includes everything you need to authenticate your users, get their Google calendars and provides functions for CRUD operations. It takes care of loading the events and converts them to the required format so that they can be displayed on the Mobiscroll calendar separately or mixed with other calendars and events.

Customizing the interaction, event workflows, whether the events are read-only is up to you. In this live demo, newly created events will land in the primary calendar of the authenticated user.

The event calendar comes with third party calendar integration support through the integration plugin. This needs to be added to the download package or installed separately from a dedicated NPM package.

It includes everything you need to authenticate your users, get their Outlook calendars and provides functions for CRUD operations. It takes care of loading the events and converts them to the required format so that they can be displayed on the Mobiscroll calendar separately or mixed with other calendars and events.

Customizing the interaction, event workflows, whether the events are read-only is up to you. In this live demo, newly created events will land in the primary calendar of the authenticated user.

Event data can be loaded from remote sources, like public google calendars. Through the integration plugin you can easily show events that are available in a public calendar. The integration plugin needs to be added to the download package or installed separately from a dedicated NPM package.

You will just need the CALENDAR_ID and an apiKey from google and you should be ready to roll.

Public calendars are read-only. If you are interested in syncing private google calendars with read/write/delete access, check out this example.

Drag to create and click to create is enabled. Events can be created by dragging or with double clicks. As soon as the initial position is confirmed, a temporary event is created and a custom edit dialog is shown for refinement. On cancel the temporary event will be removed and on confirmation the event will stay in the calendar.

Drag to resize and drag to move is enabled. Events can be reordered and resized. In addition to that, clicking on the event will open a custom dialog that enables editing the various properties.

Delete can be implemented inside the edit dialog with a button. It's just a matter of removing it from the data object. If a dialog is not shown on click, focused events can be deleted with the backspace and delete keys.

As seen in the previous example, an add/edit form can be created with custom and base event fields. While the CRUD example features delete with undo, this example shows off how to build a fully customizable recurrence editor right in the add/edit screen.

Above some common presets, like Daily, Weekly on X day, Monthly on Xth, Annually on the same day, Every Weekday a fully custom recurrence editor is implemented.

Copy & paste or delve into the code and understand how to generate recurrence objects or RRULES as seen in this live rule builder.

Sometimes we don't want users to be able to create events in the past or to alter past events. This might be role based in some cases or applied in general to the calendar.

To disable past event creation and manipulation, a couple of things need to be handled:

• Invalidate dates that are before today - this takes care of validating event drop and event creation on past dates
• Mark past events as fixed - to do this, set the editable property of the event object to false for the events that should remain fixed
• Handle past occurrences of recurring events - recurring events are loaded as a single event and the occurrences are generated by the event calendar. Moving the past occurrences need to be handled in the onEventUpdate and onEventCreate lifecycle events
• Give feedback to the user - optionally, a toast can be displayed to give feedback to the user why an event cannot be dropped, moved and created in the past. For this we can use the onEventCreateFailed and onEventUpdateFailed lifecycle events

Multiple event selection can be turned on with the selectMultipleEvents option. Selecting multiple events can be done through user interaction with CTRL/SHIFT/CMD + click or programmatically eg. click of a button or 'select all' checkbox.

Bulk operations like delete, update can be applied the selected events. Things like deleting with the backspace or delete buttons work out of the box but custom actions can be also applied. The selection can be easily retrieved and updated with the getSelectedEvents and setSelectedEvents method.

Custom actions can be performed with external buttons or with context menu activated on right-click.

While copy & pasting one or more events is useful, sometimes being able to move events between two separate calendars can improve productivity. How the calendars are laid out depends on the application, but the basic idea is that you will need to be able to tell where the events from the clipboard will be pasted.

In this example this is implemented by tracking the active instance, which is determined by the active tab of the segmented control. With this out of the way, CTRL/CMD+C/X/Z/V handle the copy, cut, undo and paste actions.

The components are fully localized. In case of the event calendar this covers date and time format, button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.