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
Hi Bardi,
To avoid custom css for days which belong to next/previous months, you may use index property of day. Calendar uses table with 6x7=42 days and each day has corresponding index. If day.day is larger than 20 and day.index is smaller than 7, then it is day of previous month, and if day.day is smaller than 15 and day.index is larger than 26 than it is day in next month. Example:
if(day.year == item[0] && day.month == item[1] && day.day == item[2]) if(!((day.day > 20 && day.index < 8) || (day.day < 15 && day.index > 26))){ day.css += ' grayCss'; //day.element.style.color = '#C0C0C0';}
Thanks for your reply. I was about to post the response before which you have posted.
I used if(day.css.length < 25) which works fine. Even if(day.element.currentStyle.cursor != "hand") works.
For the second option to work, I changed the Cursor behaviour for next and previous month to "hand"
I feel the solution which you have given works better.
Thanks again for the response.
I have another problem :(
1) If you see the attached image, the items which are marked within the circle, doesn't have data for those dates even then the background color is changed. How do I solve this.
2) I have added 12 calendars to view the year calendar. I have the Main Calendar (Calendar0) and added remaining 11 Calendars in the footer template of the main calendar. When Viewed in the browse, the child calendars are displayed below the main calendar (please refer the image). If you see the January 2009 Calendar, its wide and remaining months calendar are smaller.How do I make all the calendar look similar?
Looking forward for your reply.