» SharePoint 2010: Use CSS to Auto-expand Calendar Entries

9Jan/120

SharePoint 2010: Use CSS to Auto-expand Calendar Entries

I looked all around the web for a simple solution to auto-expanding events in a monthly Calendar view. Unfortunately, this isn't something that's built-in to SharePoint, so it has to be done using workarounds. There were many solutions suggested on the web, though a majority required file system edits. Hey, no thanks!

Here's what worked for me: I created a new monthly view called Expanded View, set it to default, then fired up SharePoint designer and opened the new view for editing. Per the suggestion found on StackOverflow, I inserted a Content Editor Web Part right above the calendar, then used the split view to find the CEWP and between CDATA[[]], I added

<script type="text/javascript">


_spBodyOnLoadFunctionNames.push('WaitForCalendarToLoad');


function WaitForCalendarToLoad()

{  

    SP.UI.ApplicationPages.SummaryItemRenderer.prototype.$2u = function ()

    {

            ULSvSp: ;

            if (!this.$1A_1) this.$1A_1 = 100;

            return this.$1A_1

        }

}

</script>

This works best for calendars that mostly have all-day events. Because hourly events add extra lines to display the hours, this solution may not be the best one for those needing to show calendars packed with hourly events; it's not as streamlined. If anyone has some code for making auto-expanded hourly events look good, I'd love to see it.