Issue 283: Month/Year Dropdown
Status:  Duplicate
Merged:  issue 514
Owner: ----
Closed:  Jan 2010
Reported by WhoBu...@gmail.com, Jan 12, 2010
It would be helpful if the Month and the year in the header were drop down
menus so that you could quickly jump to the desired date.

Jan 19, 2010
Project Member #1 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Duplicate
Mergedinto: 153
Nov 19, 2012
#2 couponso...@gmail.com
It would be helpful if we can add Month and the year dropdown in the header to enable quick jumping to the desired date.
I need to add that to my calendar to give an additional functionality to jump to different month views along with one month right and left of header.

I am using fullcalendar 1.5.4

Jun 18, 2013
#3 baq...@gmail.com
I did this by modifying the FullCalendar v1.6.1
1.) Add a division for Jquery UI date picker in header section . 
					    e.append("<span class='fc-header-title'><div  id='myhcalendar' /><h2 style='display:none' id='fcheadertitle'>&nbsp;</h2></span>");
2.) bind a datepicker  to division above. onChangeMonthYear syncronize  fullcalendar

   $(document).ready(function() {

        $("#myhcalendar").datepicker({
            changeMonth: true,
            changeYear: true,
            showOn: 'both',
            onChangeMonthYear: function(year, month, objDatePicker) {
                $('#calendar').fullCalendar('gotoDate', year, month - 1); //month from 1 - 12
            }
          
        });


        $("#calendar .fc-button-today").each(function() {
            $(this).click(function() {  //  On today button click, syncronize drop downs
                $("#myhcalendar").datepicker("setDate", new Date());
            });
        });
    });


3.) Hide date picker UI body with css as we only need header.

    .ui-datepicker-calendar {
        display: none;
        }


Feb 25, 2014
#4 davnee...@gmail.com
Thank you.. This solved a big problem of mine.
Mar 21, 2014
Project Member #5 adamrs...@gmail.com
i think i miss-merged this feature a while ago. changing it to  Issue 514 
Mergedinto: 514
Aug 3, 2015
#6 santoshs...@gmail.com
hi sir, i want to create drop down list in header section of full calendar ,i tried but i am getting error msg in header section  e.append("<span class='fc-header-title'><div  id='myhcalendar' /><h2 style='display:none' id='fcheadertitle'>&nbsp;</h2></span>");

e.append is not accepting please help me

Aug 11, 2015
#7 santoshs...@gmail.com
hi i am using this code ,but i am not getting result .can you show the steps

1.) Add a division for Jquery UI date picker in header section . 
					    e.append("<span class='fc-header-title'><div  id='myhcalendar' /><h2 style='display:none' id='fcheadertitle'>&nbsp;</h2></span>");
2.) bind a datepicker  to division above. onChangeMonthYear syncronize  fullcalendar

   $(document).ready(function() {

        $("#myhcalendar").datepicker({
            changeMonth: true,
            changeYear: true,
            showOn: 'both',
            onChangeMonthYear: function(year, month, objDatePicker) {
                $('#calendar').fullCalendar('gotoDate', year, month - 1); //month from 1 - 12
            }
          
        });


        $("#calendar .fc-button-today").each(function() {
            $(this).click(function() {  //  On today button click, syncronize drop downs
                $("#myhcalendar").datepicker("setDate", new Date());
            });
        });
    });


3.) Hide date picker UI body with css as we only need header.

    .ui-datepicker-calendar {
        display: none;
        }