Search jQuery

jQuery Forum

[DatePicker] change onClick (day) and day css

in Using jQuery UI • 12 years ago

Hi all, I want to use jQuery UI DatePicker to show some events of my agenda.

This is my ideas:

I want show a busy day ( more than 4 events ) with red background colour ( on the day cell ).
When I have 2 events in the day green colour of the cell's background and go on.

Second question is: if in the day cell there are some events I want to make the cell clickable and redirect ( on click ) the user to a page.

Is there a way to do that? Thank you very much, Emanuele.

Replies(6)

stermi

Re: [DatePicker] change onClick (day) and day css

12 years ago

up?

kbwood.au

Re: [DatePicker] change onClick (day) and day css

12 years ago

Use the beforeShowDay and onSelect options. beforeShowDay is a function that takes a date as a parameter and returns an array with [0] being true if the date is selectable, false if not, [1] being a CSS class to apply to the date, and [2] being an optional popup tooltip. So you could have a list of the event dates and check against them. Then add CSS to style the days.

.ui-datepicker.ui-widget-content .ui-state-default { background: none; }
.ui-widget-content .eventDay a.ui-state-default { background-color: #0f0; }
.ui-widget-content .busyDay a.ui-state-default { background-color: #f00; }

$('#date').datepicker({beforeShowDay: showEventDates, onSelect: showEvent});
var eventDates = [{date: new Date(2010, 6-1, 4), events: 1},
{date: new Date(2010, 6-1, 18), events: 2},
{date: new Date(2010, 7-1, 16), events: 4},
{date: new Date(2010, 8-1, 6), events: 8}];
function showEventDates(date) {
for (var i = 0; i < eventDates.length; i++) {
if (date.getTime() == eventDates[i].date.getTime()) {
return [true, eventDates[i].events > 4 ? 'busyDay' : 'eventDay'];
}
}
return [false, ''];
}
function showEvent(date) {
window.location.href = 'events.php?date=' + date;
}

stermi

Re: Re: [DatePicker] change onClick (day) and day css

12 years ago

Your solution is perfect but I've two problems:

1) EDIT

2) If I want to load events based on the current month? And than when the user switch month/yeah I want to load new events with ajax.

Where can I attach this behaviour?

UPDATE: I'm to put all togheter and then I will release my script :) Thank you very much for the initial help

kbwood.au

Re: [DatePicker] change onClick (day) and day css

12 years ago

Use the onChangeMonthYear option to react to movements between months. Then you can load the dates for the new month and display them. Once they're loaded (asynchronously) use the 'refresh' command to redraw the datepicker:

$('#date').datepicker({beforeShowDay: showEventDates, onSelect: showEvent,
onChangeMonthYear: loadEventDates});
function loadEventDates(year, month) {
$.get('eventdates.php', {month: month, year: year},
function(data) {
// Decode/save the data into eventDates
$('#date').datepicker('refresh');
});
}

stermi

Re: [DatePicker] change onClick (day) and day css

12 years ago

Perfect! Everything works fine. Maybe I need some refactoring :D

In the next few days I will publish all the code :)

stermi

Re: [DatePicker] change onClick (day) and day css

12 years ago

Another question. At the moment I'm using this code:

for (var i = 0; i < eventDates.length; i++) {
                            if ( d + '' + m + '' + (date.getYear()+1900) == eventDates[i].date) {
                                if ( eventDates[i].events == 1 ) css = 'oneEventDay';
                                else if ( eventDates[i].events == 2 ) css = 'twoEventDay';
                                else if ( eventDates[i].events == 3 ) css = 'threeEventDay';
                                else css = 'fullEventDay';
                                return [true, css, eventDates[i].tooltip];
                            }
                    }

The latest problem is this: I want to have a tooltop like this

"This is the first row of the tooltip.
Now I'm at the new line"

I tried everything but I can't go to the new line in the tooltip. Someone know how to do it?

Top Reply

Response title

Attachments

jQuery Forum

[DatePicker] change onClick (day) and day css

Replies(6)

Re: [DatePicker] change onClick (day) and day css

Re: [DatePicker] change onClick (day) and day css

Re: Re: [DatePicker] change onClick (day) and day css

Re: [DatePicker] change onClick (day) and day css

Re: [DatePicker] change onClick (day) and day css

Re: [DatePicker] change onClick (day) and day css

Statistics

Tags

Actions