【发布时间】：2022-10-06 04:25:15
【问题描述】：
我使用 PrimeNg p-fullCalendar 组件创建了一个日历组件。
它工作正常。下面是相同的屏幕截图，
下面是相同的代码sn-p，
HTML
<div class=\"my-calendar-div\">
<p-fullCalendar [events]=\"calendarEventsData\" [options]=\"options\">
</p-fullCalendar>
TS
import { Component, OnInit } from \'@angular/core\';
import { SharepointService } from \'../shared/Services/sharepoint.service\';
import dayGridPlugin from \'@fullcalendar/daygrid\';
import timeGridPlugin from \'@fullcalendar/timegrid\';
import interactionPlugin from \'@fullcalendar/interaction\';
@Component({
selector: \'app-calendar\',
templateUrl: \'./calendar.component.html\',
styleUrls: [\'./calendar.component.css\']
})
export class CalendarComponent implements OnInit {
calendarListData: any[] = [];
calendarEventsData: any[] = [];
events: any[];
options: any;
constructor(public sharepointService: SharepointService) { }
ngOnInit(): void {
this.options = {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
defaultDate: new Date().toISOString().split(\"T\")[0],
header: {
left: \'prev,next\',
center: \'title\',
right: \'dayGridMonth,timeGridWeek,timeGridDay\'
},
editable: false
};
this.sharepointService.getCalendarListData().then((res) => {
this.calendarListData = res;
console.log(\"CalendarListData...\", this.calendarListData);
this.bindEventCalendar();
}).catch((err) => {
console.log(\"Error while get Calendar list data\", err);
});
}
bindEventCalendar() {
let temp = [];
if (this.calendarListData && this.calendarListData.length > 0) {
for (let i = 0; i < this.calendarListData.length; i++) {
temp.push({
\"id\": this.calendarListData[i].ID,
\"title\": this.calendarListData[i].Title,
\"start\": this.calendarListData[i].EventDate,
\"end\": this.calendarListData[i].EndDate,
\"url\": null
});
}
this.calendarEventsData = temp;
console.log(\"CalendarEventsData...\", this.calendarEventsData);
}
else {
this.calendarEventsData = [];
}
}
}
现在，我需要实现工具提示功能，同时将鼠标悬停在应该在工具提示中显示的事件标题上。
任何人都可以帮助我吗？
标签： angular sharepoint fullcalendar primeng primeng-calendar