隐藏某些事件 fullcalendar

Question

我目前正在从事全日历 (v3) 项目；我是这个库的新手，也是 Javascript 的菜鸟，只知道一些基本知识。

首先：为了访问我的日历，我实现了一个登录会话（所以当你访问日历时，页面有一个 $_SESSION['user']，其中用户被保存为 'nomeUtente'）和我的日历 fecth 事件来自数据库的详细信息

nomeUtente（在本例中为 'dip7'）它是在有人登录时与 $_SESSION['nomeUtente'] 一致并保存新事件的变量

我还有两个复选框（orePersonali 和 Assenze） （实际的 $_SESSION ['nomeUtente'] 是 dip5)

这是他们的代码：

    <input type="checkbox" id="OP" name="calendario" value="OP" checked>
    <input type="checkbox" id="assenze" name="calendario" value="assenze">

目前，通过此 功能，两个复选框都可以隐藏和显示每个事件：

    $('#calendar').fullCalendar('render');
                function eventsHidden(context){
                    let x = $(".fc-event-container");                   
                    if (context.prop("checked") ) { 
                      x.css({
                        visibility: "visible"
                      });
                    } else {
                      x.css({
                        visibility: "hidden"
                      });
                    } 
                  };                  
                  function eventsHiddenA(context){ 
                    let x = $(".fc-event-container");                   
                    if (context.prop("checked")) { 
                      x.css({
                        visibility: "visible"
                      });
                    } else {
                      x.css({
                        visibility: "hidden"
                      });
                    } 
                  };

                  $("#OP").on("change", function () {
                    eventsHidden($(this))
                  });
                  $("#assenze").on("change", function () {
                    eventsHiddenA($(this))
                  });

dayRender 在完整日历部分召回：

dayRender: function(view, element,render, cell) {
                            render = !render ? (
                                false
                            ) : true
                            setTimeout(() => {
                                eventsHidden($("#OP"))
                                eventsHiddenA($("#assenze"))                                
                                render = false
                            }, 0)
                        }

我想做的是：当取消选中“Assenze”时，隐藏所有具有 'nomeUtente' != 来自 $_SESSION['nomeUtente'] 的事件，基本上隐藏到已登录的用户目前（以之前的画面为例'dip5'）

Answer 1

您可以使用中的答案并稍微调整它以从选中的复选框而不是从下拉列表中读取值：

var currentUser = "dip5"; //hard-coded for demo. For PHP use, replace with var currentUser = '<?php echo $_SESSION["nomeUtente"]; ?>';

$('#mycalendar').fullCalendar({
    defaultDate: "2015-05-01",
    events: [
        {
            title: 'Event 1',
            start: '2015-05-01',
            nomeUtente: 'dip7'
        },
        {
            title: 'Event 2',
            start: '2015-05-02',
            nomeUtente: 'dip5'
        },
        {
            title: 'Event 3',
            start: '2015-05-03',
            nomeUtente: 'dip7'
        },
        {
            title: 'Event 4',
            start: '2015-05-04',
            nomeUtente: 'dip5'
        },
        {
            title: 'Event 5',
            start: '2015-06-04',
            nomeUtente: 'dip7'
        },
        {
            title: 'Event 6',
            start: '2015-06-05',
            nomeUtente: 'dip5'
        }        
    ],
    eventRender: function eventRender( event, element, view ) {
        //get the values from all selected checkboxes
        var selections = [];
        $("input[name=calendario]:checked").each(function(){
            selections.push($(this).val());
        });
        
        var showEvent = false;
        if (selections.indexOf("OP") >= 0 && event.nomeUtente == currentUser) showEvent = true; //show if the OP box is ticked and the event belongs to the current user
        if (selections.indexOf("assenze") >= 0 && event.nomeUtente != currentUser) showEvent = true; //show if the assenze box is ticked and the event belongs to another user
        
        return showEvent;
    }
});

$('input[name=calendario]').on('change',function(){
    $('#mycalendar').fullCalendar('rerenderEvents');
})

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.min.css" />

OP<input type="checkbox" id="OP" name="calendario" value="OP" checked>
assenze<input type="checkbox" id="assenze" name="calendario" value="assenze">

<div id="mycalendar"></div>

N.B。这将适用于 fullCalendar 版本 2 和 3。它需要再次适应新版本。

隐藏某些事件 fullcalendar

Hide certain events fullcalendar

html

javascript

fullcalendar