Home/ Questions/Q 6999167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T20:30:23+00:00

I am using dojo 1.6 and using dijit.calendar in a project and it’s working

  • 0

I am using dojo 1.6 and using dijit.calendar in a project and it’s working great except for the goal of colorizing a selected grid cell. I have three innerHTMLs that are being manipulated by the calendar clicks. No problem there.

dijit.calendar’s behavior is to highlight a gridcell (calendar day) as blue when clicked and when another gridcell is clicked, it then turns that blue.
What I’d like to do is colorize the cell a custom color when it’s clicked and have it persistent.

Specifically the calendar is for a project that has an official date (blue), start date (green) and an end date (red).

I’m not even aware that there is a way to colorize a specific gridcell in dijit.calendar. Has anyone successfully done this or have a pointer to send me in the right direction?

Edit below:..

OK folks, I have a pretty good lead on where to go with this thanks to Philippe below. Philippe’s solution will color the cell EXACTLY as intended (so he’s got the answer karma). Turns out that if a selected grid cell is red and I switch to the month to pick a subsequent date, the cell stays red.

I have most of it figured out. I can get, say, the first couple of dates successfully colored but if I have to do something like put in a third date in the next month and change the calendar, the cells stay colored. So there’s going to have to be a way to change my color change to a distinct value that corresponds with the actual date.

I know that onChange that the only argument returned is the Date itself like this (using debug.console in Firebug)…..

[Date {Wed Jan 18 2012 00:00:00 GMT-0500 (EST)}]

I inspected the code through Firebug and noticed in that same cell that the code looks like this….

<td role="gridcell" class="dijitCalendarSelectedDate dijitCalendarCurrentMonth    dijitCalendarDateTemplate" dijitdatevalue="1326866400000" style="background-color: green;" tabindex="0"><span class="dijitCalendarDateLabel">18</span></td>

That distinct value seems to be “dijitdatevalue”.

I suppose I could follow a chain of ……

on click, store the “dijitdatevalue” of the first date in a hidden field (as well as the second and third dates)
Then go back and set the background-color of the corresponding dijitdatevalue to blue, green or red.

Question now is how to return the dijitdatevalue string to a hidden field. I’ll update this post again as I figure out the answer.

Janie

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you look at the widget code you’ll see a private method called _onDayMouseDown which is responsible for turning the cell blue…
    You can add your custom code to that function through dojo.connect, like this :

    dojo.connect(dijit.byId('calendar1'), "_onDayMouseDown", function(/*Event*/ evt){
   var node = evt.target.parentNode;
   dojo.style(node, "backgroundColor", "green");
});

    Otherwise, if you use dojo 1.7, you may give a try to the MultiSelectCalendar

    • 0