i wanted to use this calendar to show a schedule of days that are reserved on a calendar. they will have multiple weeks from different months and just need to highlight the days to show they are already reserved. is there a way to do this on the page load event on my page or another control that i should use to accomplish what i need?
Hi Mike,
The WebMonthCalendar has property CustomDays. That allows to add special days to calendar which can be rendered with special styles. Below is example:
aspx:
<head runat="server"> <style type="text/css"> .customCss { font-weight:bold; background-color:#E0E0E0; } </style></head>...<ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server"></ig:WebMonthCalendar>
aspx.cs:
protected void Page_Load (System.Object sender, System.EventArgs e){ if(!this.IsPostBack) this.AddCustomDays();}private void AddCustomDays(){ this.WebMonthCalendar1.CustomDays.Clear(); DateTime[] weeks = new DateTime[]{new DateTime(2010, 6, 13), new DateTime(2010, 6, 27), new DateTime(2010, 7, 4), new DateTime(2010, 8, 1), new DateTime(2010, 8, 15)}; for(int i = 0; i < weeks.Length; i++) this.AddCustomWeek(weeks[i]);}private void AddCustomWeek(DateTime date){ for(int i = 0; i < 7; i++) { CalendarCustomDay day = new CalendarCustomDay(date); day.CssClass = "customCss"; this.WebMonthCalendar1.CustomDays.Add(day); date = date.AddDays(1); }}
Can you add a description to that day as well so it will show up?
On server you can modify text which appears in day. If you need more, then the only option is to process ClientEvents.RenderDay and get full access to logic which renders days and modify them as you wish. Below are examples:
aspx.cs (modify Text):
CalendarCustomDay day = new CalendarCustomDay(date); // the {0} is a flag to repace default text (day of month) // Note: if context is too large, then it will break appearance day.Text = "{0}x"; // you also may modify html of day day.Text = "{0}<span style='font-size:7px;color:red;'> ok</span>";
aspx (modify rendering):
<script type="text/javascript">function renderDayEvent(sender, evntArgs){ var day = evntArgs.get_day(); var td = day.get_element(); var myCustomDay = td.className.indexOf('customCss') >= 0; var title = ''; if(myCustomDay) { title = 'This is my custom day:' + day.get_month() + '/' + day.get_day() + '/' + day.get_year(); } td.title = title;}</script><ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server"> <ClientEvents RenderDay="renderDayEvent" /></ig:WebMonthCalendar>