如何在下拉列表中选择完整的日历月份和年份 [英] How to make full calendar month and year in dropdown selectable

问题描述

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

I have a full calendar and I need to show its month and year in dropdown list, I know this question is already asked but still not answered there. I am new to full calendar and as per as i know it is updated now hope there is some easiest way to achieve rather than giving it gotodate option. I have created code pen for the calendar if anyone has done this before then please update my codepen and give me link thank you so much... demoToEdit Below is my code I have added some of the functions of full calendar as you see I am not able to get on which event I should right dropdown year and month so I have not done it.

$(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

推荐答案

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

It is hard to insert drop downs using fullcalendar custom buttons. I simply make header option to false and created custom header myself. Then you can insert any thing to header part and bind events to those buttons and call appropriate fullcalendar function. example functions that available are

prev（），
next（），
prevYear（），
nextYear（），
今天（），
gotoDate（）

prev (), next (), prevYear (), nextYear (), today (), gotoDate ()

这篇关于如何在下拉列表中选择完整的日历月份和年份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！