Search code examples
fullcalendar

Adding/Removing eventSources FullCalendar


I'd like to be able to filter events based on adding and removing eventSources. I can't find a good example of this being done.

.fullCalendar( 'addEventSource', source )
.fullCalendar( 'removeEventSource', source )

I'd like to have check boxes that toggle the execution of those functions. I can't seem to get the functionality working though.

$( "#target" ).click(function() { 
  $('#calendar').fullCalendar( 'removeEventSource', 'Event1' );
});

Here is my full code:

    $('#calendar').fullCalendar({
      header: {
    left: 'title',
    center: 'prev,next',
    right: 'month,agendaWeek,agendaDay,today'
},
       eventLimit: {
    'agenda': 4, // adjust to 6 only for agendaWeek/agendaDay
    'default': true // give the default value to other views
        },
          eventSources: [
            {
               title: 'Event1',
                url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"
            },

            {

                url: 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic'
            },
        {
        url: "https://www.google.com/calendar/feeds/ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com/public/basic"
            }
        ],

        eventClick: function(event) {
            // opens events in a popup window
            window.open(event.url, 'gcalevent', 'width=700,height=600');
            return false;
        },

        loading: function(bool) {
            if (bool) {
                $('#loading').show();
            }else{
                $('#loading').hide();
            }
        }

    });

Solution

  • Here is the full code I used to get this functionality:

    HTML:

    <form id="#calendar_list">
    <input class="checkbox" type="checkbox"  checked>Event Group 1<br> 
    <input class="checkbox1" type="checkbox"  checked>Event Group 2<br> 
    <input class="checkbox2" type="checkbox"  checked>Event Group 3<br> 
    </form>
    

    Javascript:

        $(".checkbox").change(function() {
        if(this.checked) {
          $('#calendar').fullCalendar( 'addEventSource',  'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic' );
        }
        else{
        $('#calendar').fullCalendar( 'removeEventSource',  'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic' );
        }
    });