如何在fullcalendar(jquery插件)中绑定年份和月份下拉列表?

时间:2017-04-19 11:41:49

标签: jquery-plugins fullcalendar

我的要求是将这两个下拉列表与fullcalendar绑定并反映更改。 我已经搜索了很多关于将自定义下拉列表绑定到fullcalendar但尚未获得成功的信息!!

所以感谢任何帮助。

Need these dropdown bind with the fullcalendar

1 个答案:

答案 0 :(得分:2)

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

    $calendar.fullCalendar({
        viewRender: function() {
            buildMonthList();
        }
    });

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

    buildMonthList();

    function buildMonthList() {
        $('#months').empty();
        var month = $calendar.fullCalendar('getDate');
        var initial = month.format('YYYY-MM');
        month.add(-6, 'month');
        for (var i = 0; i < 13; i++) {
            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');
            $months.append(opt);
            month.add(1, 'month');
        }
    }
});

请检查此小提琴的月份和年份下拉菜单以获取完整日历。

https://jsfiddle.net/L6a5LL5b/