Comment désactiver le glissement d'événement dans FullCalendar pour ajuster la durée

Question

Salut, j'utilise un calendrier complet avec Angular et je veux faire en sorte que lorsque l'utilisateur clique sur un horaire vide dans le calendrier (c'est un calendrier hebdomadaire avec des intervalles de 15 minutes pour chaque date), il puisse maintenir Cliquez et définir la durée de l'événement. Malheureusement, chatpgt ne peut pas m'aider dans ce cas car il n'affiche que les informations de 2020 et la bibliothèque est toujours mise à jour à ce jour.

Voici mon code 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>

Voici la définition de mes options de calendrier .ts :

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

Donc, pour résoudre ce problème, comme @ADyson l'a dit, ajoutez simplement l'attribut selectAllow à votre objet CalendarOptions : selectAllow : this.handleDragEvent.bind(this)

//您的其他属性...
    selectAllow: this.handleDragEvent.bind(this)
    // ....

Ensuite, ajoutez la fonction dans votre classe, ma fonction vérifie si la durée du nouvel événement est supérieure à 15 minutes, si votre calendrier a un intervalle de temps différent, définissez la différence sur cet intervalle de temps

handleDragEvent(selectInfo: DateSelectArg): boolean {
    const diffInMilliseconds = Math.abs(selectInfo.end.getTime()- 
  selectInfo.start.getTime());
    const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60));

    return diffInMinutes <= 15;
  }