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.

Chrissy is a PowerShell MVP who has worked in IT for nearly 20 years, and currently serves as a Sr. Database Engineer in Belgium. Always an avid scripter, she attended the Monad session at Microsoft’s Professional Developers Conference in Los Angeles back in 2005 and has worked and played with PowerShell ever since. Chrissy is currently pursuing an MS in Systems Engineering at Regis University and helps maintain RealCajunRecipes.com in her spare time. She holds a number of certifications, including those relating to SQL Server, SuSE Linux, SharePoint and network security. She recently became co-lead of the SQL PASS PowerShell Virtual Chapter. You can follow her on Twitter at @cl.

Posted in SharePoint
6 comments on “SharePoint 2010: Use CSS to Auto-expand Calendar Entries
  1. sriv says:

    This did not work elegantly, it expanded if you have more than 3 calendar entries it overlapped into the day below it and you can't see the anything on that day.
    This is not same as expand all. Did not work and did not look good.

  2. Regis says:

    Works fine,
    About where to put the script, it has to really be betwend CDATA[["Copy Script here"]],
    I tried first to remove CDATA which is wrong! Thanks a lot

  3. jbp says:

    This one works better but then the ribbon goes missing…

    Note that $4a is for SP2010 and $4b is for SP2010 SP1

    <script type="text/javascript">

    _spBodyOnLoadFunctionNames.push("myFuncafterLoad");

    function myFuncafterLoad(){var OldCalendarNotify4b = SP.UI.ApplicationPages.CalendarNotify.$4b;SP.UI.ApplicationPages.CalendarNotify.$4b = function (){myFunctoExpandCalendar();OldCalendarNotify4b();}}

    function myFunctoExpandCalendar(){try{var aTags=document.getElementsByTagName('A');for(i=0;i<aTags.length;i++){try{if(aTags[i].evtid=="expand_collapse"){aTags[i].click();break;}}catch(err){ alert('Bad Call at' + aTags[i].href);}}}catch(err){alert(err.message);}}</script>

    • Petya says:

      Hi! With this code the ribbon doesn't disappear on my calendar, but only the first week gets expanded, even though all my weeks should be expanded.
      Do you have any idea why this is happening? Thanks!

  4. dschmink says:

    Did anyone fix the issue that SRIV had with the calendar events overlapping the days below? It's mixing the Expanded view with the view of the day it overlaps. It renders the expanded view unusable since it mixes in with the day listed below.

Leave a Reply

Your email address will not be published. Required fields are marked *

*