Besides displaying events as labels, you can have them show up in a pop-over. Set it up though 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 apear 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.

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

• Only customize the content of the labels - For this you will want to use the renderLabelContent 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 inside the label is your responsability.
• Fully customize how the labels look (like in this example) - Use the renderLabel option. All original event fields along with computed fields like isMultiDay, lastDay can be leveraged for constructing the render function. With the renderLabel you will have full control over how the labels are styled including things like color, title and any custom fields.

Data can be loaded from any number of places. The idea is to load the data and make sure to convert it into a format that the event calendar understands. You can use base fields and add custom fields that you can then render with the help of templates.

You can show events coming from google calendars. In this example you'll see how you can load events from a public calendar using the googleSDK. Make sure to set your API key and Client ID, that you can get from here.

After looking at the different operations of event creation, edit/update and delete it all can be all put together in a choesive example.

Drag to create and click to create is enabled. Events can be created by dragging or with double click. As soon as the initial posion 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 addtion to that, clicking on the event will open a custom dialog that enables editing the various properties.

Delete can be implmented 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.

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 renderHeader option for passing a custom header layout. There are predefined components - shorthands if you will - that can be used to assemble the header:

• Navigation component - <div mbsc-calendar-nav></div>. Use the .md-header-filter-controls CSS class for custom overrides.
• Today button - <button mbsc-calendar-today></button>. Use the .md-header-filter-today CSS class for custom overrides.
• Previous month button - <button mbsc-calendar-prev></button>. Use the .md-header-filter-prev CSS class for custom overrides.
• Next month button - <button mbsc-calendar-next></button>. 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 renderHeader. 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; }

The header of the event calendar 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 - <div mbsc-calendar-nav></div>. Use the .md-header-filter-controls CSS class for custom overrides.
• Today button - <button mbsc-calendar-today></button>. Use the .md-header-filter-today CSS class for custom overrides.
• Previous month button - <button mbsc-calendar-prev></button>. Use the .md-header-filter-prev CSS class for custom overrides.
• Next month button - <button mbsc-calendar-next></button>. 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 renderHeader.

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