Datepicker with events?

Question

Is there a jquery plugin that will allow me to have a small calendar, such as a rectangle, for example in datepickers, and some dates will differ in color. When I view the date with the mouse, a pop-up message appears about what event is scheduled for that day. Of course, I would populate an array of events with events :-)

All I find is datepickers (small) or calendars (fullscreen). What I need for my web page, there is a small calendar and a simple tip that will show the text that he would like to show me.

Is there something similar?

Answer 1

As others have pointed out, this is possible using jQueryUI datepicker .

Datepicker has built-in features to help you get there. In particular, the beforeShowDay event will allow you to customize the appearance and behavior of each day without any special code:

• Create an object containing events that you can reference the datepicker event datepicker :

   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 simply creates an object with “keys”, which is the date of the event and “values” are the event data.

• To make the datepicker widget display all the time (without input ), just apply the widget to the div :

  HTML

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

  Javascript

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

• Click on the beforeShowDay event and return the corresponding array. datepicker will automatically apply the tooltip and class you specify. Here you can use the Event objects that we defined above:

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

  This is probably the hardest part. The beforeShowDay event beforeShowDay expects you to return an array structured as follows:

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

  So what we do is search for the event in the date passed to the function that processes the beforeShowDay event, and return data from our event object, if it exists.

It sounds like a lot, but it's not so bad when you look at it all together. See an example here: http://jsfiddle.net/andrewwhitaker/rMhVz/1/

Note that CSS classes must use !important to override the default background datepicker and apply to the a tag inside the date tr s

Answer 2

Use jquery UI datepicker . With some additional jquery, you can hook up a mouse event and display the information.

Dates are recognized using cssclass and nesting information. After displaying the calendar, you can attach your event handler.

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

selectors need some precision to work properly, but the idea remains the same.

Answer 3

If you want to do something special in the daytime freeze, you can attach the .live handler (or delegate), you need to live, since the date-picker is created after dom has finished loading into the day element and does something like a search if you need to display a tooltip, window, or something else unique on 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 }); 

A simple jsfiddle example.

However, if you find that the jQuery UI datepicker does not meet your needs, check out the original datepicker plugin, which offers many options. In addition, it also offers some more events in the datepicker format.

Answer 4

As an alternative to jQuery UI datepicker, you can check my datpicker: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

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

This example uses renderCallback to add click handlers and additional text on holidays. You should easily configure this to add a hover handler instead.