How to customize a calendar to show more events in a monthly chrome view in WSS 3.0 , MOSS (SharePoint 2007)

Article
11/13/2008

I have came across an interesting customization requirement for bending the behavior of OOB calendar. When you select the Month View for the calendar then you can see only maximum 3 events per day and the remaining events (items) will be collapsed and you need to click on the expand all to see the remaining items. But the requirement is to show more items (greater than 3) per day… J L J L

Ok, let’s have the postmortem now…

What’s the content of “Calendar.aspx” ?

Hmmm… We all know that the “Calendar.aspx” is a view page and created based on the “Viewpage.aspx” from the C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\Pages . A “Listviewwebpart” is dynamically inserted into this page and the several calendar controls has been added as the child controls to the Listviewwebpart when the list template type is “106” (Events) i.e. CALENDAR J

The following are those Calendar Controls :

1. SPCalendarView

2. SPCalendarContainer

3. SPCalendarTabs

4. MonthlyCalendarView

All these controls are available under the Microsoft.Sharepoint.WebControls Namespace.

Now the research started from digging into the behavior of “ExpandAll” link…

The “Expand All” link is calling a JavaScript and while debugging we found that it’s calling the “GetMonthView” function in the Core.js file.

Following is the JavaScript function called by the “ExpandAll” link

function GetMonthView(str)

{

var wUrl=window.location.href;

var ExpWeek=document.getElementById("ExpandedWeeksId");

if(ExpWeek!=null)

ExpWeek.value=str;

else

return ;

SubmitFormPost(wUrl, true);

}

While debugging we found that it’s passing “1111111” to the “ExpandedWeeksId” control. The ExpandedWeeksId control is residing in the “CalendarViewMonthChrome” rendering template in the DefaultTemplates.ascx control under control templates folder as shown below :

<SharePoint:RenderingTemplate ID="CalendarViewmonthChrome" runat="server">

<div id=MontlyViewDefault_CalendarView style="display:block; overflow:auto; width:<%# SPHttpUtility.HtmlEncode(DataBinder.Eval(Container,"ChromeWidth",""))%>; height:<%# SPHttpUtility.HtmlEncode(DataBinder.Eval(Container,"ChromeHeight",""))%>; " dir="<%# DataBinder.Eval(Container,"Direction","")%>">

<tr>

<tr>

<a href="javascript:MoveToViewDate('<%# DataBinder.Eval(Container,"PreviousDate","") %>', null);" tabindex=1 style="visibility:<%# DataBinder.Eval(Container,"PreviousDateVisible","")%>" accesskey="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,calendar_prev_AK%>' EncodeMethod='HtmlEncode'/>">

<img border="0" src="/_layouts/images/prevbutton<%# DataBinder.Eval(Container,"Direction","")%>.gif" width="15" height="15" alt="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,calendar_prevmonth%>' EncodeMethod='HtmlEncode'/>" ></a>

<a href="javascript:MoveToViewDate('<%# DataBinder.Eval(Container,"NextDate","") %>', null);" tabindex=1 style="visibility:<%# DataBinder.Eval(Container,"NextDateVisible","")%>" accesskey="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,calendar_next_AK%>' EncodeMethod='HtmlEncode'/>" >

<img border="0" src="/_layouts/images/nextbutton<%# DataBinder.Eval(Container,"Direction","")%>.gif" width="15" height="15" alt="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,calendar_nextmonth%>' EncodeMethod='HtmlEncode'/>" ></a>

 <%# DataBinder.Eval(Container,"HeaderDate","") %> 

</div>

</td>

<a href="javascript:" class="ms-cal-nav" onclick="javascript:GetMonthView('1111111');return false;" tabindex=1 accesskey="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,calendar_expandall_AK%>' EncodeMethod='HtmlEncode'/>" nowrap ><NOBR><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,calendar_expandall%>" EncodeMethod='HtmlEncode'/></NOBR></a>

</span>

<a href="javascript:" class="ms-cal-nav" onclick="javascript:GetMonthView('0000000');return false;" tabindex=1 accesskey="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,calendar_collapseall_AK%>' EncodeMethod='HtmlEncode'/>" nowrap ><NOBR><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,calendar_collapseall%>" EncodeMethod='HtmlEncode'/></NOBR></a>

</span>

<Sharepoint:SPCalendarTabs runat="server"

SelectedViewTab='<%# SPHttpUtility.HtmlEncode(DataBinder.Eval(Container,"ViewType","")) %>'

ListName='<%# SPHttpUtility.HtmlEncode(DataBinder.Eval(Container,"ListName","")) %>'

ViewGuid='<%# SPHttpUtility.HtmlEncode(DataBinder.Eval(Container,"ViewName","")) %>'

</Sharepoint:SPCalendarTabs>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<Sharepoint:MonthlyCalendarView runat="server"

SelectedDate='<%# DataBinder.Eval(Container,"SelectedDate","") %>'

ExpandedWeeks='<%# SPHttpUtility.HtmlEncode( DataBinder.Eval(Container,"ExpandedWeeks","")) %>'

ItemTemplateName="CalendarViewMonthItemTemplate"

ItemAllDayTemplateName="CalendarViewMonthItemAllDayTemplate"

ItemMultiDayTemplateName="CalendarViewMonthItemMultiDayTemplate"

TabIndex=2

</Sharepoint:MonthlyCalendarView>

</td>

</tr>

</table>

</div>

</Template>

</SharePoint:RenderingTemplate>

As this template (CalendarViewmonthChrome) has the MonthlyCalenderView control in it and it has been rendered in the “Calendar.aspx” decided to dig its properties. Found an interesting property of MonthlyCalenderView called “MaxVisibleEvents” and the documentation says that the default value is “3” J… Hurray !! that’s it decided to set this “MaxVisibleEvents” to some higher vale and check the behavior.

Wow !!! After explicitly setting the value of “MaxVisibleEvents” to “10” and an IISRESET able to see up to 10 events per day in the month view.

So decided to do it in the supported as you cannot make changes to the OOB DefaultTemplates.ascx control. Created a custom defaulttemplates.ascx control and overridden the “CalendarViewmonthChrome” rendering template as shown below.

<SharePoint:RenderingTemplate ID="CalendarViewmonthChrome" runat="server">

<tr>

<tr>

 <%# DataBinder.Eval(Container,"HeaderDate","") %> 

</div>

</td>

</span>

</span>

<Sharepoint:SPCalendarTabs runat="server"

SelectedViewTab='<%# SPHttpUtility.HtmlEncode(DataBinder.Eval(Container,"ViewType","")) %>'

ListName='<%# SPHttpUtility.HtmlEncode(DataBinder.Eval(Container,"ListName","")) %>'

ViewGuid='<%# SPHttpUtility.HtmlEncode(DataBinder.Eval(Container,"ViewName","")) %>'

</Sharepoint:SPCalendarTabs>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<Sharepoint:MonthlyCalendarView runat="server"

SelectedDate='<%# DataBinder.Eval(Container,"SelectedDate","") %>'

ExpandedWeeks='<%# SPHttpUtility.HtmlEncode( DataBinder.Eval(Container,"ExpandedWeeks","")) %>'

ItemTemplateName="CalendarViewMonthItemTemplate"

ItemAllDayTemplateName="CalendarViewMonthItemAllDayTemplate"

ItemMultiDayTemplateName="CalendarViewMonthItemMultiDayTemplate"

TabIndex=2

MaxVisibleEvents=10

</Sharepoint:MonthlyCalendarView>

</td>

</tr>

</table>

</div>

</Template>

</SharePoint:RenderingTemplate>

Save this custom defaulttemplates.ascx under the control templates folder and do an IISRESET. Now you can see that the calendar is displaying minimum 10 events per day by default…

Happy Customizing.

How to customize a calendar to show more events in a monthly chrome view in WSS 3.0 , MOSS (SharePoint 2007)

Additional resources