将相关事件的色点放在一个日期上时遇到问题
Facing problem in putting color dots of relevant events on a single date
我在显示单个日期的事件点时遇到问题。但是,我设法将事件颜色显示为方框。但我想将其显示为一个点。这些事件来自 API。有什么建议可以解决这个问题吗?
当我单击特定日期时,它会从 API 中检索相应的事件并显示该特定日期的事件。颜色也来自 API 请求。我只需要用 API
中具有相关颜色的附加点来显示事件
Angular组件可以在Nativescript应用中使用吗?然后我可以使用 angular 组件!
这是日历组件的html文件!
<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 我有一个为 {N} Android 实现自定义事件呈现器的示例。您将必须扩展基础 class com.telerik.widget.calendar.events.EventRenderer
并使用 renderEvents
方法在日历单元格内绘制任何内容。该示例演示了如何绘制一个圆而不是默认的矩形来表示事件。您甚至可以使用绘画 api 添加更多点。
我在显示单个日期的事件点时遇到问题。但是,我设法将事件颜色显示为方框。但我想将其显示为一个点。这些事件来自 API。有什么建议可以解决这个问题吗?
当我单击特定日期时,它会从 API 中检索相应的事件并显示该特定日期的事件。颜色也来自 API 请求。我只需要用 API
中具有相关颜色的附加点来显示事件Angular组件可以在Nativescript应用中使用吗?然后我可以使用 angular 组件!
这是日历组件的html文件!
<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 我有一个为 {N} Android 实现自定义事件呈现器的示例。您将必须扩展基础 class com.telerik.widget.calendar.events.EventRenderer
并使用 renderEvents
方法在日历单元格内绘制任何内容。该示例演示了如何绘制一个圆而不是默认的矩形来表示事件。您甚至可以使用绘画 api 添加更多点。