Living a SharePoint life

Thursday, August 22, 2013

Adding a calendar icon to a Content Query Web Part

I was working on a project the other day, when I stumbled upon this webpage with a nice little calendar done completely in CSS. So I was wondering if it would be possible to create an events list from this:

to this:

Before we start, you must be sure, that you are able to add CSS to your master page. If you don’t know what I’m talking about, you can check out a blog post of mine (In German). This step is mandatory, otherwise it will not work. You can also crawl the web for blog posts on this subject.

In the first step we need a calendar list somewhere in our Site collection. It really doesn’t matter where you create it, because we can use the Content Query Web Part (CQWP) to collect all events in event lists in the entire Site collection. For development purpose and to keep it simple, I recommend you create the list in the same site where the CQWP will be located later.

The second step will be to create the CQWP itself. You will need the publishing features in the site and site collection turned on. Otherwise the CQWP will be not available in the selection. Beside of that, I assume you have knowledge on how to configure the CQWP. Therefor I will not cover this subject here.

The new Content Query Web Part Style

After adding the CQWP to your page, we’ll start to modify the settings. Go to the following list and download the ItemStyle.xsl file:
When you’re finished with downloading, open the XSL file and look for the following section:
<xsl:template name=”HiddenSlots” match=”Row[@Style=’HiddenSlots’]” />
Above that section you copy & paste the following piece of XSL:
<xsl:template name="EventsCalender" match="Row[@Style='EventsCalender']" mode="itemstyle">
    <xsl:variable name="dateTime" select="ddwrt:FormatDate(string(@EventDate), 1033, 3)" />
    <xsl:variable name="dateTimeCondensed" select="ddwrt:FormatDate(string(@EventDate), 1033, 2)" />
    <xsl:variable name="date"  select="substring-before(substring-after($dateTime, ', '), ', ')" />
    <xsl:variable name="month" select="substring-before($date, ' ')" />
    <xsl:variable name="shortMonth" select="substring($month, 1, 3)" />
 <xsl:variable name="day"   select="substring-after($date, ' ')" />
    <xsl:variable name="time"  select="substring-after($dateTimeCondensed, ' ')" />
 <xsl:variable name="SafeLinkUrl">
      <xsl:call-template name="OuterTemplate.GetSafeLink">
        <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
 <xsl:variable name="DisplayTitle">
  <xsl:call-template name="OuterTemplate.GetTitle">
   <xsl:with-param name="Title" select="@Title"/>
   <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
    <div class="item link-item">
  <div class="description calendar">
   <div class="calendarIcon">
    <xsl:value-of select="$day" />
     <xsl:value-of select="$shortMonth" />
   <div class="Information">
    <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
    <div class="title">
     <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
      <xsl:if test="$ItemsHaveStreams = 'True'">
       <xsl:attribute name="onclick">
        <xsl:value-of select="@OnClickForWebRendering"/>
      <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
       <xsl:attribute name="onclick">
        <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
      <xsl:value-of select="$DisplayTitle"/>
    <div class="location">
     <xsl:value-of select="@Location" />
    <div class="time">
     <xsl:value-of select="$time" />
You must be sure to add the following style sheet to your ItemStyle.xsl file. If you don’t, the modification will brick your CQWP.

Making the calendar standout

Now that we have a new style in place, we must make it look more like a calendar. Therefor we’ll add some CSS to our page. Open your CSS file and paste these styles to it:
 margin:.25em 10px 10px 0;
 background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
 background: -moz-linear-gradient(top,  #ededef,  #ccc); 
 font:bold 20px/40px Arial Black, Arial, Helvetica, sans-serif;
 text-shadow:#fff 0 1px 0; 
 -moz-box-shadow:0 2px 2px #888;
 -webkit-box-shadow:0 2px 2px #888;
 box-shadow:0 2px 2px #888;
.calendarIcon em{
 font:normal bold 10px/20px Arial, Helvetica, sans-serif;
 text-shadow:#00365a 0 -1px 0; 
 background:-webkit-gradient(linear, left top, left bottom, from(#145866), to(#2190a6)); 
 background:-moz-linear-gradient(top,  #145866,  #2190a6); 
 border-top:1px solid #00365a;
.calendarIcon:before, .calendarIcon:after{
 -moz-box-shadow:0 1px 1px #fff;
 -webkit-box-shadow:0 1px 1px #fff;
 box-shadow:0 1px 1px #fff;
.calendarIcon em:before, .calendarIcon em:after{
 background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
 background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
.calendarIcon em:before{left:9px;} 
.calendarIcon em:after{right:9px;}
Save all our files back to SharePoint and don’t forget to publish them, too. If you’ve done everything right, you can select the new created style in the CQWP settings and admire your new good looking calendar list on your page.


  1. Hi,

    Wonderful post! Thanks for Sharing.

    I am trying to display the time according to their local but by the above code it is displaying the time based on the server.

    I have tried searching for a solution but nothing has worked so far…..can you help me?

    Thanks in Advance,

  2. That isn't so easy. The CQWP is rendering the html on the server before the content is submitted to the browser. Therefor you would need some kind of JS to calc the delta of your users timezone (What I consider kind of messy). Maybe you'l find some more information here:
    Good luck

  3. Thanks .....this worked perfectly for me on my project!!!

    1. Your welcome. Nice to hear that the calendar is used on other SharePoint sites.

  4. Hi Hagen

    I followed all your steps but, I get a "Unable to display this Web Part" error.

    Any advise?

    1. Unfortunately the description of the error does give a hint about the problem. The CQWP can be tricky when the XML isn't correct. My best guess would be to double check the XML. When redoing the steps, upload the changes after every step. That way you can see when it breaks.

    2. Btw if you are already on Office 365 consider to use the modern pages and Office PnP

  5. I was having Problems implementing this on our SharePoint 2013. It turns out it was a simple syntax error.I copied and pasted the following xmlns:ddwrt=””. The quote marks caused errors. The quote should be this " not ”. Hope this helps other people still working on SharePoint 2013

  6. Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. latest web series

  7. What a fantabulous post this has been. Never seen this kind of useful post. I am grateful to you and expect more number of posts like these. Thank you very much. ecommerce hosting online store

  8. A very excellent blog post. I am thankful for your blog post. I have found a lot of approaches after visiting your post. Windows Hosting

  9. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. Australian Google Adword company

  10. Thanks For Sharing Amzing Post And Ager Aap paise Kamane Wala Game Ki Talash Kar Rhe Hai Tho Ye Games Best Hai Saath Mai Gadi Wala Game Bhi Kaafi Ache Hai

  11. Excilent Post Thanks For Sharing Iam Daily Reader Of Your Blog And Check My Post Best Gana Download Karne Wala Apps Or Saath Mai Full HD Video Download Karne Wala Apps Post Bhi Read Kar Shkte Hai

  12. Simply a smiling visitor here to share the love (:, btw great pattern . new york web designs

  13. We are leading among web development makers and have over years of experience in web design, business branding, and content marketing. web development agency in usa

  14. Be grateful you for spending time to speak about this, I think strongly about that and delight in reading read more about this topic. Whenever possible, just like you become expertise, do you mind updating your web site with a lot more details? It can be highly great for me. Two thumb up in this article! website designers san francisco

  15. The when I read a blog, I hope so it doesnt disappoint me approximately that one. I mean, Yes, it was my option to read, but When i thought youd have some thing interesting to state. All I hear is often a lot of whining about something you could fix if you ever werent too busy in search of attention. web design agency los angeles

  16. Judging by the way you write, you seem like a professional writer.;.”\"” website design la

  17. It’s difficult to get knowledgeable individuals during this topic, however, you seem like what happens you are referring to! Thanks web design company los angeles

  18. Glad to be one of many visitants on this awing web site : D. website design agency

  19. I appreciate everything you have added to my knowledge base.Admiring the time and effort you put into your blog and detailed information you offer.Thanks. SEO Vancouver

  20. I haven’t any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. Vancouver SEO Company

  21. Thanks, foг ones marvelous posting! I genuinely enjoyed reading it, you miggһt Ƅe a great author. I wiⅼl made certain to booҝmark your blog and ѡill often come back sometime soon. I want to encoᥙrage yourself to continue your great job, have a nice evening!
    Web Development Course
    best web development courses
    web development classes
    web development course near me
    Web Development Training
    training on web development
    web development training program
    web development training course
    web development summer training

  22. The subsequent advance is something new that most organizations and their specialists haven't knew about or executed into their insurance programs.tor hidden url list

  23. This comment has been removed by the author.

  24. Love to read it,Waiting For More new Update and I Already Read your Recent Post its Great Thanks. Epik-protocolEPIK

  25. We are a top SEO services agency in Pakistan with a success rate of 91%. Seo Services In Pakistan

  26. Now I know that I was reading a blog with a post that is very commete. Thank you for sharing the information you post. I just subscribe to your blog. This is a great blog.adding therapists

  27. I havent any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. inventory template


Featured Post

The Retro Powershell - Looking good in 8-Bit | Part 1

I wrote a little script that, when placed in your PowerShell Profile, will print a message similar to the old boot message you got from you...