Hide certain events fullcalendar

Question

I'm currently working on a fullcalendar (v3) project; I'm new to this library and also a noob in Javascript, just know basic stuff.

First at all: to access my calendar I implemented a login session (so when u access the calendar the page has a $_SESSION['user'], where user is saved as 'nomeUtente') and my calendar fecth events from a database with this details

nomeUtente (in this case 'dip7') it's a variable saved that coincide with the $_SESSION['nomeUtente'] at the moment someone is logged in and save a new Events

I also have two checkboxes (orePersonali and Assenze) (the actual $_SESSION['nomeUtente'] is dip5)

This is their code:

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

At the moment both of the checkboxes hide and show every events, throught this function:

    $('#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))
                  });

Recalled in the fullcalendar section by dayRender:

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

Want i would like to do is: when "Assenze" is unchecked to hide all events that have a 'nomeUtente' != from $_SESSION['nomeUtente'], basically to the user who's logged at the moment (in the case of the previusly screen 'dip5')

Answer 1

You can use the answer at https://stackoverflow.com/a/29993265/5947043 and adapt it very slightly just to read the values from the checked checkboxes instead of from a dropdown list:

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. This will work on fullCalendar versions 2 and 3. It would need adapting again for newer versions.