Блог

Как бы я мог запретить пользователям нажимать на фоновые события, которые выделены серым цветом в полном календаре?

Для моего текущего календаря я пытаюсь отобразить доступные заказы для репетиторской компании, и в настоящее время у меня есть возможности репетитора и уроки репетитора

В настоящее время я могу разрешить пользователям не нажимать на серые области из следующего массива:

 let availabilities = [{
      groupId: "lesson-available",
      daysOfWeek: ["1"],
      startTime: "12:00:00",
      endTime: "15:00:00",
      display: "inverse-background",
      color: "#ccc",
    },
    {
      groupId: "lesson-available",
      daysOfWeek: ["2"],
      startTime: "15:00:00",
      endTime: "16:00:00",
      display: "inverse-background",
      color: "#ccc",
    },
];
 

Но я хотел бы иметь возможность сделать следующие уроки недоступными в календаре и не быть интерактивными:

 let lessons = [{
   groupId: "lesson-unavailable",
   start: "2021-01-18T13:00:00",
   end: "2021-01-18T14:00:00",
   display: "background",
   color: "#ccc",
},
{
   groupId: "lesson-unavailable",
   start: "2021-01-19T15:00:00",
   end: "2021-01-19T16:00:00",
   display: "background",
   color: "#ccc",
}
];
 

Мой код для моего календаря следующий:

 <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        headerToolbar={{
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        }}
        height="auto"
        initialView="timeGridWeek"
        editable={true}
        eventColor="#6DCBCA"
        selectable={true}
        selectMirror={true}
        dayMaxEvents={true}
        allDaySlot={true}
        weekends={true}
        events={currentEvents}
        select={handleDateSelect}
        eventContent={renderEventContent}
        eventClick={handleEventClick}
        eventDrop={handleEventDrop}
        eventDragStart={handleEventDragStart}
        eventDragStop={handleEventDragStop}
        selectConstraint={"lesson-available"}
      />
 

Как вы можете видеть, следующее ограничение

 selectConstraint={"lesson-available"}
 

не позволяет мне нажимать на что-либо еще, кроме массива availabilities, который является идеальным, но как я мог бы отредактировать это, чтобы также включить невозможность щелкнуть по массиву уроков (который отображается как фоновый, а не обратный фон)

На моем изображении:

Несмотря на то, что 3-4 вечера 19 января выделены серым цветом, я все еще могу щелкнуть по нему. Это именно то, что мне нужно исправить.

Для достижения этой цели вы можете использовать selectOverlap функцию в дополнение к вашей selectConstraint .

В документации для selectOverlap говорится:

… функция будет вызываться один раз каждый раз, когда выбор пользователя пересекается с событием. Если функция возвращает true, выбор будет разрешен. Если false, выбор не будет разрешен.

  selectOverlap: function(event) {
  return !(event.groupId == "lesson-unavailable");
},
 

Демонстрация: https://codepen.io/ADyson82/pen/ZEpwyqm

Документация: https://fullcalendar.io/docs/selectOverlap