Modern Javascript event calendar
Use it in responsive mobile & desktop web apps wherever Javascript runs.
The calendar view supports everything from single to multiple week views all the way to month grids with various ways to render events.
The three views - scheduler, calendar, agenda - can be combined to create the perfect user experience on mobile, desktop and everything in-between.
The capabilities like recurring events, all-day, multi-day events, responsiveness are supported by all three views.
As part of Event calendar and scheduler it can be picked up with the Framework and Complete licenses or with the component license.
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 below the calendar broken up into days ordered chronologically. All of this is configured in the view
option.
You can use the calendar and agenda together or separately. For more ways to use the agenda learn about how to configure it.
Calendar - Desktop month view
Desktops or larger screens provide more space, which means you can use not just the horizontal but vertical space as well. Horrizontally the calendar grows to fill the full width of the parent container while the height can be adjusted through the height
option.
The number of visible labels are determined by the available space and the ones that don't fit will be shown in a popover. To save vertical space you can show all events in a popover.
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 height
option.
Use the responsive
option to configure how the calendar behaves on different sized screens.
The responsive
option is equipped with five breakpoints -
xsmall
(up to 575px),
small
(up to 767px),
medium
(up to 991px),
large
(up to 1199px),
xlarge
(from 1200px).
Custom breakpoints can be added if necessary: my-custom-breakpoint: { breakpoint: 600 }
(from 600px up to the next breakpoint).
Calendar - Events as labels
Events can be displayed in a couple of different ways. Most of the time showing the event data inside and across the calendar cells is the way to go. When configuring the calendar
object, you can set labels: true
. All of this happens under the view
option.
The number of visible labels are determined by the available space and the ones that don't fit will be shown in a popover. To save vertical space you can show all events in a popover.
Calendar - Events in popover
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.
Calendar - Custom event labels
The events are rendered in a consistent way across themes. The calendar will not make any difference between events spanning multiple days, full day, recurring or any other type of event. Positioned onto the calendar grid and printed in a colored container depending on the event color.
There is the possibility of customizing the look of the labels as well as showing addtional content besides the event.title
. There are two approaches to customization:
- To only customize the content shown inside the labels you will want to use the
renderLabelContent
option. This way thecolor
and positioning of the label will be taken care of by the calendar, you will be needing to handle thetitle
and any other custom field in the template. - To fully customize how the labels look - like in this example - pass the rendering function to the
renderLabel
option. All original event fields along with computed fields likeisMultiDay
,lastDay
are passed to the template. Using thelabelTemplate
you will have full control over how the labels look including things likecolor
,title
and any custom fields.
Calendar - Custom events in popover
The events listed in the popover can be customized in two ways. You can either do a full event customization - where the calendar only takes care of positioning the events inside the popover and everything else is your responsibility - or content customization.
When customizing only the content, the calendar handles the event start
and end
times, allDay
and color
rendering.
You will have to place and provide styling to the title
field and any other custom fields you are using, like description
, location
, participants
...
Pass a rendering function to the renderEventContent
option. All original event fields along with computed fields like isMultiDay
, lastDay
are passed to the function. For a fully custom event rendering use the renderEvent
option.
If you add custom markup you will want to add styling too. Use the popoverClass
under the view
option to tell the calendar what CSS class it should append to the popover container so that you can wite specific rules.
Calendar - Month or week view
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.
Calendar - Marked, colored & labels
Besides passing the events to the calendar you can highlight days, mark them with colored dots, add labels or completely color the background of the days using the marked
, colors
and labels
options.
This offers means to add more information to the calendar that could be valuable to users. While you can use the colors
along with marked
and labels
, the latter two are mutually exclusive because they get rendered in the same place on the UI.
You can add them as exact dates
, ranges
or specify recurring rules
. The recurring
object can be set the same way as for the events.
Use the onPageLoading
lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.
Calendar - Switching views
Dynamically switch views within one calendar instance. Use a UI control to let users do the switching or do it programatically. This example features a segmented component inside the header, but the live option changes can be invoked from anywhere.
Switch between a month view with a monthly agenda, a week view with a weekly agenda and daily event list.
Use the setOptions
method to dynamically update any option.
Calendar - Move, resize & create
Drag & drop is a core feature of the event calendar and it is composed of three sub-features:
- Drag to create events - tap/click to start creating an event and drag to the desired length
- Move events - grab an event and move it wherever needed
- Resize events - change the length of en event, grab it from either end and resize it
You have granular control over the three features through the
dragToCreate
,
dragToMove
and
dragToResize
options, which are false
by default.
Calendar - Manage blocked out dates
Entire days and ranges can blocked out to manage event creation and editing more efficiently.
To disable specific or recurring days you can pass an array to the invalid
option. A couple of examples:
- To disable weekends, use the recurring object -
recurring: { repeat: 'weekly', weekDays: 'SA,SU' }
- Disable a specific range -
{ start: new Date(2020, 11, 19), end: new Date(2020, 11, 20) }
When dragging events onto disabled days, they will automatically be denied and
onEventCreateFailed
/
onEventUpdateFailed
events will be triggered, from which custom logic can be executed to show a toast or maybe a modal for data correction.
Calendar - Event properties
The event data structure for the calendar 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 ...
id
- A unique ID for the event. If not specified a unique id will be generatedtitle
- Defines the event text. This can be plaintext or HTMLcolor
- Defines the event colorstart
- Sets the start date and time for the event. It can be a js date object, ISO date string or moment.js object. Learn about date formatsend
- Sets the end date and time for the event. The same formats are supported as forstart
allDay
- Configures the event as a full-day eventrecurring
- Configures the recurring rules for the event. Learn about recurring events
Calendar - Supported date formats
Understanding how to work with dates inside the event calendar is essential.
You can pass to the data
, marked
, colors
and labels
in four different formats.
The event calendar can work with Javascript date objects, ISO strings and Moment.js objects.
Calendar - Understanding recurring events
Configure daily
, weekly
,monthly
and yearly
recurring events.
You can pass the recurrence rule in the recurring
property of the event as an object or a string in RRULE
format. Learn about the event data structure and where to place the recurring rules.
Use the configurator to experiment, build strings and objects that you can grab and use.
Calendar - Loading inline data
What is an event calendar without any events in it? To populate it with events all you have to do is pass the event array to the data
option.
In a real-world scenario you would probabaly load the events from a remote resource or event better, load them on demand. However the point of this example is to understand how easy it is to add events to the event calendar.
Calendar - Events from remote API
The calendar can be populated by passing an array to the data
option, that you can construct either inline or by getting it from a remote API. The important thing to remember is that events need to be in a format that the calendar understands.
Calendar - Loading events on demand
The event 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.
Use the onPageLoading
lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.
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.
Calendar - Add/edit/delete events
After looking at the different operations of add, edit and delete for events it can be all put together in a choesive application.
Drag to create and click to create is enabled. A temporary event will be created and a custom edit dialog is popped to set the various properties of the event. If cancelled the event won't be created if confirmed, 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 the editing.
Delete can be implmented inside the edit dialog with a button or with any custom logic. It's just a matter of removing it from the data object.
Calendar - Customizing the header
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; }
Calendar - In-header filtering
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; }
Calendar - Theming capabilities
The look and feel of the event calendar can be deeply customized. There are four levels of customization:
- Base themes: Choose between iOS, Material and Windows.
- Light or dark: Every theme has a
light
anddark
variant. Setting thethemeVariant
to'auto'
will switch based on system settings. - Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme from the header.
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.
Calendar - Calendar systems
The event calendar supports multiple calendar systems. You can control it with the calendarSystem
setting, and it supports the following options:
- Gregorian - it is included by default
- Jalali - it is the default system of the Persian calendar and is inlcuded within the Farsi language pack
- Hijri - it is included in the Arabic language pack
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 onEventClick
, onInit
, onSelectedDateChange
... will be triggered.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.