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 Alannah,

That feature was not implemented as built-in.
You may move that function in a js file and add <link> with it to a page, or pass content of it within register script on server, or paste into aspx. So, you may point rendering of all calendars to same single function.

Libi,

I cannot explain why it stops to work.
You may experiment with location of that function (script block better to be located in <header> of page).
You may try to debug by adding extra statements at the top of that function. Something like

window.status += 'i';
or
if(oDay.index == 0)
  debugger;
or
if(oDay.index == 0)
  alert('render day in calendar');

etc.

To verify that function is available after postback, you may insert above that function something like
alert('function renderDay is available');

Alright, so what I have done so far is added a client-side event handler for the CalendarRenderDay event and in the javascript on the page I have put in the following:

 <script type="text/javascript">

    function WebDateChooser1_CalendarRenderDay(oCalendar, oDay, oEvent) {
        FormatExcludedDays(oCalendar, oDay);
    }

</script>

 Then, in the code behind the page I dynamically create a script that contains the FormatExcludedDays function in javascript and register that using RegisterClientScriptBlock.

However, when I run the page, in the lower left corner of Internet Explorer I get the following message:

Can't eval WebDateChooser1_CalendarRenderDay(oControl, ig_fireEvent.arguments[2], ig_fireEvent.arguments[3]);

Any idea why this is occurring?

Hi Alannaw,

You may debug using hints

1. Remove (or comment) all content of WebDateChooser1_CalendarRenderDay function and check if there are no more error.
2. Look at generated html and check if there are all your script blocks rendered. Particularly WebDateChooser1_CalendarRenderDay and FormatExcludedDays.
3. Look at generated html and check what comes first igcal_init or implementation of your FormatExcludedDays function. If igcal_init comes first, then you can not use FormatExcludedDays for initial rendering of calendar days.
4. Before call to FormatExcludedDays check if that function is defined. For example,
  if(typeof FormatExcludedDays != 'function')
     return; // or window.status="no function";
5. If you are dealing with both 3 and 4, then you may skip using of your custom rendering on initial load (using #4) and repaint calendar later. To repaint later, you may add call to calendar.repaint() straight after implementation of FormatExcludedDays. To repaint, you also may use other (more appropriate) events, like body.onload, etc.
Example to add repaint from server.

string id = this.WebCalendar1.ClientID;
string repaintScript = "var cal=igcal_getCalendarById(\"" + id + "\"); if(cal)cal.repaint();";
yourScript += repaintScript;

You also may use debugger; alert, etc. statements.

Thanks.

1.  there was no error when i removed the content of the WebDateChooser1_CalendarRenderDay function.

2.  the script blocks rendered properly.

3.  in the generated html:  FormatExcludedDays was defined starting on line 700, WebDateChooser1_CalendarRenderDay on line 982 and igcal_init on line 1391

4.  I put an 'or' case into that if statement so it would do window.status = "function" if it was a function, and the status of the IE window is reporting that it's a function.

Am I forgetting a step?  Why else might that 'error' appear in the status bar of IE?  The javascript within FormatExcludedDays appears to be correct...

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?

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?

Hi Alannaw,

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 as
oDay.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 like
if(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 directly
oDay.element.innerHTML = 'Day:<span style="background:red;">'  + oDay.day + '</span>';
// keep default value of css
oDay.className = oDay.css;
// disable default rendering logic
oEvent.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?