Linking jQueryUI DatePicker and FullCalendar

In one of my sample projects I wrote simple calendar solution. Users can select dates from calendar and see what events they have on selected days. I used jQueryUI DatePicker and FullCalendar components. In this posting I will show you how to link them together.

Update: source code of this project is available at CodePlex. Please visit MVC Time Planner page for further information and downloads.

To get better idea what I was doing take a look at the following screenshot. jQueryUI DatePicker is the small calendar on left. FullCalendar is larger one that is opened in day view. When user selects date from DatePicker then FullCalendar loads events for given date.

ASP.NET MVC based calendar

The trick here is very simple. Here is how I initialize DatePicker.

$(document).ready(function () {
(dateText, inst) {
var d = new
'#calendar').fullCalendar('gotoDate', d);

The ID of FullCalendar is calendar. If user picks something from DatePicker then DatePicker calls gotoDate method of FullCalendar. FullCalendar selects given date and makes request to server to get events for given date.

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    2 thoughts on “Linking jQueryUI DatePicker and FullCalendar

    • May 13, 2010 at 3:43 pm

      What about when the fullcalendar changes month/year to have the datepicker change as well..

      Did you get that working?

    • February 15, 2013 at 4:26 pm

      good job thank u :)

    Leave a Reply

    Your email address will not be published. Required fields are marked *