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);
    events.push(event);
    j++;
}
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:

Extending the CalendarEvent

If you need, you can extend the CalendarEvent with an id to track more easily the selected items or any other information that you need that is missing from the default event. Here's an example:

export class CustomEvent extends CalendarEvent {
    id: number;
    location: string;
    formattedTime: string;

    constructor(id: number, title: string, location: string, startDate: Date, endDate: Date, isAllDay?: boolean, eventColor?: Color) {
        super(title, startDate, endDate, isAllDay, eventColor);
        this.id = id;
        this.location = location;
        const hours = startDate.getHours();
        const minutes = startDate.getMinutes();
        this.formattedTime = (hours < 10 ? "0" : "") + hours + ':' + (minutes < 10 ? "0" : "") + minutes;
    }
}

Then you can use the new type to populate the list of items that will be bound to RadCalendar's eventSource property:

let events: Array<CustomEvent> = new Array<CustomEvent>();
for (let i = 1; i < 10; i++) {
    startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + i % 2, 12 + i);
    endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + i % 2, 12 + i, 30);
    let eventLocation = i > 5 ? "at home" : "at the office";
    event = new CustomEvent(i, "event " + i, eventLocation, startDate, endDate, false, this.eventColors[i % 3]);
    events.push(event);
}
this.source = events;

Event View Modes

The events for each date cell are shown as dots (iOS) or squares with a summary (Android). RadCalendar allows you to show more information about the events by changing the eventsViewMode property. The default value is None meaning that there will be no additional event reperesentation coming out-of-the-box and the detailed information about events could be added through an additional ListView added below the RadCalendar and populated with information about events in a selected date. There are other event modes - Inline and Popover that present similar information within the calendar. Here are the available 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:

References

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.

• Populating With Data Example