So deaktivieren Sie das Ziehen von Ereignissen in FullCalendar, um die Dauer anzupassen

Question

Hallo, ich verwende einen vollständigen Kalender mit Angular und möchte es so gestalten, dass der Benutzer, wenn er auf einen leeren Zeitplan im Kalender klickt (es ist ein Wochenkalender mit 15-Minuten-Intervallen für jedes Datum), „Klicken“ gedrückt halten und definieren kann die Dauer der Veranstaltung. Leider kann mir chatpgt in diesem Fall nicht weiterhelfen, da es nur Informationen ab 2020 anzeigt und die Bibliothek bis heute noch aktualisiert wird.

Das ist mein HTML-Code:

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

Dies ist meine .ts-Kalenderoptionsdefinition:

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

所以为了解决这个问题，就像@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;
  }