如何在下拉列表中选择完整的日历月份和年份

时间:2016-05-15 19:20:28

标签: javascript jquery fullcalendar

我有一个完整的日历,我需要在下拉列表中显示其月份和年份,我知道这个问题已经被问到但仍然没有在那里回答。我是全新日历的新手,据我所知它现在更新了希望有一些最简单的方法来实现,而不是给它gotodate选项。我已经为日历创建了代码笔,如果有人这样做之前请更新我的codepen并给我链接非常感谢你...  demoToEdit 下面是我的代码我已经添加了完整日历的一些功能,因为你看我无法知道哪些事件我应该在年份和月份下拉,所以我还没有完成。

$(window).load(function(){

  $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    eventRender: function(event, element, view) {
        for (var i = 0; i<= event.products.length - 1; i++) {
            element.append('<span>'+event.products[i].name+'<span>');    
        };

    },

    events: [
                {
                    title: 'EventName',
                    start: '2016-05-02',
                    products:[
                                {

                                    name:'ProductName'
                                }
                            ]
                },
                {
                    title: 'Event',
                    start: '2016-05-03',
                    products:[
                                {

                                    name:'ProductName1'
                                },
                                {

                                    name:'ProductName2'
                                },
                                {

                                    name:'ProductName3'
                                },
                            ]
                },
                {
                    title: 'EventName',
                    start: '2016-05-13',
                    products:[
                                {

                                    name:'ProductName1'
                                },
                                {

                                    name:'ProductName2'
                                }
                            ]
                },
                {
                    title: 'Event',
                    start: '2016-05-15',
                    products:[
                                {

                                    name:'ProductName'
                                }
                            ]
                },
                {
                    title: 'EventNAme',
                    start: '2016-05-21',
                    products:[
                                {

                                    name:'ProductName1'
                                },
                                {

                                    name:'ProductName2'
                                }
                            ]
                },
                {
                    title: 'Event',
                    start: '2016-05-23',
                    products:[
                                {

                                    name:'ProductName1'
                                },
                                {

                                    name:'ProductName2'
                                }
                            ]
                },
                {
                    title: 'Eventname',
                    start: '2016-05-25',
                    products:[
                                {

                                    name:'ProductName'
                                }
                            ]
                },
                {
                    title: 'Event',
                    start: '2016-05-29',
                    products:[
                                {

                                    name:'ProductName'
                                }
                            ]
                }
            ],
            dayClick: function(date, allDay, jsEvent, view) {
           console.log('date'+date.format('DD/MMM/YYYY')+"allDay"+allDay.title+"jsEvent"+jsEvent+"view"+view)
    }


}); 
})



[1]: http://codepen.io/sud/pen/LNvZmv

1 个答案:

答案 0 :(得分:1)

使用fullcalendar自定义按钮很难插入下拉菜单。我只是将标题选项设置为false并自己创建自定义标题。然后,您可以将任何内容插入标题部分并将事件绑定到这些按钮并调用相应的fullcalendar函数。可用的示例函数是

prev(), 下一个 (), prevYear(), 明年 (), 今天(), gotoDate()