Show the full content of a Sharepoint Calendar event box

With a Sharepoint Calendar the events with a long title/description are cropped and you cannot see the full description, except if you move your mouse over it.
Example:

So I’ve had to do some CSS and a complicated JavaScript code to be able to create some large boxes. Now we are able to see the full content title/description of the event.
The result is below:

As you can see, the boxes for the events are now bigger!

To do so, you’ll have to insert the below code into your page:

<style type="text/css">
.ms-acal-rootdiv div {
  overflow: visible;
  white-space: normal;
}
.ms-acal-item { height:auto !important }
.ms-acal-outday { height:100% !important }
</style>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// load the function after the events are loaded
_spBodyOnLoadFunctionNames.push('changeCalendarEventLinkIntercept');
function changeCalendarEventLinkIntercept() {
  var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4b;
  SP.UI.ApplicationPages.CalendarNotify.$4b = function () {
    OldCalendarNotify4a();
    setTimeout(function() { showFullEvents() }, 250)
  }
}
// on resize the boxes must be replaced
$(window).on('resize', function() {
  setTimeout(function() { showFullEvents() }, 500)
});
 
function showFullEvents() {
  var prevPos={bottom:0,left:0};
  var minHeight=0,savedHeight=0,savedMinHeight=0,diffHeight=0;
  var aRows=jQuery('.ms-acal-summary-itemrow');
   
  // set the same size for each row
  aRows.each(function() {
    var h=$(this).outerHeight();
    if (savedMinHeight<h) savedMinHeight=h;
    // save the current height of the row
    $(this).data("saved-height",h)
  }).each(function() { $(this).css("height",savedMinHeight+"px"); });
   
  savedHeight=savedMinHeight;
   
  // move the events
  jQuery('.ms-acal-item').each(function() {
    var $this=$(this);
    var pos=$this.position();
    var height=$this.outerHeight();
    var bottom=pos.top+height;
    minHeight+=height;
    // check if the current event is hover the previous one
    if (prevPos.left === pos.left && prevPos.bottom>pos.top) {
      $this.css("top",(1+prevPos.bottom)+"px")
      bottom += prevPos.bottom-pos.top + 1;
      minHeight+=2;
    }
    // check if we need to make the cell bigger
    if (prevPos.left !== pos.left && savedMinHeight<minHeight) {
      diffHeight=minHeight-savedHeight; // diffHeight will permit to move down all the events later
      savedMinHeight=minHeight;
      jQuery('.ms-acal-summary-itemrow > td').css("height",minHeight+"px")
    }
    if (prevPos.left !== pos.left) minHeight=0
    prevPos={bottom:bottom,left:pos.left};
  })
   
  if (diffHeight>0) {
    var prevDiff=0,diff=0,prevRow=0;
    jQuery('.ms-acal-item').each(function(idx) {
      var $this=$(this);
      // find index that defines the row
      var row=1*$this.attr("_index").split(",")[0];
      if (idx===0 || prevRow!=row) {
        prevDiff=diff;
        diff+=savedMinHeight-aRows.eq(row).data("saved-height");
      }
      if (row > 0) $this.css("top",($this.position().top+prevDiff+2)+"px")
      prevRow=row;
    })
  }
}
</script>

The code could be more clean, but I did that during an evening after a long day of work, so I’m just happy that it’s working. If you’re able to produce a cleaner code, please share it with me!

To give some explanations :

The CSS permits to wrap the text and make the colored boxes bigger
The problem starts when there are more than 1 event in a day because the boxes hover each other
So with JavaScript we have to calculate which boxes are hover the others, and then move them down
But if you move the boxes, you also have to make the cells bigger…
And if the cells are bigger, then you need to move down the events/boxes that are in the below row
And finally, when the window is resized, Sharepoint is moving them around, so the script has to execute again after a resize.

Tested only with Sharepoint 2010, with IE7+, Firefox and Chrome.

Leave a Reply