🤖 Create a chatbot for your NativeScript app! Learn more at our upcoming webinar.

NativeScript Core

Populating RadCalendar with Data

RadCalendar allows you to define a list of events for a particular date. This is done by using the eventSource property. This article describes the steps you need to take in order to feed RadCalendar with your custom events using a events source.

The CalendarEvent Class

Feeding events into RadCalendar is done via instances of the CalendarEvent class. The CalendarEvent class is model describing a single event. It exposes properties allowing you to specify things like:

  • start time of the event
  • end time of the event
  • whether the event is an 'all-day' event
  • title of the event, etc.

To create instances of the CalendarEvent class you need to import the calendar module into your .ts file as shown below:

import * as calendarModule from "nativescript-ui-calendar";

Define a List of Events and Bind Them to RadCalendar

Assuming we have imported the calendar module as instructed above, we can now create an Array of events and assign it to the eventSource property of RadCalendar:

let events: Array<calendarModule.CalendarEvent> = new Array<calendarModule.CalendarEvent>();
let j = 1;
for (let i = 0; i < this._eventTitles.length; i++) {
    const now: Date = new Date();
    const startDate: Date = new Date(now.getFullYear(), now.getMonth(), j * 2);
    const endDate: Date = new Date(now.getFullYear(), now.getMonth(), (j * 2) + (j % 3));
    const event = new calendarModule.CalendarEvent(this._eventTitles[i], startDate, endDate);
this.set("calendarEvents", events);

The _eventTitles array is with example purposes and contains several strings representing event names.

The calendarEvents property used at the end of this snippet is exposed by the view-model assigned as a binding context to the page. This allows us to directly bind the eventSource property of RadCalendar in our XML file to it:

<calendar:RadCalendar id="calendar" eventSource="{{ calendarEvents }}" />

Running the application, the following is shown on iOS and Android:

TelerikUI-RadCalendar-Populating-With-Data TelerikUI-RadCalendar-Populating-With-Data

Event View Modes

By default, events for each date cell are shown as dots (iOS) or squares with a summary (Android). You can customize this behavior by choosing one of the following event view modes:

  • None - the default option
  • Inline - event details are displayed in a list that appears in the calendar
  • Popover - event details are displayed in a popup over the calendar

All of these values are exposed by the CalendarEventsViewMode enum defined in the calendar module.

To change the events view mode you need to set the eventsViewMode property of RadCalendar to one of these values. Here's how Inline looks like:

TelerikUI-RadCalendar-Event-View-Modes TelerikUI-RadCalendar-Event-View-Modes


Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.