Advanced Angular event calendar
Use it in responsive mobile & desktop web apps and Ionic Angular projects
Responsive event calendar with month view, variable week view, range view and event listing.
Supporting one-time, recurring, all-day and multi-day events with pop-over and schedule listing capability. Use it for mobile, desktop and responsive websites.
Shipping with useful features for a refined UX, including:
- Usage on mobile and desktop with responsive features
- Single and multi-day events
- One-time and recurring events
- Daily, weekly, monthly and custom event schedules
- Month view, week view and range view
- Liquid layout with inline display mode
- Pop-over event listing or list view for schedule
- Multiple theme support
- RTL support
- Full localization
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-view below the calendar broken up into days ordered chronologically. For more ways to customize the agenda view check out this example.
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.
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.
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.
Calendar - Compact daily schedule
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.
Calendar - Switching views
Dynamically switch views within one calendar instance. Use a UI control to let users do the switching or do it programatically.
The example features a month view with full event schedule, a week view with a weekly schedule and daily event list. Use the option method to dynamically change the settings.
Calendar - Agenda view
Use the eventList object, configurable inside the view setting to render a scrollable schedule or agenda view. type and size can be set:
- day -
eventList: { type: 'day', size: 20 }can be configured for a single day or a range of days - week -
eventList: { type: 'week', size: 3 }can be configured for a single week or a range - month -
eventList: { type: 'month' }can be configured for a single month or a range
Calendar - 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.
Calendar - Marked, colored & labels
For additional information you can mark days with colored dots, add labels or completely color the background of the days. This offers means to add more information to the calendar that is valuable to users. Take a look at this example of marked days and description.
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.
Calendar - Events as labels
Events can be displayed 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 setting.
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.
Calendar - Events in agenda view
The calendar view ships with two methods for listing events. Either as event labels or in a pop-over. Besides these two the third way is to configure an event list under the view setting.
Configure the event list like this view: {eventList: {type: 'month'}}.
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.
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.
Calendar - Date formats
The event calendar support multiple date types. The data, marked, colors and labels objects all understand the different formats. Let's see how they look:
- JS date objects -
new Date(1995, 11, 17, 15, 24) - ISO date strings -
'2008-09-15T15:53:00' - Moment.js objects -
moment([2018, 3, 27, 12, 15])
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 HTMLcolor- Defines the event colorstart- Sets the start date and time for the event. It can be a date object, ISO date string or moment.js objectend- Sets the end date and time for the event. The same formats are supported as forstart
This is how a simple event looks like with a couple of extra properties:
{
text: 'Product planning',
color: '#56ca70',
start: new Date(2018, 11, 21, 13, 00),
end: new Date(2018, 11, 21, 14, 00),
busy: true,
description: 'Weekly meeting with team',
location: 'Office'
}
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.
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.
Use the onPageLoading lifecycle event to load the data when needed.
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/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:
dorstart&end- Defines the date and length of the eventtext- Defines the lable for the event, which can be anything from text to something more complex like HTMLcolor- Defines the color of the eventallDay- 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
busyorlocation...
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
Calendar - View/update event
This demo renders event data that it gets from an API, however you can update events. You can find and load the event by ID into a form and then pass it back to the calendar on Save. Edit the fields:
dorstart&end- Defines the date and length of the event - Use the range pickertext- Defines the lable for the event, which can be anything from text to something more complex like HTMLcolor- Defines the color of the event - use the color pickerallDay- 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
busyorlocation...
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.
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
Mobiscroll,iOS,Android MaterialandWindows. - Light or dark: Every theme has a
lightanddarkvariant. Setting thethemeVariantto'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 - 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 onEventSelect, onInit, onLabelTap ... will be triggered.
Interact with the example and check the event log for the output.
EVENTS FIRED:
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.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.