I have a web part page created with a left body and side column layout. I created 2 views of a calendar to put on this page that will allow a monthly calendar view to display in the left body and a small daily calendar to the right in the right column.

How can I show details for the day when someone clicks a day on the left monthly view it will show the details on the right column daily view?

I guess this would be master/detail webpage but since you can't have connected web parts with calendar view I am at a loss. Thanks in advance.


Can't you use a third-party Js library like full-Calendar or some other jQuery calendars as they provide almost all of the functionings.

see the link

you can also check this link

it describes to override the default API function " SP.UI.ApplicationPages.CalendarContainerFactory.create " of the SharePoint calendar view and apply a custom hook of your own as posted below.


function MyCalendarHook() {     
    var _patchCalendar = function() {        
        $('.ms-acal-rootdiv .ms-acal-item').click(function () {
            var itemId = $('a', $(this)).attr('href').split('?ID=')[1];
            alert('Item with ID ' + itemId + ' was clicked!');

    var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;
    SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function($p0, $p1) {
        _onItemsSucceed.call(this, $p0, $p1);

and add this script file in your v4.master head tag as show below. (Script included between BEGIN DEMO and END DEMO )

<head runat="server">
  <meta http-equiv="X-UA-Compatible" content="IE=8"/>
  <meta name="GENERATOR" content="Microsoft SharePoint"/>
  <meta name="progid" content="SharePoint.WebPartPage.Document"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="Expires" content="0"/>
  <SharePoint:RobotsMetaTag runat="server"/>
  <title id="onetidTitle"><asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server"/></title>
  <SharePoint:CssLink runat="server" Version="4"/>
  <SharePoint:Theme runat="server"/>
  <SharePoint:ULSClientConfig runat="server"/>
  <script type="text/javascript">
  var _fV4UI = true;
  <SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server"/>
  <SharePoint:CustomJSUrl runat="server"/>
  <SharePoint:SoapDiscoveryLink runat="server"/>
  <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>
  <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
  <SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/images/favicon.ico"/>
  <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server"/>
  <!-- BEGIN DEMO -->
  <script type="text/javascript" src="/_layouts/js/jquery-1.6.1.js"></script>
  <script type="text/javascript" src="/_layouts/js/patchcalendar.js"></script>
  <!-- END DEMO -->
  <asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server"/>
  <SharePoint:SPPageManager runat="server"/>
  <SharePoint:SPHelpPageComponent Visible="false" runat="server"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.