#javascript #fullcalendar #fullcalendar-4
#javascript #полный календарь #полный календарь-4
Вопрос:
Я пытаюсь настроить календарь с несколькими представлениями, которые все идентичны, за исключением событий, отображаемых в каждом. Я могу удалить EventSources по идентификатору с помощью обратного вызова viewSkeleton Render, но я не могу добавить EventSource обратно в календарь.
Тщательно искал способы переключения видимости и тому подобное — но большинство результатов относятся к предыдущим версиям FullCalendar — пытаюсь выполнить это в версии 4.
Сокращенный тестовый пример: https://codepen.io/jacobcboe/pen/MReJep
На самом деле я пытаюсь сделать это с помощью Google Calendar EventSources, но для простоты использовал события массива для тестового примера.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'timeGrid' ],
views: {
view1: {
type: 'timeGrid',
duration: { days:7 },
buttonText: 'view1'
},
view2: {
type: 'timeGrid',
duration: { days:7 },
buttonText: 'view2'
},
view3: {
type: 'timeGrid',
duration: { days:7 },
buttonText: 'view3'
},
view4: {
type: 'timeGrid',
duration: { days:7 },
buttonText: 'view4'
}
},
defaultView: 'view1',
defaultDate: '2019-04-05',
header: {
left: 'view1,view2,view3,view4',
center: '',
right: ''
},
eventSources: [
{
id:'1',
events: [
{
title: 'All Day Event',
start: '2019-04-05'
},
{
title: 'Long Event',
start: '2019-04-06',
end: '2019-04-07'
}]
},
{
id:'2',
events:[
{
groupId: '999',
title: 'Repeating Event',
start: '2019-04-05T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2019-04-06T16:00:00'
},
{
title: 'Conference',
start: '2019-04-05',
end: '2019-04-10'
}]
},
{
id:'3',
events: [
{
title: 'Meeting',
start: '2019-04-09T10:30:00',
end: '2019-04-09T12:30:00'
},
{
title: 'Lunch',
start: '2019-04-08T12:00:00'
},
{
title: 'Meeting',
start: '2019-04-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2019-04-07T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-04-11'
}]
}
],
viewSkeletonRender: function(info) {
var eventSourceOne = calendar.getEventSourceById('1');
eventSourceOne.remove();
var eventSourceTwo = calendar.getEventSourceById('2');
eventSourceTwo.remove();
var eventSourceThree = calendar.getEventSourceById('3');
eventSourceThree.remove();
//also tried calendar.getEvents() with remove
var viewName = info.view
if(viewName.type =='view1'){
calendar.addEventSource(eventSourceOne);
//have also tried eventSourceOne.refetch()
}
if(viewName.type =='view2'){
calendar.addEventSource(eventSourceTwo);
}
if(viewName.type =='view3'){
calendar.addEventSource(eventSourceThree);
}
if(viewName.type =='view4'){
calendar.addEventSource(eventSourceOne);
calendar.addEventSource(eventSourceTwo);
calendar.addEventSource(eventSourceThree);
}
}
});
calendar.render();
}); html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
} <script src="https://fullcalendar.io/releases/timegrid/4.0.1/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.0.1/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.0.2/main.min.js"></script>
<script src="https://fullcalendar.io/releases/core/4.0.2/main.min.js"></script>
<link href="https://fullcalendar.io/releases/timegrid/4.0.1/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/daygrid/4.0.1/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/core/4.0.2/main.min.css" rel="stylesheet"/>
<div id='calendar'></div> Комментарии:
1. Почему вы хотите показывать разные события для каждого представления? Идея представлений заключается просто в том, чтобы предоставить разные способы представления одной и той же информации. Каков вариант использования для этого? FullCalendar на самом деле не предназначен для того, что вы описываете, хотя я предполагаю, что это возможно. Но сначала мне интересно, зачем это нужно
2. Я пытаюсь создать семейный календарь с отфильтрованными представлениями для каждого члена семьи (все события отображаются по умолчанию, но с кнопкой для отображения только событий из календаря одного человека). Очевидно, что это можно сделать в Google calendar, но это встроено на веб-сайт с другой информацией, которая будет отображаться в доме — так что это должно выглядеть лучше, чем Google calendar — отсюда fullcalendar.
3. Хорошо, но ничто из этого не требует от вас использования viewskeletonrender, насколько я могу видеть. Например, если пользователь переключается с представления «месяц» на «неделю», вам не нужно перезагружать события. Это просто другой способ отображения одних и тех же.
4. Если у вас есть список членов семьи, похоже, вы, вероятно, хотите отобразить список рядом с календарем и сделать их интерактивными. Нажатие на каждое из них приведет к запуску события, в котором вы добавляете / удаляете события этого человека из календаря (путем добавления / удаления источника событий, связанного с этим человеком)
5. Да — мне, конечно, не нужно использовать Views для достижения этой цели, это просто показалось простым способом получить кнопки в верхней части календаря. Я не думал, что будет иметь значение, что вызвало код — но я попробую это с помощью кнопок для добавления / удаления источников событий и посмотрю, работает ли это.