Sunday 8 December 2013

Expand Calendar Month view

Calendar month view shows a limited number of items by default, I think 3 or 4 items. so you have to click on expand, every time when you want to see all items.

with adding a hidden content editor web part and few line of javascript, we can change the calendar view to show all the events by default, so the end user don't have to click on "more items" every time when they visit the page.
and here is the required javascript to do this:
<div id='cover' style='position:absolute;top:0px;left:0px;width:100%;background:white;'></div>
<script type="text/javascript">

var yScroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
var y = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
var xScroll = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
var x = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
var cover = document.getElementById("cover");

cover.style.height = (y + yScroll) + "px";
cover.style.width = (x + xScroll) + "px";

function expand() {
if (document.referrer != location.href && !location.href.match(/CalendarPeriod=((week)|(day))/i)) { GetMonthView('11111111'); }
else { cover.style.display = "none"; }
}
window.onload = function() { expand(); };
</script>


2 comments:

  1. Where do you put the script?

    ReplyDelete
  2. 1. Copy the posted code or author's code in a js file and upload it same site under script or code library.

    2. Add a Content Editor Webpart and reference the js file. (you may choose to hide the CEWP)

    ReplyDelete