| Issue 283: | Month/Year Dropdown | |
| 3 people starred this issue and may be notified of changes. | Back to list |
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.
Nov 19, 2012
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
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'> </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
Thank you.. This solved a big problem of mine.
Mar 21, 2014
i think i miss-merged this feature a while ago. changing it to Issue 514
Mergedinto:
514
Aug 3, 2015
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'> </h2></span>");
e.append is not accepting please help me
Aug 11, 2015
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'> </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;
}
|
|
| ► Sign in to add a comment |
Mergedinto: 153