Hello. Can I show a webcalendar, with certain dates disabled? What I want to do is to run a query on my db, get the dates that are free, and disable the other dates, in order for the user not to be able to choose these - not free - dates. I would really like to change the backcolor of these dates too.
Is there a way to do that?
Hi,
That is possible, but it can be done on client only and requires some knowledge of javascript. You can process ClientSideEvents.Click to cancel mouse click action, you may process ClientSideEvents.RenderDay to customize appearance of days in calendar, and you also may pass array of dates from server for those client events. Below example will process those events and use listOfDates as array container for [year,month,day] disabled dates passed from server.
<script type="text/javascript">//array of disabled dates//line below will be passed from server. Uncomment it for test before server implementation//var listOfDates = [[2008,5,5],[2008,5,6],[2009,2,7],[2009,2,10]];function WebCalendarView1_RenderDay(oCalendarView, oEvent, day){ var i = listOfDates ? listOfDates.length : 0; while(i-- > 0) { var item = listOfDates[i]; if(day.year == item[0] && day.month == item[1] && day.day == item[2]) { day.css += ' grayCss'; //day.element.style.color = '#C0C0C0'; } }}function WebCalendarView1_Click(oCalendarView, oEvent, element){ if(!element) return; var css1 = element.className, css2 = element.parentNode.className; if(css1.indexOf(' grayCss') >= 0 || css2.indexOf(' grayCss') >= 0) oEvent.cancel = true; //it is also possible to find actual day from element.id (from digits after _id)}</script>
<igsch:WebCalendarView ID="WebCalendarView1" runat="server" WebScheduleInfoID="WebScheduleInfo1" > <ClientEvents RenderDay="WebCalendarView1_RenderDay" Click="WebCalendarView1_Click"></ClientEvents></igsch:WebCalendarView>
protected void Page_Load(object sender, EventArgs e){ System.Text.StringBuilder dates = new System.Text.StringBuilder(); dates.Append("<script type=\"text/javascript\">"); dates.Append("var listOfDates=["); // DateTime d = DateTime.Now.AddDays(1); dates.Append("[").Append(d.Year).Append(",").Append(d.Month).Append(",").Append(d.Day).Append("]"); // d = DateTime.Now.AddDays(3); dates.Append(","); dates.Append("[").Append(d.Year).Append(",").Append(d.Month).Append(",").Append(d.Day).Append("]"); // d = DateTime.Now.AddDays(4); dates.Append(","); dates.Append("[").Append(d.Year).Append(",").Append(d.Month).Append(",").Append(d.Day).Append("]"); // dates.Append("];"); dates.Append("</script>"); this.Page.RegisterClientScriptBlock("badDates", dates.ToString());}
If the day for which the background color needs to be changed is either beginning or in end of the month, The previous or next month calendar day will also have the same background color.
Even though, I am not showing nextprevious month date, background color will be changed.
Scenerio: I have a linked calendar which will display one year Dates.
I have 12 Calendars linked with one another
Calendar0 for Jan month
Calendar1 for Feb Month
Calendar2 for March Month
Calendar 3 for April Month Respectively
For Eg: If I want to have 3-Mar-2009 background color to be Red, with your code the background color can be changed in Calendar2 . Also the background color for Calendar1 which also have 2-Mar-2009 also will have the background color as red.
How do I avoid this. your help will be much appreciated.
Regards,
Badri