You’ll find a lot more support for jQuery UI, and there are a lot more widgets to play with

Can you help me to modify this calender ??

Thanks in advance.

Another “hacky” thing that I haven’t figured out a way to get around was the binding of the selectCell call to each TD. This code worked in my HTML page, but then again, when I moved it to my project, the filtering stopped working, so all the cells (even the disabled weekend cells) executed the Click event. I tried everything from filtering on the class to adding a “disabled” attribute and filtering on that. I also tried doing an “unbind” on any cell with that class or attribute, but the copy of jQuery that is in the app just isn’t having any of it.

The way I worked around that is in the selectCell method, I added this code at the beginning:

if ($(this).hasClass(‘disabled’)) return;

I don’t like it, but it works. Hope this helps someone out there that comes across this thread.

function update(table, repopulate) {
if (repopulate) populateBody(table);
populateCaption(table);
decorate(table);
if (!cellsBound) {
bindCellBehaviour(table);
cellsBound = true;
}
}

I REALLY appreciate all your help on this!

The body of the HTML file is this:

$(function() {
// Create a new calendar with the given date selected.
var minProcessDate = new Date();
minProcessDate.setDate(minProcessDate.getDate() – 90);
minProcessDate.setDate(1);
var maxProcessDate = new Date();
maxProcessDate.setDate(maxProcessDate.getDate() + 5);

$(“#target”).calendar(new Date(), {
className: “redzone-calendar”,
allowWeekends: false,
minimumDate: minProcessDate,
maximumDate: maxProcessDate
});

// Switch the display to the current date.
$(“table”).calendar(new Date());
});

Cash In

DHTML Class
$1.00

And the function is this:

return this.each(function() {
var target = jQuery(this);
var isNew = !target.data(“date.active”);

if (!target.is(“table”) || isNew) {
var table = createTable(target, options);
populateHeader(table);
setSelectedDate(table, date);
}
else {
setActiveDate(target, date);
}
});

If you have, for example,


<div><!-- calendar goes here --></div>
<div><!-- events go here --></div>


and your script is
$("div").calendar(...)

That’s the simplest way of reproducing the issue that I could think of.

Another idea that just occurred:

<div id=”calendar”><table id=”events”></table></div>

In this case, both the calendar and the events would end up in the same container, and would be picked up by the same selector (being both tables in the same parent). A quick fix to this would be to move the table out of the calendar’s container, or wrap the calendar container in such a way that the two tables are no longer siblings.

I ran into another problem I was hoping you could give me some direction on. For the click event of a particular date, what I’m doing is showing a grid (html table) below the calendar that lists 2 columns. The problem is, now that I have a second table object, in the “return this.each(function() {” function, it tries to call the populateHeader method and pass in the table. It also does this with the table I created to display the details. How can I go about only processing in the calendar table and no other table on the page?

I think you could also check if the current date is displayed. If the current date is NOT visible and the month falls outside the range, then all weekend dates get disabled. That would eliminate the while loop.

while (today.getUTCMonth() >= table.data(“minimumDate”).getUTCMonth()
&& today.getUTCFullYear() >= table.data(“minimumDate”).getUTCFullYear())
{
jQuery(“.d” + today.getUTCDate()).filter(“.m” + today.getUTCMonth()).prevAll(“td.dw0, td.dw6″).addClass(“disabled”);

jQuery(“.d” + today.getUTCDate()).filter(“.m” + today.getUTCMonth()).parent().prevAll().children(“td.dw0, td.dw6″).addClass(“disabled”);

today.setMonth(today.getUTCMonth() – 1);
}