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

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 Cloud and Datacenter Management & Data Platform MVP who has worked in IT for over 20 years. She is the creator of the popular SQL PowerShell module dbatools, holds a master's degree in Systems Engineering and is coauthor of Learn dbatools in a Month of Lunches. Chrissy is certified in SQL Server, Linux, SharePoint and network security. 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">


    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