CODEWITHSUNDEEP
jqueryfullcalendar
learningmode
learningmode

Reputation: 137

Filter Jquery Fullcalendar by month

IS there any way we can filter FullCalendar by month. So that we can select specific month from a dropdown and load the events.

Regards

Upvotes: 0

Views: 1279

Answers (1)

smcd
smcd

Reputation: 3265

You can generate a select with months and then use gotoDate

Demo @ https://jsfiddle.net/L6a5LL5b/

HTML

<div id='caljump'>
    <label for='months'>Jump to</label>
    <select id='months'></select>
</div>
<div id='calendar'></div>

JS

$(document).ready(function() {
    var $months = $('#months');
    var $calendar = $('#calendar');

    $calendar.fullCalendar({
        viewRender: function() {
            buildMonthList(); // update the jump list when the view changes
        }
    });

    $('#months').on('change', function() {
        $calendar.fullCalendar('gotoDate', $(this).val());
    });

    buildMonthList(); // set initial jump list on load

    function buildMonthList() {
        $('#months').empty(); // clear jump list
        var month = $calendar.fullCalendar('getDate');
        var initial = month.format('YYYY-MM'); // where are we?
        month.add(-6, 'month'); // 6 months past
        for (var i = 0; i < 13; i++) { // 6 months future
            var opt = document.createElement('option');
            opt.value = month.format('YYYY-MM-01');
            opt.text = month.format('MMM YYYY');
            opt.selected = initial === month.format('YYYY-MM'); // current selection
            $months.append(opt);
            month.add(1, 'month');
        }
    }
});

Upvotes: 1

Related Questions