I am using 2 webdatechoosers in my application to represent start and end dates. When the user selects a start date, I set the MinDate property of the end date chooser, so that user is not able to select an invalid end date. This is working like a breeze. The the valid and invalid dates on calender are not visually distinguised, only click on any dates before end date does not perform any action.
Is there a way to set some style properties or css properties, so that the 'out of range' dates have a different appearance, say they are crossed out or striked out. etc.
Thanks.
Unfortunately there's no property (style) to adjust that, though I agree it would be a very useful feature. I'd recommend submitting a feature request for it when you have a moment. Your one option is to use the custom rendering capabilities of the webcalendar (which is the calendar being displayed in the dropdown of the webdatechooser). There is an example of creating "custom days" in the samples browser. It is all done through JavaScript so it can be a bit messy, but I figured I'd mention it in case you really need the functionality.
http://samples.infragistics.com/2007.3/webfeaturebrowser/WebCalendar/CustomDays/customdays.aspx
-Tony
For the record, if you didn't have a feature request for this, you do now... :-)
I'm using a fairly old version of Infragistics though, so I don't actually know if this has already been implemented. If it has, could you please reply to this post and let all of us know which version it was added to?
- Sam.
Hi Alannaw,
I suggest you do not use calendar.repaint(), until there are no other way, like first paint at the time when custom javascript is not loaded yet.
If your logic in renderDay includes validations for oDay.year/month/day for particular date ranges, then calendar should process your codes on any action like drop-down, month-change, etc. You should not process MonthChange or similar event to "help" calendar to render custom days. If custom days fail to render, then there is something wrong in logic of application. If you use server generated script, then try to debug with static script block (complete renderDay function) in <header> instead of server codes.Also, if your codes in renderDay modify properties of oDay.element, then there is should not be return, or continue, or break statements, which skip changes to oDay.element for particular days. If once oDay.element was modified, then it should be modified for all days in calendar.
If you think that there is something wrong with rendering of drop-down calendar on drop action, then you may try to process Before/AfterDropDown ClientSideEvents of WebDateChooser. Within those events, the reference to calendar can be obtained from first param in handler by
var cal = oDateChooser.Calendar;// alert('min:' + cal.MinDate + ' max:' + cal.MaxDate);// current min/max dates in calendar// should be the same as// oDateChooser.getMinDate() and oDateChooser.getMaxDate()
Hi Viktor,
First off, let me say thanks for all your help so far...
I have one last problem (I swear it's my last!) - I'm having issues forcing the calendar within my WebDateChooser to repaint itself in the CalendarMonthChanged event (handling in JavaScript on the page). I can see that the event is firing (I'm setting the window.status to a message just so I can be sure it hits it), but the calendar is not redrawing.
The issue I'm having with the calendar not redrawing/repainting:
If I set my minDate to Dec 1 2007 (for example) and maxDate to Jan 31, 2008 with one excluded (coloured gray & disabled) date of Jan 28, 2008 and the selected date is Jan 31, 2008... the following dates are being grayed out: Jan 28 and Feb 1 - 9 (which is correct).
if I change months to December 2007, it shows the following dates as being grayed out: Nov 25-30 (correct), Dec 24 (incorrect, this is in the same location as Jan 28 appears in), and Dec 28 - Jan 5 (incorrect).
I figure, if I can get the calendar to repaint itself then it would resolve this issue and show the correct dates as being grayed out regardless of whether the user has changed the months or not.
I have tried the following within the CalendarMonthChanged event handler:
var calendar = igcal_getCalendarByID('<%=TDISSelectedDate.ClientID%>'); calendar.repaint();
As well as just simply: oCalendar.repaint();
Neither works and I can't seem to find any other info in these forums on how to do that... Suggestions?
The oDay.element.style.background can be used only when days in calendar do not have backgrounds for other styles. Sorry, I forgot to mention that for my suggested codes. If any property of element.style are modified by application, then those properties stay for that particular day (TD element within TABLE of days) permanently until application will change that value again. The element.style has priority over values defined in css classes and used asoDay.element.className=oDay.css;The oDay.css is dynamic and have only one time effect.
So, to merge custom styles with default css classes, the oDay.css can be used instead of oDay.element.style. You may add to <head> of your page a css style and use it for oDay.css. Example:
<style type="text/css">.grayBack{background:#909090;}</style>//Implementation of renderDay:if(myCondition) oDay.css += ' grayBack';
Note: you should use ' ' separator, otherwise, default css will lose defaults. Though, some application may need exactly that.
To check all available members of oDay, you may add a line likeif(oDay.index == 0) debugger;and in debugger look at members of oDay. There are year, month, day, dow, index, css, text, element, selected and hide.
If while processing renderDay, you modify css or text members, then those modified values will be used for corresponding properties of day and they will not interact with other months. You can not modify other members. If you modify properties of oDay.element, than that will have permanent effect. For example, you may do something like
// change inner html of TD directlyoDay.element.innerHTML = 'Day:<span style="background:red;">' + oDay.day + '</span>';// keep default value of cssoDay.className = oDay.css;// disable default rendering logicoEvent.cancel = true;
To fix that problem, I had to change the line:
oDay.element.style.background = outOfRange ? "#C0C0C0" : "";
to be a full conditional statement:
if (outOfRange == true) { oDay.element.style.background = "#A4A4A4";
There seems to be a bit of an issue though with going through the months. If I use the control to go to a different month, when I come back to the month that has 'coloured' and uncoloured days, all of them are coloured, indicating that all of them are out of range, which isn't the case.
Why would changing months/years cause the 'in range' dates to then be drawn as being out of range?
It actually appears as though there was a problem with my JavaScript, so I've fixed the issue and it appears to be working almost ok.
The only thing it seems to be doing though is resetting the style I've set for my selected day. Initially in the javaScript it was setting the background colour if the day was outOfRange to gray, when I ran it, it set the outOfRange days to gray as desired, but then it set all other available days to have the same style as my selected day. So I changed the statement in the JavaScript so that it would set the background colour to white if the day was in range.
But now the style for the selected day isn't being applied. In the JavaScript, is it possible to determine if the day is selected, and if it is, set it's background colour? like... is there some sort of oDay.selected property that I can make use of?