您好，我正在使用Angular 的完整日曆，我想這樣做，以便當用戶單擊日曆中的空時間表（這是每週日曆，每個日期間隔為15 分鐘）時，他們可以'按住點擊並定義事件的持續時間。不幸的是，chatpgt 在這種情況下無法幫助我，因為它只顯示截至 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)
}; 
所以為了解決這個問題，就像@ADyson所說的那樣，只需將selectAllow屬性添加到您的calendarOptions物件中： selectAllow: this.handleDragEvent.bind(this)
//您的其他属性... selectAllow: this.handleDragEvent.bind(this) // ....然後，在您的類別中新增該函數，我的函數驗證新事件的持續時間是否超過15分鐘，如果您的日曆有不同的時間間隔，請將差異設為時間間隔
handleDragEvent(selectInfo: DateSelectArg): boolean { const diffInMilliseconds = Math.abs(selectInfo.end.getTime()- selectInfo.start.getTime()); const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60)); return diffInMinutes <= 15; }