{"id":1341,"date":"2014-03-11T22:49:08","date_gmt":"2014-03-11T21:49:08","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=1341"},"modified":"2014-03-11T22:49:52","modified_gmt":"2014-03-11T21:49:52","slug":"show-the-full-content-of-a-sharepoint-calendar-event-box","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2014\/03\/11\/show-the-full-content-of-a-sharepoint-calendar-event-box\/","title":{"rendered":"Show the full content of a Sharepoint Calendar event box"},"content":{"rendered":"

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.
\nExample:
\n\"image001\"<\/a><\/p>\n

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.
\nThe result is below:
\n\"image002\"<\/a><\/p>\n

As you can see, the boxes for the events are now bigger!<\/p>\n

To do so, you’ll have to insert the below code into your page:<\/p>\n

\r\n<style type=\"text\/css\">\r\n.ms-acal-rootdiv div {\r\n  overflow: visible;\r\n  white-space: normal;\r\n}\r\n.ms-acal-item { height:auto !important }\r\n.ms-acal-outday { height:100% !important }\r\n<\/style>\r\n<\/pre>\n
\r\n<script type=\"text\/javascript\" src=\"\/\/code.jquery.com\/jquery-1.11.0.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n\/\/ load the function after the events are loaded\r\n_spBodyOnLoadFunctionNames.push('changeCalendarEventLinkIntercept');\r\nfunction changeCalendarEventLinkIntercept() {\r\n  var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4b;\r\n  SP.UI.ApplicationPages.CalendarNotify.$4b = function () {\r\n    OldCalendarNotify4a();\r\n    setTimeout(function() { showFullEvents() }, 250)\r\n  }\r\n}\r\n\/\/ on resize the boxes must be replaced\r\n$(window).on('resize', function() {\r\n  setTimeout(function() { showFullEvents() }, 500)\r\n});\r\n\r\nfunction showFullEvents() {\r\n  var prevPos={bottom:0,left:0};\r\n  var minHeight=0,savedHeight=0,savedMinHeight=0,diffHeight=0;\r\n  var aRows=jQuery('.ms-acal-summary-itemrow');\r\n  \r\n  \/\/ set the same size for each row\r\n  aRows.each(function() {\r\n    var h=$(this).outerHeight();\r\n    if (savedMinHeight<h) savedMinHeight=h;\r\n    \/\/ save the current height of the row\r\n    $(this).data(\"saved-height\",h)\r\n  }).each(function() { $(this).css(\"height\",savedMinHeight+\"px\"); });\r\n  \r\n  savedHeight=savedMinHeight;\r\n  \r\n  \/\/ move the events\r\n  jQuery('.ms-acal-item').each(function() {\r\n    var $this=$(this);\r\n    var pos=$this.position();\r\n    var height=$this.outerHeight();\r\n    var bottom=pos.top+height;\r\n    minHeight+=height;\r\n    \/\/ check if the current event is hover the previous one\r\n    if (prevPos.left === pos.left && prevPos.bottom>pos.top) {\r\n      $this.css(\"top\",(1+prevPos.bottom)+\"px\")\r\n      bottom += prevPos.bottom-pos.top + 1;\r\n      minHeight+=2;\r\n    }\r\n    \/\/ check if we need to make the cell bigger\r\n    if (prevPos.left !== pos.left && savedMinHeight<minHeight) {\r\n      diffHeight=minHeight-savedHeight; \/\/ diffHeight will permit to move down all the events later\r\n      savedMinHeight=minHeight;\r\n      jQuery('.ms-acal-summary-itemrow > td').css(\"height\",minHeight+\"px\")\r\n    }\r\n    if (prevPos.left !== pos.left) minHeight=0\r\n    prevPos={bottom:bottom,left:pos.left};\r\n  })\r\n  \r\n  if (diffHeight>0) {\r\n    var prevDiff=0,diff=0,prevRow=0;\r\n    jQuery('.ms-acal-item').each(function(idx) {\r\n      var $this=$(this);\r\n      \/\/ find index that defines the row\r\n      var row=1*$this.attr(\"_index\").split(\",\")[0];\r\n      if (idx===0 || prevRow!=row) {\r\n        prevDiff=diff;\r\n        diff+=savedMinHeight-aRows.eq(row).data(\"saved-height\");\r\n      }\r\n      if (row > 0) $this.css(\"top\",($this.position().top+prevDiff+2)+\"px\")\r\n      prevRow=row;\r\n    })\r\n  }\r\n}\r\n<\/script>\r\n<\/pre>\n
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!<\/p>\n
To give some explanations :<\/p>\n
    \n
  • The CSS permits to wrap the text and make the colored boxes bigger<\/li>\n
  • The problem starts when there are more than 1 event in a day because the boxes hover each other<\/li>\n
  • So with JavaScript we have to calculate which boxes are hover the others, and then move them down<\/li>\n
  • But if you move the boxes, you also have to make the cells bigger…<\/li>\n
  • And if the cells are bigger, then you need to move down the events\/boxes that are in the below row<\/li>\n
  • And finally, when the window is resized, Sharepoint is moving them around, so the script has to execute again after a resize.<\/li>\n<\/ul>\n
    Tested only with Sharepoint 2010, with IE7+, Firefox and Chrome.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[13,33],"tags":[152,158,117],"class_list":["post-1341","post","type-post","status-publish","format-standard","hentry","category-niveau-intermediaire","category-programmation","tag-niveau-intermediaire","tag-programmation","tag-sharepoint"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1341"}],"version-history":[{"count":6,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1341\/revisions"}],"predecessor-version":[{"id":1350,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1341\/revisions\/1350"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}