RadCalendar - Populating 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 an events source.

The CalendarEvent Class

Feeding events into RadCalendar is done via instances of the class. The 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 class you need to import the calendar module into your .ts file as shown below:

import { CalendarEvent } from 'nativescript-ui-calendar';

Create an Events Service and Bind the Events to RadCalendar

Assuming we have imported the calendar module as instructed above, we can now create a service that will provide the events:

@Injectable()
export class CalendarEventsService {
    getCalendarEvents(): Array<CalendarEvent> {
        let now = new Date();
        let startDate: Date,
            endDate: Date,
            event: CalendarEvent;
        let colors: Array<Color> = [new Color(200, 188, 26, 214), new Color(220, 255, 109, 130), new Color(255, 55, 45, 255), new Color(199, 17, 227, 10), new Color(255, 255, 54, 3)];
        let events: Array<CalendarEvent> = new Array<CalendarEvent>();
        for (let i = 1; i < 10; i++) {
            startDate = new Date(now.getFullYear(), now.getMonth(), i * 2, 1);
            endDate = new Date(now.getFullYear(), now.getMonth(), (i * 2), 3);
            event = new CalendarEvent("event " + i, startDate, endDate, false, colors[i * 10 % (colors.length - 1)]);
            events.push(event);
            if (i % 3 === 0) {
                event = new CalendarEvent("second " + i, startDate, endDate, true, colors[i * 5 % (colors.length - 1)]);
                events.push(event);
            }
        }
        return events;
    }
}

We can then use the getCalendarEvents() method of our service to populate the calendar using its eventSource property:

<GridLayout rows="*, 100" orientation="vertical" tkExampleTitle tkToggleNavButton>
    <RadCalendar [eventSource]="eventSource" (dateSelected)="onDateSelected($event)" row="0"></RadCalendar>
    <ListView [items]="myItems" row="1" >
        <ng-template let-item="item">
            <StackLayout class="listRow">
                <Label [text]="item.title"></Label>      
            </StackLayout>      
        </ng-template>
    </ListView>
</GridLayout>

@Component({
    moduleId: module.id,
    selector: "tk-calendar-populating-with-data",
    templateUrl: "calendar-populating-with-data.component.html",
    styleUrls: ["calendar-populating-with-data.component.css"],
    providers: [CalendarEventsService]
})

export class CalendarPopulatingWithDataComponent implements OnInit {
    private _events: Array<CalendarEvent>;
    private _listItems: Array<CalendarEvent>;

    constructor(private _calendarService: CalendarEventsService) {

    }

    get eventSource() {
        return this._events;
    }

    get myItems(): Array<CalendarEvent> {
        return this._listItems;
    }

    set myItems(value) {
        this._listItems = value;
    }

    ngOnInit() {
        this._events = this._calendarService.getCalendarEvents();
    }

    onDateSelected(args: CalendarSelectionEventData) {
        const calendar: RadCalendar = args.object;
        const date: Date = args.date;
        const events: Array<CalendarEvent> = calendar.getEventsForDate(date);
        this.myItems = events;
    }
}

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);
}
return events;

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.