gpt4 book ai didi

javascript - 使用复选框过滤 FullCalendar 事件(使用 javascript 的客户端)

转载 作者:行者123 更新时间:2023-11-29 16:07:50 25 4
gpt4 key购买 nike

我有一个运行良好的全日历脚本,它通过 eventRender 根据数据属性向事件添加 css 类。我现在需要用复选框过滤这些特定的属性,但我完全不知道该怎么做!

我的脚本如下所示:

<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
eventRender: function(calEvent, element, view) {
if (calEvent.risk == "normal") {
element.css('background-color', '#99FF99');
}
if (calEvent.risk == "event") {
element.css('background-color', '#415eec');
}
if (calEvent.risk == "whisper") {
element.css('background-color', '#D7CDD5');
}
},
allDaySlot: true,
displayEventTime: true,
displayEventEnd: true,
editable: false,
firstDay: 1,
weekNumbers: true,
selectable: false,
weekNumberCalculation: "ISO",
eventLimit: true,
events: 'parts/events22.php'
});
});
</script>

html 复选框:

<div class="checkbox">
<label><input type="checkbox" value="normal">Normal</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="event">Event</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="whisper">Whisper</label>
</div>

有人知道如何将复选框值连接到 calEvent.risk,即特定数据属性以便过滤它们吗?或者有人对使用 fullcalendar 进行多选过滤有不同的想法?如果有任何帮助,我将不胜感激!

最佳答案

在复选框上设置更改处理程序以重新呈现事件。 eventRender 返回 false 使其无法显示,因此创建一个过滤器函数以获取检查的值并返回 event.risk 是否在这些值中

    $(document).ready(function() {
$('#calendar').fullCalendar({
eventRender: function(calEvent, element, view) {
if (calEvent.risk == "normal") {
element.css('background-color', '#99FF99');
}
if (calEvent.risk == "event") {
element.css('background-color', '#415eec');
}
if (calEvent.risk == "whisper") {
element.css('background-color', '#D7CDD5');
}
return filter(calEvent); // Only show if appropriate checkbox is checked
},
allDaySlot: true,
displayEventTime: true,
displayEventEnd: true,
editable: false,
firstDay: 1,
weekNumbers: true,
selectable: false,
weekNumberCalculation: "ISO",
eventLimit: true,
events: 'parts/events22.php',
events: [{
start: moment().add(1, 'day'),
title: 'Normal',
risk: 'normal'
}, {
start: moment().add(2, 'day'),
title: 'Event',
risk: 'event'
}, {
start: moment().add(3, 'day'),
title: 'Whisper',
risk: 'whisper'
}]
});

/* When a checkbox changes, re-render events */
$('input:checkbox.calFilter').on('change', function() {
$('#calendar').fullCalendar('rerenderEvents');
});
});

function filter(calEvent) {
var vals = [];
$('input:checkbox.calFilter:checked').each(function() {
vals.push($(this).val());
});
return vals.indexOf(calEvent.risk) !== -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css" rel="stylesheet"/>
<div class="checkbox">
<label>
<input class='calFilter' type="checkbox" value="normal" checked>Normal</label>
</div>
<div class="checkbox">
<label>
<input class='calFilter' type="checkbox" value="event">Event</label>
</div>
<div class="checkbox">
<label>
<input class='calFilter' type="checkbox" value="whisper">Whisper</label>
</div>
<div id='calendar'></div>

关于javascript - 使用复选框过滤 FullCalendar 事件(使用 javascript 的客户端),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36841659/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com