Cara untuk melumpuhkan penyeretan acara dalam FullCalendar untuk melaraskan tempoh

Question

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:

<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>

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)
  };

Answer 1

Jadi untuk membetulkannya, seperti yang dikatakan @ADyson, cuma tambahkan atribut selectAllow pada objek calendarOptions anda: pilihAllow: this.handleDragEvent.bind(this)

//您的其他属性...
    selectAllow: 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;
  }