Show/Hide events on fullcalendar using javascript

Question

I'm making a religious calendar for a project that shows different events for all major religions. I'm using full calendar, and I have a "religion key" at the top of the calendar, and I want to make it so that when I click, for example, Jewish, it will hide all religious events/holidays on the calendar that don't pertain to the Jewish faith. I'm having some trouble. My thinking was that I would set the ".fc-event" class in css to display:none" and then have a class called .show that would be display:block. and toggle that class / remove that class when the user clicks the menu item that pertains to the holiday. Is there a better / easier way to do this? would love some guidance/tips/help :) thank you.

Here is my code for the calendar js (using made up dates obviously):

events: [
        {
            title: 'xmas',
            start: '2017-03-19',
            className: 'catholic show',
            description: 'blablablablabla'
        },
        {
            title: 'Hanukkah',
            start: '2017-03-19',
            className: 'jewish show',
            description: 'blablablabla'
        },
        {
            title: 'Hindu Holiday',
            start: '2017-03-24',
            end: '2017-03-27',
            className: 'hindu show',
            description: 'blablablabla'
        }
    ]
});

$('.calendar-nav a').each(function() {

    $(this).on('click', function(e) {
        e.preventDefault();

        var x = $(this).attr('rel');

        $('.fc-event-container').each(function() {

            $(this).removeClass('show');

            if($(this).hasClass(x)) {

                $(this).addClass('show');
            }
        });
    })
});

$('.show-all a').on('click', function() {
    $('.fc-event-container').each(function() {
        if(!$(this).hasClass('show')) {
            $(this).toggleClass('show');
        }
    });
});
});

And the php code for the calendar and calendar-key:

<nav class="calendar-nav">
<ul class="menu">
    <li class="christianity-text"><a href="#" rel="christian">><img src="/images/calendar/christianity.png" />CHRISTIAN</a>
        <ul class="sub-menu">
            <li><a href="#">Catholic</a></li>
            <li><a href="#">Protestant</a></li>
            <li><a href="#">Coptic</a></li>
            <li><a href="#">Mormon</a></li>
            <li><a href="#">Neo</a></li>
            <li><a href="#">Anglican</a></li>
            <li><a href="#">Celtic</a></li>
            <li><a href="#">Jehova's Witness</a></li>
        </ul>
    </li>
    <li class="buddhist-text"><a  href="#" rel="buddhist"><img src="/images/calendar/buddhism.png" />BUDDHIST</a></li>
    <li class="hindu-text"><a  href="#" rel="hindu"><img src="/images/calendar/hindu.png" />HINDU</a></li>
    <li class="jewish-text"><a  href="#" rel="jewish"><img src="/images/calendar/jewish.png" />JEWISH</a></li>
    <li class="islam-text"><a  href="#" rel="islam"><img src="/images/calendar/islam.png" />ISLAM</a></li>
    <li class="sikh-text"><a  href="#" rel="sikh"><img src="/images/calendar/sikh.png" />SIKH</a></li>

    <li class="pagan-text"><a  href="#" rel="pagan"><img src="/images/calendar/pagan.png" />PAGAN</a></li>
    <li class="wiccan-text"><a  href="#" rel="wiccan"><img src="/images/calendar/wiccan.png" />WICCAN</a></li>
    <li class="other-text"><a  href="#" rel="other"><img src="/images/calendar/other.png" />OTHER</a></li>
    <li class="all-text"><a href="#" rel="all">ALL</a></li>
</ul>
</nav>

<div id='calendar'></div>

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

You can do the following,

A. You can add/remove a class that has display:none and display:block

$(this).addClass('hideClass'); and $(this).addClass('showClass');

css

hideClass
{ display:none; }

showClass
{ display:block; }

B. you can toggle hide and show

$(this).hide(); and $(this).show();

C. You can change the css property itself via using css variables. This is the better option, especially when you are redrawing your elements asynchronously.. the changes with the css stay.

be warned that chrome does not support this though, which leads us to...

D. Appending CSS files to override class

you can add a .css file with classes that have !important to override your current settings

$("head").append("<link id='yournewcss' href='hi-res.css' type='text/css' rel='stylesheet' />");

This is to ensure that if you redraw the page asynchronously, the property stays.

here are some other examples: http://stackoverflow.com/questions/40572157/change-css-root-variable-with-jquery-or-javascript — Malcolm Salvador, Mar 31 '17 at 00:09

score 0 · Answer 2 · answered Mar 31 '17 at 00:27

Think this sort of thing is a lot easier to manage with CSS and a tiny bit of JS. The example below is a sort of minimal use case version but the idea is the same.

/* 
Listen for clicks on the nav. Use each <a>'s "data-show"
property to determine which class to add to the #calendar.

That class, along with the CSS will determine which to show (hide, actually).

By default, all events are shown. Only when the #calendar element
gets a class associated with our CSS does anything change. 

Since we're using the :not() selector to _hide_ everything else
(instead of showing something specific) there's no need for 
any 'show all'. Once #calendar has 'show-all', the default CSS comes through.
*/

$('.calendar-nav').on('click', 'a', function(evt) {
  var showType = $(this).data('show');
  var $calendar = $('#calendar');
  if(showType !== undefined) {
    $calendar.attr('class', '').attr('class', 'show-' + showType);
  }
});

.show-hindu li:not(.hindu),
.show-pagan li:not(.pagan) 
/* ... continue ... */ {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="calendar-nav">
  <a href="#" data-show="hindu">Hindu</a>
  <a href="#" data-show="pagan">Pagan</a>
  <a href="#" data-show="all">All</a>
</nav>

<div id="calendar">
  <ul class="events">
    <li class="hindu">Hindu 1</li>
    <li class="pagan">Pagan 1</li>
    <li class="hindu">Hindu 2</li>
    <li class="pagan">Pagan 2</li>
    <li class="hindu">Hindu 3</li>
    <li class="pagan">Pagan 3</li>
  </ul>
</div>

score 0 · Answer 3 · answered Mar 31 '17 at 07:42

Another solution could be add a custom attribute 'religion' to events and save it to the database. Fetch the events from the database which has the religion that you want to show:

JavaScript:

...
$.ajax({
        url: 'process.php',
        type: 'POST',
        data: 'religion=1",
        async: false,
        success: function(response){
            json_events = response;

        }
});
$(#calendar).fullCalendar({
    events: JSON.parse(JSON.stringify(json_events)),

});

process.php

$religion = $_POST['religion'];
$query = "SELECT * FROM calendar WHERE religion='$religion'";
...

score 0 · Answer 4 · answered Mar 31 '17 at 08:21

I want to give you an advise ! I prefer doing with javascript logic .You have your event object so you can recreate object that your needed data

$(document).ready(function(){
var events = [
    {
        title: 'xmas',
        start: '2017-03-19',
        className: 'catholic show',
        description: 'blablablablabla'
    },
    {
        title: 'Hanukkah',
        start: '2017-03-19',
        className: 'jewish show',
        description: 'blablablabla'
    },
    {
        title: 'Hindu Holiday',
        start: '2017-03-24',
        end: '2017-03-27',
        className: 'hindu show',
        description: 'blablablabla'
    }
];
//init calendar 
$("#calendar").fullCalendar({
  events : events
});

$('.calendar-nav a').click(function(e) {    
        e.preventDefault();    
        var x = $(this).attr('rel');
        //if all, shows original events object
        if(x == "all") {
          newEvent = events;
        } else{
        var newEvent = checkEvent(x,events); //recreate object function
        }
        $('#calendar').fullCalendar('destroy');
        $("#calendar").fullCalendar({
          events : newEvent
        });
});
});

function checkEvent(x,events) {  
  var newEvent = [];
  for(var i in events) {
    var key = events[i].className.split(" ")[0];
    if(key == x) { //check same religious name
      newEvent.push(events[i]);
    }
  }
  return newEvent;
}

Show/Hide events on fullcalendar using javascript

4 Answers4