MVC - JQuery Datepicker to display events

Question

I'm currently building an MVC application and using a JQuery UI Datepicker http://jqueryui.com/demos/datepicker/

to book events.

I would like to display all available eventdates in the Datepicker. Is there any way to rerender the datepicker to make only eventdates being selectable(clickable) or may be just highlight the eventdates. Any way to pass dates into the datepicker? Any experience of that?

Thanks in advance

Answer 1

You might want to look at the beforeShowDay event of the DatePicker control http://jqueryui.com/demos/datepicker/#event-beforeShowDay . It seems ready made for what you are trying to do, you just have to supply a list of dates and the styles to go with it: something like:

$('.selector').datepicker({
    beforeShowDay: function(date) { 
        for(i = 0; i < arrayOfCalendarEventDatesYouProvide.length; i++) {
            if(date.getMonth() == arrayOfCalendarEventDatesYouProvide[i].getMonth()
            && date.getDay() == arrayOfCalendarEventDatesYouProvide[i].getDay()
            && date.getYear() == arrayOfCalendarEventDatesYouProvide[i].getYear())

            //matched a day in the array, turn of date in calendar if you
            //don't want it pickable
            return [false, 'some-css-to-indicate-a-match'];
        }

        //if you get this far, no matches
        return [true, ''];
    }
});