JSFiddle - React, Tailwind, and code Playground

by pablop22

HTML

<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.6.4/fullcalendar/fullcalendar.css">
<script src="http://arshaw.com/js/fullcalendar-1.6.4/fullcalendar/fullcalendar.min.js"></script>
<div id="calendar"></div>

<span>Single Event Filter:</span>
<select id="filter">
    <option id="4">Empty</option>
    <option id="1">Christmas Eve</option>
    <option id="2">Christmas Day</option>        
    <option id="3">Boxing Day</option>        
</select>

<button id="boton">Reload</button>

JavaScript

// Initialize calendar
$('#calendar').fullCalendar({   
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    buttonText: {
        prev: 'Previous month',
        next: 'Next month'
    },
    columnFormat: {
        month: 'dddd'
    },
    editable: false,
    disableDragging: true,      
    events: [
        {
            id: 'event-1',
            title: 'Christmas Eve',
            start: '2013-12-24',
            allDay: true,
            category: '1'
        },
        {
            id: 'event-2',
            title: 'Christmas Day',
            start: '2013-12-25',
            allDay: true,
            category: '2'
        },
        {
            id: 'event-3',
            title: 'Boxing Day',
            start: '2013-12-26',
            allDay: true,
            category: '3'
        },
        {
            id: 'event-4',
            title: 'Evento 4',
            start: '2013-12-26',
            allDay: true,
            category: '2'
        }
    ]    
});

$("#filter").change(function () {
    $("#calendar").fullCalendar("removeEvents", filter);
});

function filter(event) {
    return $("#filter > option:selected").attr("id") === event.category;
};
$('#boton').click(function(){
  $("#calendar").fullCalendar( 'refetchEvents' );
});