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