您好,我正在使用 Angular 的完整日歷,我想這樣做,以便當(dāng)用戶單擊日歷中的空時(shí)間表(這是每周日歷,每個(gè)日期間隔為 15 分鐘)時(shí),他們可以'按住單擊并定義事件的持續(xù)時(shí)間。不幸的是,chatpgt 在這種情況下無法幫助我,因?yàn)樗伙@示截至 2020 年的信息,并且該庫迄今為止仍在不斷更新。
這是我的 html 代碼:
<div class='demo-app'> <div class='demo-app-main'> <full-calendar *ngIf='calendarVisible' [options]='calendarOptions' > <ng-template #eventContent let-arg> <b>{{ arg.timeText }}</b> <i>{{ arg.event.title }}</i> </ng-template> </full-calendar> </div> </div> </div>
這是我的 .ts calendarOptions 定義:
calendarOptions: CalendarOptions = { plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, ], headerToolbar: { left: 'prev,next today', center: 'title', right: 'timeGridWeek' }, initialView: 'timeGridWeek', slotMinTime: '08:00:00', slotMaxTime: '21:00:00', slotDuration: '00:15:00', slotLabelInterval: '00:15:00', slotLabelFormat: { hour: '2-digit', minute: '2-digit', hour12: true, }, contentHeight: 'auto', aspectRatio: 1.5, firstDay: 1, weekends: true, editable: false, selectable: false, selectMirror: true, dayMaxEvents: true, allDaySlot: false, dayHeaderFormat: { weekday: 'short', day: '2-digit', month: '2-digit' }, locales: [esLocale], businessHours: { daysOfWeek: [0, 1, 2, 3, 4, 5, 6], startTime: '09:00', endTime: '21:00', }, select: this.handleDateSelect.bind(this), eventClick: this.handleEventClick.bind(this), eventsSet: this.handleEvents.bind(this), datesSet: this.handleDatesSet.bind(this) };
所以為了解決這個(gè)問題,就像@ADyson所說的那樣,只需將selectAllow屬性添加到您的calendarOptions對象中: selectAllow: this.handleDragEvent.bind(this)
//您的其他屬性... selectAllow: this.handleDragEvent.bind(this) // ....
然后,在您的類中添加該函數(shù),我的函數(shù)驗(yàn)證新事件的持續(xù)時(shí)間是否超過15分鐘,如果您的日歷有不同的時(shí)間間隔,請將差異設(shè)置為該時(shí)間間隔
handleDragEvent(selectInfo: DateSelectArg): boolean { const diffInMilliseconds = Math.abs(selectInfo.end.getTime()- selectInfo.start.getTime()); const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60)); return diffInMinutes <= 15; }