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

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.

Answer 2

If you want to do something special on a day hover you could attach a .live handler (or delegate), live is needed since the datepicker is created after the dom has finished loading, to the day element and do some sort of lookup if you need to display a tooltip, box, or something else unique on the dom.

$(".ui-datepicker-calendar .ui-state-default").live("hover", function() {
    var month = $(".ui-datepicker-month").text();
    var year = $(".ui-datepicker-year").text();
    var day = $(this).text();
    //Do something to look up the year month day..
    $("h1").empty().text(month + day + year).fadeIn();

}, function() {
  //something on mouse out
});

Simple example on jsfiddle.

However if you find the jQuery UI datepicker does not meet your needs take a look at original datepicker plugin which offers a lot of customization. Plus it also offers a few more events in the datepicker extension.

Answer 3

As an alternative to the jQuery UI datepicker you could check out my datepicker: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

It sounds like what you are looking for is covered by the renderCalendar function: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/renderCalendarBankHolidays.html

That example uses a renderCallback to add click handlers and extra text to bank holidays. You should be able to easily adjust this to add a hover handler instead.

Answer 4

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