Event calendar - Mobile month view

Use the event calendar for mobile, desktop and everything in-between. The content perfectly fills the parent container or the mobile screen in full width.
You can chooose to render an agenda-view below the calendar broken up into days ordered chronologically. For more ways to customize the agenda view check out this example.

Event calendar - Desktop month view

Depending on the screen width the calendar seamlesly transforms into a desktop-view using the available space more intelligently. The main difference between the mobile and desktop rendering is how the day cells are laid out.
People can now see on a glance how many events a day holds and by clicking on day the event list will show up in a pop-over.

Event calendar - Responsive

The event calendar is fully responsive. It adapts to the available space and fills the screen to look good everywhere. While the you don't have to worry about the width the height can be manually adjusted with the calendarHeight property.

Event calendar - Variable weeks

The calendar view supports variable weeks. Save space by only displaying one or two weeks or go for a full month where it makes sense.
Use the weeks setting that expects a number of rows. The default is six weeks, but feel free to play around.

Agenda - Compact daily agenda

Use a compact week calendar that you can place at the top of your screen and list a daily schedule below. The calendar view is configured with the calendar object (take a look the previous example) while the agenda view is configured by the eventList setting. For more details on the agenda view see this example.
Both are set up inside the view setting.

Days with events are marked with a little dot and days without any events have a localized empty view. Btw. the components are completely localized. Go on and check out this example.

Agenda - Synchronized views

You can usually get away with using a single event calendar instance, but being able to use and synchronize multiple views can come in handy.

In this example we have a two-pane layout with a calendar view on the left and a large agenda view on the right. Because the default rendering of agenda below the calendar doesn't fit we'll be needing two instances.
The sync has to happen for both. The day view calls the navigate method of the calendar in its onPageChange event, while the calendar sets the day view with navigate from its onSetDate event.

You can add these with exact dates, ranges, days of week, days of month and recurring dates.
When processing a lot of data you can load the marked days, labels, colors dynamically in the onPageChange event.

Event calendar - Events in popover

Besides displaying event labels or listing them in an agenda view, you can have them show up in a pop-over. Set it up though the calendar: {popover: true} object inside the view setting.
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.

Event calendar - Custom event data

If you want to display complex event data, you can do it by passing HTML as the text. This can be full fledged HTML with a layout, CSS, styling, emojis and so on.

When the events are renderend, instead of just plain text, the component will print the styled HTML markup. Besides that the layout, time will be kept the same as with plain text. If you have something completely different in mind, you can use the listview to render the events instead of relying on the event calendar agenda view. Psst... the listview supports slide gestures.

Event calendar - Custom rendering with listview

While we have flexible event listing, sometimes you might need something entirely different. For those situations we have the listview.

You will be passing the events to the calendar like before, but the event listing will be handled externally. Use the Event API to query the events and create any layout you desire. The listview is super-useful to render anything that is a list and it event supports gestures, so you can do things like swipe away to remove an event. Try swiping the events left and right.

Event calendar - Event data structure

The event data structure for is straightforward with a couple of base properties that the component understands and uses to render the UI. Besides the base properties you can add any custom property, like location, description ...

text - Defines the event text. This can be plaintext or HTML

color - Defines the event color

start - Sets the start date and time for the event. It can be a date object, ISO date string or moment.js object

end - Sets the end date and time for the event. The same formats are supported as for start

This is how a simple event looks like with a couple of extra properties:

Event calendar - Events from remote API

Data sources for the event calendar include inline data, you can load all events at once from an external resource or load data on demand. This example shows how to use an external API to load the data from. The same JSON format applies for the events, but it's base properties and optional fields. The previous demo shows what data format to follow. More information about the data setting can be seen in the documentation.

Event calendar - Loading events on demand

The calendar supports remote and local data sources. Besides that, events can be populated on initialization or loaded on demand. Getting the events in real time as the user navigates improves load performance and always serves the most recent data.

Event calendar - Events from Google calendar

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.

Event calendar - Add/delete event

The component renders event data that it gets from an API, however you can manually add and delete events in real time. The idea is to pass the event in the correct format, which means it needs a couple of base properties:

d or start & end - Defines the date and length of the event

text - Defines the lable for the event, which can be anything from text to something more complex like HTML

color - Defines the color of the event

allDay - Sets if the event is an all-day event or not

everything else you would like - You can add any additional data that makes sense, like busy or location...

After you have the data object ready with the event data you can pass it to the addEvent method.
While the event calendar doesn't ship with a built-in form for adding events, you can use the popup component along with inputs & fields to build the form you need.

Deleting events can be done just as simply by calling the removeEvent method

everything else you would like - You can add any additional data that makes sense, like busy or location...

After you have the new data object ready with the event data you can pass it to the calendar.
While the event calendar doesn't ship with a built-in form for adding/editing events, you can use the popup component along with inputs & fields to build the form you need.

Event calendar - Lifecycle events

The event calendar ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like onEventSelect, onInit, onLabelTap ... will be triggered.
Interact with the example and check the event log for the output.

Event calendar - Localization

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.