Hai, saya menggunakan kalendar penuh dengan Angular dan saya mahu menjadikannya supaya apabila pengguna mengklik pada jadual kosong dalam kalendar (ia adalah kalendar mingguan dengan selang 15 minit untuk setiap tarikh) mereka boleh 'menahan Klik dan tentukan tempoh acara. Malangnya, chatpgt tidak dapat membantu saya dalam kes ini kerana ia hanya menunjukkan maklumat pada 2020 dan perpustakaan masih dikemas kini sehingga hari ini.
Ini kod html saya:
{{ arg.timeText }} {{ arg.event.title }}
Ini adalah definisi Pilihan kalendar .ts saya:
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) };
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jadi untuk membetulkannya, seperti yang dikatakan @ADyson, cuma tambahkan atribut selectAllow pada objek calendarOptions anda: pilihAllow: this.handleDragEvent.bind(this)
Kemudian, tambahkan fungsi dalam kelas anda, fungsi saya mengesahkan jika tempoh acara baharu melebihi 15 minit, jika kalendar anda mempunyai selang masa yang berbeza, tetapkan perbezaan pada selang masa itu
handleDragEvent(selectInfo: DateSelectArg): boolean { const diffInMilliseconds = Math.abs(selectInfo.end.getTime()- selectInfo.start.getTime()); const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60)); return diffInMinutes <= 15; }