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 () {
    $(
'#datepicker'
).datepicker({
        inline:
true
,
        onSelect:
function
(dateText, inst) {
           
var d = new
Date(dateText);
            $(
'#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.

Liked this post? Empower your friends by sharing it!

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
      Permalink

      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
      Permalink

      good job thank u :)

    Leave a Reply

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