Можно делать то, что вы хотите, но делать это с данными так, как вы это структурировали, затрудняет работу и работать против того, как спроектирован fullCalendar.
По сути, то, что у вас естьвыше список событий. Логично, что если в календаре существует событие, то мы можем принять это как означающее, что временной интервал недоступен. Нет проблем там. Но если событие существует в месте, где должен быть доступен временной интервал, это не очень хорошо, потому что а) пользователю, на первый взгляд, кажется, что слот занят, и б) это усложняет для нас какпрограммисты позволяют пользователю выбирать этот слот.
Теперь fullCalendar предоставляет функциональные возможности выбора слотов, позволяя пользователю щелкнуть по пустому разделу календаря и программисту определить время, которое они выбрали, и создать событие изЭто. Вы должны воспользоваться этим.
Таким образом, по сути, концепция, которую мы должны использовать:
1) слоты, которые недоступны, потому что кто-то их заполнил, представлены событием, охватывающим этот слот.
2) слоты, которые недоступны, поскольку находятся за пределами разрешенного времени (например, рабочее время или время работы и т. Д.), Становятся недоступными для выбора другими средствами (например, настройками businessHours).
3) слоты, которыевсе еще доступны, оставлены пустыми для выбора пользователем.
Базовая демонстрация:
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["interaction", "dayGrid", "timeGrid"],
header: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay"
},
slotDuration: {
"hours": 1
},
minTime: "08:00",
maxTime: "22:00",
defaultView: "timeGridDay",
selectable: true,
events: [{
"title": "Appointment 1",
"start": "2019-09-30 10:00",
"end": "2019-09-30 11:00",
},
{
"title": "Appointment 2",
"start": "2019-09-30 13:00",
"end": "2019-09-30 14:00",
},
{
"title": "Appointment 2",
"start": "2019-09-30 14:00",
"end": "2019-09-30 15:00",
}
],
selectConstraint: "businessHours",
select: function(info) {
calendar.addEvent({
"title": "Demo event",
start: info.start,
end: info.end
});
},
businessHours: { // Mon - Fri, 9-5
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '09:00',
endTime: '19:00',
}
});
calendar.render();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css" rel="stylesheet"/>
<div id="calendar"></div>
PS Если businessHours не дает достаточной гибкости для отключения слотов, которые никогда не могут быть выбраны, вы можете рассмотреть альтернативы, используя validRange или фоновые события (вместе с подходящим правилом selectOverlap ). Какой из них вы используете, будет зависеть от точных требований. Эти требования уже задавались ранее, и вы можете найти предыдущие вопросы на этом сайте, показывающие возможные решения.