Datepicker with events?

Question

Is there a jquery plugin that would allow me to have a small calendar like rectangle, like in datepickers and some of the dates would be different colour. When I go over the

Answer 1

As others have pointed out, this is possible with jQueryUI's datepicker.

Datepicker has some built in functionality that will help you get there. Specifically, the beforeShowDay event will let you customize the appearance and behavior of each day without much code at all:

1. Create an object containing events you can reference from the datepicker's event handler:

   var Event = function(text, className) {
       this.text = text;
       this.className = className;
   };
   
   var events = {};
   events[new Date("02/14/2011")] = new Event("Valentines Day", "pink");
   events[new Date("02/18/2011")] = new Event("Payday", "green");
   

   This code just creates an object with "keys" being the event date and "values" being event data.

2. To make the datepicker widget show up all the time (without requiring an input for example), just apply the widget to a div:

   HTML:

   JavaScript:

   $("#dates").datepicker({....});
   

3. Tap into the beforeShowDay event, and return the appropriate array. datepicker will automatically apply a tooltip and class you specify. This is where the Event objects we defined above come in handy:

   $("#dates").datepicker({
       beforeShowDay: function(date) {
           var event = events[date];
           if (event) {
               return [true, event.className, event.text];
           }
           else {
               return [true, '', ''];
           }
       }
   });
   

   This is probably the trickiest part. The beforeShowDay event handler expects you to return an array structured like this:

   [ 0 ] equal to true/false indicating whether or not this date is selectable, [ 1 ] equal to a CSS class name(s) or '' for the default presentation, and [ 2 ] an optional popup tooltip for this date.

   So what we're doing is looking up the event on the date passed into the function handling the beforeShowDay event and returning the data from our event object, if it exists.

It looks like alot, but it's not too bad when you look at it all put together. Check out the example here: http://jsfiddle.net/andrewwhitaker/rMhVz/1/

Note the CSS classes must use !important to override the default background of the datepicker, and actually apply to the a tags inside of the date trs