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 date with mouse there is a popup saying what event is scheduled on that day. Of course I would populate the event array with events ;-)

All I find are the datepickers (small) or calendars (full screen large). What I need for my webpage is there is a small calendar there and a simple mouseover that would show the text that I would like it to show.

Does something like that exists?

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:

   <div id="dates"></div>
   

   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

Answer 2

Use the jquery UI datepicker. With some extra jquery you can hook up a mouseover event and display information.

The dates are recognizable with cssclass and nesting information. After showing the calendar you can attach your eventhandler.

   $(document).ready(function () {
         $("input").datepicker();     
   });

   $('td a').live('mouseenter', function () { 
     alert($(this).text() + ' ' + $('.ui-datepicker-month').text() 
                          + ' ' +$('.ui-datepicker-year').text()  );    
   });

the selectors need some precision to work correct, but the idea stays the same.