Фильтр полного календаря по className
Я настроил несколько фильтров выбора для моего проекта Fullcalendar. Я могу фильтровать по нескольким значениям событий в моем JSON, но я не могу заставить его фильтровать по className,
Может кто-нибудь сказать мне, что я делаю не так?
Вот код, который я использую, и вот jsfiddle, который повторяет проблему.
<select id="type_selector">
<option value="all">All types</option>
<option value="university">University</option>
<option value="polytech">Polytech</option>
<option value="highschool">High School</option>
</select>
<select id="state_selector">
<option value="all">All types</option>
<option value="CA">California</option>
<option value="MI">Michigan</option>
<option value="VT">Vermont</option>
</select>
<select id="color_selector">
<option value="all">All colors</option>
<option value="red">Red schools</option>
<option value="orange">Orange schools</option>
<option value="green">Green schools</option>
</select>
<div>
<div id='calendar'></div>
</div>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
year: 2016,
month: 08,
date: 25,
slotMinutes: 15,
editable: true,
events: [{
title: 'Michigan University',
start: '2016-09-26',
type: 'university',
state: 'MI',
className: 'red'
}, {
title: 'California Polytechnic',
start: '2016-09-27',
type: 'polytech',
state: 'CA',
className: 'orange'
}, {
title: 'Vermont University',
start: '2016-09-28',
type: 'university',
state: 'VT',
className: 'red'
}, {
title: 'Michigan High School',
start: '2016-09-29',
type: 'highschool',
state: 'MI',
className: 'green'
}, {
title: 'Vermont High School',
start: '2016-09-30',
type: 'highschool',
state: 'VT',
className: 'green'
}, {
title: 'California High School',
start: '2016-09-30',
type: 'highschool',
state: 'CA',
className: 'green'
}],
eventRender: function eventRender(event, element, view) {
return ['all', event.type].indexOf($('#type_selector').val()) >= 0
&& ['all', event.state].indexOf($('#state_selector').val()) >= 0
&& ['all', event.className].indexOf($('#color_selector').val()) >= 0
}
});
$('#type_selector').on('change', function() {
$('#calendar').fullCalendar('rerenderEvents');
})
$('#state_selector').on('change', function() {
$('#calendar').fullCalendar('rerenderEvents');
})
$('#color_selector').on('change', function() {
$('#calendar').fullCalendar('rerenderEvents');
})
});
</script>
1 ответ
Ваша проблема называется "className". className это свойство DOM, поэтому, когда вы пытаетесь получить доступ event.className вы на самом деле не обращаетесь к свойству события (красное, оранжевое и т. д.), а к свойству DOM, которое возвращает что-то вроде ['red'],
Если вы изменяете className на любое другое (не зарезервированное, не свойство), это должно быть исправлено (проверьте обновленный jsfiddle).
Конечно, это означает, что цвет фона каждого события теперь возвращается к стандартному синему. Вы можете исправить это, установив свойства backgroundColor а также borderColor (проверить Event Object документация), как таковая:
events: [{
title: 'Michigan University',
start: '2016-09-26',
type: 'university',
state: 'MI',
cName: 'red',
backgroundColor: 'red',
borderColor: 'red'
}]
Вы можете упростить все это и просто заменить className за backgroundColor так как это свойство возвращает строку с именем цвета фона (которое соответствует вашим параметрам выбора).
Таким образом, вы бы получили что-то вроде этого ( скрипка):
<select id="type_selector">
<option value="all">All types</option>
<option value="university">University</option>
<option value="polytech">Polytech</option>
<option value="highschool">High School</option>
</select>
<select id="state_selector">
<option value="all">All types</option>
<option value="CA">California</option>
<option value="MI">Michigan</option>
<option value="VT">Vermont</option>
</select>
<select id="color_selector">
<option value="all">All colors</option>
<option value="red">Red schools</option>
<option value="orange">Orange schools</option>
<option value="green">Green schools</option>
</select>
<div>
<div id='calendar'></div>
</div>
<script>
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
year: 2016,
month: 8,
date: 25,
slotMinutes: 15,
editable: true,
events: [{
title: 'Michigan University',
start: '2016-09-26',
type: 'university',
state: 'MI',
backgroundColor: 'red',
borderColor: 'red'
}, {
title: 'California Polytechnic',
start: '2016-09-27',
type: 'polytech',
state: 'CA',
backgroundColor: 'orange',
borderColor: 'orange'
}, {
title: 'Vermont University',
start: '2016-09-28',
type: 'university',
state: 'VT',
backgroundColor: 'red',
borderColor: 'red'
}, {
title: 'Michigan High School',
start: '2016-09-29',
type: 'highschool',
state: 'MI',
backgroundColor: 'green',
borderColor: 'green'
}, {
title: 'Vermont High School',
start: '2016-09-30',
type: 'highschool',
state: 'VT',
backgroundColor: 'green',
borderColor: 'green'
}, {
title: 'California High School',
start: '2016-09-30',
type: 'highschool',
state: 'CA',
backgroundColor: 'green',
borderColor: 'green'
}],
eventRender: function eventRender(event, element, view) {
return ['all', event.type].indexOf($('#type_selector').val()) >= 0
&& ['all', event.state].indexOf($('#state_selector').val()) >= 0
&& ['all', event.backgroundColor].indexOf($('#color_selector').val()) >= 0;
}
});
$('#type_selector').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
$('#state_selector').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
$('#color_selector').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
</script>
Есть другой способ, не меняя слишком много кода, но вам нужно быть осторожным с этим. поскольку event.className возвращает массив с именем класса, вы можете просто изменить
eventRender: function eventRender(event, element, view) {
return ['all', event.type].indexOf($('#type_selector').val()) >= 0
&& ['all', event.state].indexOf($('#state_selector').val()) >= 0
&& ['all', event.className].indexOf($('#color_selector').val()) >= 0
}
к
eventRender: function eventRender(event, element, view) {
return ['all', event.type].indexOf($('#type_selector').val()) >= 0
&& ['all', event.state].indexOf($('#state_selector').val()) >= 0
&& ['all', event.className[0]].indexOf($('#color_selector').val()) >= 0
}
Обратите внимание [0] перед event.className, Таким образом, вы сравните значение параметра с именем первого класса.
Вам нужно быть осторожным, потому что, если у вас более одного класса, первый элемент может не соответствовать значению опций выбора.
Проверьте это jsfiddle