Мне нужно иметь возможность установить «диапазон дат» с FullCalendar, используя представление «Список».Под диапазоном дат я имею в виду возможность ввода с использованием 2 текстовых полей, 2 разных дат, например:
Текстовое поле 1: 2018-05-05
до
Текстовое поле 2: 2018-05-06
И для фильтрации содержимого календаря, используя представление списка, чтобы отобразить результат и показать события, соответствующие этому диапазону дат.
Вот мойкод для части FullCalendar:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listMonth, month,agendaWeek,agendaDay'
},
defaultView: 'listMonth',
locale: 'fr',
contentHeight: 600,
navLinks: true, // can click day/week names to navigate views
selectable: false,
eventRender: function(event, element, view) {
element.find('.fc-widget-header').append("<div style='color:#fff'>Conférencier choisi</div>");
element.find('.fc-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>");
return ['all', event.status].indexOf($('#filter-status').val()) >= 0 &&
['all', event.client].indexOf($('#filter-contact').val()) >= 0 &&
['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 &&
['', event.numero].indexOf($('#numero').val()) >= 0;
},
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Example',
start: '2018-05-05',
end: '2018-05-06',
color: '#ff0000',
lieu: 'Montreal',
numero: '300445',
conferencier: 'John Doe',
photoconferencier: 'http://www.example.com/img/profile.jpg',
lienconferencier: 'http://www.example.com/profile/link.html',
url: 'http://www.google.com'
},
{
title: 'Example2',
start: '2018-05-08',
end: '2018-05-010',
color: '#ff0000',
lieu: 'New York',
numero: '300446',
conferencier: 'Steve Jobs',
photoconferencier: 'http://www.example.com/img/profile2.jpg',
lienconferencier: 'http://www.example.com/profile/link2.html',
url: 'http://www.apple.com'
},
],
});
А вот мои текстовые поля:
<input type="text" placeholder="Date : From" id="start_date">
<input type="text" placeholder="Date : To" id="end_date">
Я думаю, мне нужно было бы добавить что-то вроде этого:
$('#start_date').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
$('#end_date').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
Но я не уверен.Также имейте в виду, что есть и другие фильтры.Отсюда «eventRender» часть кода с кучей вещей.Поэтому мне нужно убедиться, что фильтр «dateRange» не сломает другие фильтры.
Я читал о «visibleRange» на сайте FullCalendar, но я не понимаю, как я могу заставить его работать на основе того, чтовведены в 2 текстовых поля «диапазон дат».Я думаю, что было бы неплохо также отключить другие установленные мной представления (чтобы показать результат только в представлении списка).
Есть идеи, как заставить это работать?Я как бы потерялся здесь.Большое спасибо
РЕДАКТИРОВАТЬ:
Я пробовал этот код:
$('#start_date').on('change', function () {
$('#calendar').fullCalendar('changeView', 'list', {
start: 2018-05-10,
end: 2018-05-30
});
});
, который работает.По сути, это то, что я ввожу новую дату в текстовое поле с идентификатором «start_date» (который использует скрипт datepicker, поэтому я пошел с «при изменении»), он меняет представление на представление списка, что здорово, и отображает только события между датой, которую я ввел.Чтобы сделать его динамичным, я сделал это:
$('#start_date').on('change', function () {
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
$('#calendar').fullCalendar('changeView', 'list', {
start: start_date,
end: end_date
});
});
У меня есть 2 поля: «start_date» и «end_date».Я думал, что установка параметров «начало» и «конец» в коде changeView для FullCalendar будет обновляться автоматически каждый раз, когда я выбираю новую дату, но это не работает.На самом деле, это работает частично.Если я сначала введу «end_date», а затем «start_date», он будет фильтроваться и отлично работать, показывая правильный диапазон дат.Но после этого я не могу изменить его на другой dateRange, изменив даты в полях.Это действует так, вероятно, потому, что моя функция «на изменении», основанная на элементе «#start_date».Поэтому я должен сначала выбрать end_date, чтобы убедиться, что он фильтрует и изменить представление с чем-то в опции «end».
Есть идеи, что я делаю неправильно?
Спасибо
РЕДАКТИРОВАТЬ 2:
Я попытался изменить функцию с события «изменить» на «щелчок» и добавить кнопку «поиск».Здесь есть 2 вопроса.1 - Работает только один раз.Если я произвожу поиск, затем изменю дату и снова нажимаю кнопку «# search-range», он ничего не сделает.
2 - Когда он работает (первый раз после загрузки страницы),например, если я выберу период с 1 по 5 мая, то по некоторым причинам будет показан диапазон с 1 по 4 мая.Вот мой код снова:
$('#search-range').on('click', function () {
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
$('#calendar').fullCalendar('changeView', 'list', {
start: start_date,
end: end_date
});
});
Есть идеи, что происходит?Еще раз спасибо