Opened 10 years ago

Closed 10 years ago

#14015 closed defect (fixed)

Calendar: "jumpy" with disabled dates

Reported by: ben hockey Owned by: bill
Priority: high Milestone: 1.7
Component: Dijit - LnF Version: 1.7.0b1
Keywords: Cc:
Blocked By: Blocking:


to see this issue, look at test_Calendar.html and type the following in the console

cal = dijit.byId('calendar1');
cal.isDisabledDate = function (date) { return date < new Date() || date.getDay() === 3; };

this disables all dates before today and any wednesday. you'll see the calendar jump when you call cal._populateGrid();. since this is not likely to happen normally, this may be excusable.

however, once you've done the above, if you go forward a month and then back a month, you'll see the calendar jump as you navigate between months. is there a way to stop this jumping?

this appears as far back as dojo 1.5.0 (i didn't go further) so it's nothing new but thought it might be worth looking at.

Change History (3)

comment:1 Changed 10 years ago by bill

Summary: Calendar "jumpy" with disabled datesCalendar: "jumpy" with disabled dates

I do see the jumpiness on FF and Safari, although it works on IE.

It happens particularly on the line:

template.className = clazz + "Month dijitCalendarDateTemplate";

when it's changing the class from

dijitCalendarPreviousMonth dijitCalendarDateTemplate


dijitCalendarDisabledDate dijitCalendarPreviousMonth dijitCalendarDateTemplate

But not sure why that change makes it temporarily jump; it shouldn't, yet it does, on both FF and safari.

The particular CSS that causes the jump is when the td > span's style is changed from

  border-width: 1px;
  padding: 3px 5px 3px 4px;


  border-width: 0;
  padding: 4px 6px 4px 5px;
Last edited 10 years ago by bill (previous) (diff)

comment:2 Changed 10 years ago by bill

Milestone: tbd1.7
Status: newassigned
Type: enhancementdefect

comment:3 Changed 10 years ago by bill

Resolution: fixed
Status: assignedclosed

In [26799]:

Work around Calendar "jumping" problem on FF and safari when resetting which grid cells are disabled:

  1. Don't set dijitCalendarHoveredDate or dijitCalendarActiveDate class on disabled cells, even when hovering or clicking those cells.
  1. Set dijitCalendarEnabledDate class on enabled cells, and change .dijitCalendarDateTemplate:hover rules to .dijitCalendarEnabledDate:hover { ... }, so that they don't apply to disabled cells.

Fixes #14015 !strict.

Note: See TracTickets for help on using tickets.