How to combine jquery date-picker and jquery full calendar

Question

Can any one tell me how I could update a selection in a date picker to a full calendar ie When user selects date from DatePicker then FullCalendar loads events for given date.

Answer 1

Take a look at this : Issue 167: Mini Calender to control Main Calender.

Or make the combination with following example :

$(document).ready(function() {
    $("#fullcalendar").fullCalendar({
        // .....
    });

    $('#datepicker').datepicker({
        inline: true,
        onSelect: function(dateText, inst) {
            var d = new Date(dateText);
            $('#fullcalendar').fullCalendar('gotoDate', d);
        }
    }); 
}

<div id="fullcalendar"></div>
<div id="datepicker"></div>

Answer 2

The "gotoDate (method)" would help you select a date programatically in fullcalendar. So let the user select a date using jquery date picker and register a onchange event on the text input that captures the date. When the onchange fires, use gotoDate to set the date in fullcalendar. Refer - http://arshaw.com/fullcalendar/docs/current_date

Answer 3

This might help anyone coming to this answer to add a gotoDate datepicker to fullcalendar as a custom button

customButtons: {
    gotoDate: {
        text: 'Go to date',
        click: function () {
            $(this).datepicker({
                autoclose: true
            });
            $(this).datepicker().on('changeDate', function (e) {
                $('#fullcalendar').fullCalendar('gotoDate', e.date);
            });
            $(this).datepicker('show');
        }
    },
},
footer: {
    'center': 'gotoDate'
},