I am facing problem in showing dots of events on a single date. However, I managed to display event color as a square box. But I want to display it as a dot. The events are coming from the API. Any suggestions how can I overcome this problem?
When I click on a particular date, it retrieves the corresponding events from the API and shows the events on that particular date. The color is also coming from the API request. I just need to show the events with the additional dots with the relevant color from the API
Can Angular component be used in Nativescript app? Then I could have used angular component!
This is the html file of calendar component!
<StackLayout row="0">
<RadCalendar [monthViewStyle]="monthViewStyle" [eventSource]="eventSource" [selectedDate]="defaultDate"
(dateSelected)="onDateSelected($event)" row="0" (navigatedToDate)="onNavigatedToDate($event)"></RadCalendar>
</StackLayout>
bindEventsInCalender(date: string) {
this._calendarApiService.getCalendarData(date).subscribe((data: any) => {
var listCal = data;
let event: CalendarEvent;
this.calendarEvents = [];
let events: Array<CalendarEvent> = new Array<CalendarEvent>();
for (let i = 0; i < listCal.length; i++) {
// console.log(new Date(listCal[i].date));
event = new CalendarEvent(
listCal[i].title,
new Date(listCal[i].date),
new Date(listCal[i].date),
false,
new Color(listCal[i].colour)
);
// this.calendarEvents.push(new CalendarClass(new Date(listCal[i].date), listCal[i].colour, listCal[i].title, listCal[i].statusid, listCal[i].id));
this.updateCalendarEvent(listCal[i]);
events.push(event);
}
// console.log(this.calendarEvents);
if (this._events_mirror.length > 0) {
this._events_mirror.forEach(element => {
events.push(element);
});
}
this._events = events;
if (this.appRunFirstTime) {
this.appRunFirstTime = false;
this.defaultDate = new Date();
}
});
}
Here I have an example for implementing custom event renderer for {N} Android. You will have to extend the base class com.telerik.widget.calendar.events.EventRenderer
and use the renderEvents
method to draw anything within the calendar cell. The example demonstrates how you can draw a circle instead of default rectangular for denoting events. You may even add more dots with the paint apis.