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:
http://<SiteCollection>/Style%20Library/XSL%20Style%20Sheets/ItemStyle.xsl
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:call-template>
    </xsl:variable>
 <xsl:variable name="DisplayTitle">
  <xsl:call-template name="OuterTemplate.GetTitle">
   <xsl:with-param name="Title" select="@Title"/>
   <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
  </xsl:call-template>
    </xsl:variable>
    <div class="item link-item">
  <div class="description calendar">
   <div class="calendarIcon">
    <xsl:value-of select="$day" />
    <em>
     <xsl:value-of select="$shortMonth" />
    </em>
   </div>
   <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:attribute>
      </xsl:if>
      <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
       <xsl:attribute name="onclick">
        <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
       </xsl:attribute>
      </xsl:if>
      <xsl:value-of select="$DisplayTitle"/>
     </a>
    </div>
    <div class="location">
     <xsl:value-of select="@Location" />
    </div>
    <div class="time">
     <xsl:value-of select="$time" />
    </div>
   </div>
  </div>
 </div>
  </xsl:template>
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.
xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime”

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:
.calendarIcon{
 margin:.25em 10px 10px 0;
 padding-top:5px;
 float:left;
 width:50px;
 background:#ededef;
 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-align:center;
 color:#000;
 text-shadow:#fff 0 1px 0; 
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px; 
 position:relative;
 -moz-box-shadow:0 2px 2px #888;
 -webkit-box-shadow:0 2px 2px #888;
 box-shadow:0 2px 2px #888;
 }
.calendarIcon em{
 display:block;
 font:normal bold 10px/20px Arial, Helvetica, sans-serif;
 text-transform:uppercase;
 color:#fff;
 text-shadow:#00365a 0 -1px 0; 
 background:#04599a;
 background:-webkit-gradient(linear, left top, left bottom, from(#145866), to(#2190a6)); 
 background:-moz-linear-gradient(top,  #145866,  #2190a6); 
 -moz-border-radius-bottomright:3px;
 -webkit-border-bottom-right-radius:3px; 
 border-bottom-right-radius:3px;
 -moz-border-radius-bottomleft:3px;
 -webkit-border-bottom-left-radius:3px; 
 border-bottom-left-radius:3px; 
 border-top:1px solid #00365a;
 } 
.calendarIcon:before, .calendarIcon:after{
 content:'';
 float:left;
 position:absolute;
 top:4px; 
 width:6px;
 height:6px;
 background:#111;
 z-index:1;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
 -moz-box-shadow:0 1px 1px #fff;
 -webkit-box-shadow:0 1px 1px #fff;
 box-shadow:0 1px 1px #fff;
 }
.calendarIcon:before{left:7px;} 
.calendarIcon:after{right:7px;} 
.calendarIcon em:before, .calendarIcon em:after{
 content:'';
 float:left;
 position:absolute;
 top:-3px; 
 width:2px;
 height:10px;
 background:#dadada;
 background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
 background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
 z-index:2;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 }
.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.


66 comments:

  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,
    Sadana

    ReplyDelete
  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:
    https://autosponge.wordpress.com/2008/05/09/ddwrt-formatdate-and-formatdatetime/
    Good luck

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

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

      Delete
  4. Hi Hagen

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

    Any advise?

    ReplyDelete
    Replies
    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.

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

      Delete
  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=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime”. The quote marks caused errors. The quote should be this " not ”. Hope this helps other people still working on SharePoint 2013

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

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

    ReplyDelete
  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

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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  23. This comment has been removed by the author.

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

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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  28. By understanding a few basics about web hosting and web hosting service providers, you can easily select a web host that is best for you. Here's a quick run-down of 10 basic questions you need answered before choosing a web host.  best web hosting reviews 2020

    ReplyDelete
  29. Jumbled, insufficient arrangement of components.Webdesign

    ReplyDelete
  30. The increasing importance of technology in every industry continues to drive the need for a diverse group of qualified professionals to manage the implementation and changes in technology. Pursuing a degree at a technology management graduate school can be the right step for beginning a rewarding career in the management of everything from computer hardware to information security within an organization. Overview of Technology Management Technology management professionals are in high demand because of the unique set of skills they possess. best Coupons for discount

    ReplyDelete
  31. The increasing importance of technology in every industry continues to drive the need for a diverse group of qualified professionals to manage the implementation and changes in technology. Pursuing a degree at a technology management graduate school can be the right step for beginning a rewarding career in the management of everything from computer hardware to information security within an organization. Overview of Technology Management Technology management professionals are in high demand because of the unique set of skills they possess. iPhoneIMEI.net

    ReplyDelete
  32. Besides, it is one of the sincere craving of any financial specialist to see his/her site at the top among the contenders of a similar business vertical. SEO Services

    ReplyDelete
  33. We are tied directly into the sate’s renewal database which allows us to process your request almost instantly. buy essays SEO en México

    ReplyDelete
  34. We are tied directly into the sate’s renewal database which allows us to process your request almost instantly. SEO en México

    ReplyDelete
  35. The increasing importance of technology in every industry continues to drive the need for a diverse group of qualified professionals to manage the implementation and changes in technology. Pursuing a degree at a technology management graduate school can be the right step for beginning a rewarding career in the management of everything from computer hardware to information security within an organization. Overview of Technology Management Technology management professionals are in high demand because of the unique set of skills they possess. buy cheap rdp

    ReplyDelete
  36. Thank you so much for sharing this great blog.Very inspiring and helpful too.Hope you continue to share more of your ideas.I will definitely love to read. Hershey Web Design

    ReplyDelete
  37. This amazing appears to be altogether recommended. Each smallish data are intended and also massive amount back ground awareness. I prefer this unique very much. Technology

    ReplyDelete
  38. Very nice article, I enjoyed reading your post, very nice share, I want to twit this to my followers. Thanks!. getresponse review

    ReplyDelete
  39. 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. sviluppo siti web Corsico

    ReplyDelete
  40. Today, I was just browsing along and came upon your blog. Just wanted to say good blog and this article helped me a lot, due to which I have found exactly I was looking. freelance writer hire me

    ReplyDelete
  41. Profit primarily prime quality items -- you can understand them all within: New web series

    ReplyDelete
  42. A vast majority of all web sites on the Internet run on the Linux operation system. Linux is generally much more stable than Windows. Stability is critical in running a web site. ssd vps hosting

    ReplyDelete
  43. The low SEO pay workers, the individuals who got not exactly $ 30,000 yearly returns are likewise being questioned on the off chance that they can offer quality types of assistance while acquiring that low. Website laten maken

    ReplyDelete
  44. The majority of the web design formats made for business use, and ought to be engaging and attracting to the guests of the website. Webdesign Genk

    ReplyDelete
  45. When you are trying to figure out how reasonable the rates are for web design professionals there is a lot to consider. Usually the larger the company is the higher the rates are going to be, but the larger the company is the more options that are available to you as well. Allentown Website Designer

    ReplyDelete
  46. Thusly, on the off chance that it's impractical for the website to be made completely viable with all programs because of coding constraints, at that point the engineer needs to comprehend the various kinds and adaptations of web programs utilized by most of the website guests. Webdesign-seo-limburg.be

    ReplyDelete
  47. The usage statistics posted on various website suggest that many web developers prefer Laravel to other PHP frameworks. The expressive syntax of Laravel makes it easier for developers to write custom web applications rapidly. Also, the framework accelerates custom web application development by simplifying common web development tasks like session management, routing, authentication, file system management and unit testing. The Laravel developers can further curtail web development by availing object oriented libraries, command-line interface, template engine, ORM system, and queuing services. Order Web Design

    ReplyDelete
  48. It is nice to find a site about my interest. My first visit to your site is been a big help. Thank you for the efforts you been putting on making your site such an interesting and informative place to browse through. I'll be visiting your site again to gather some more valuable information.group calendar
    You truly did a good job.

    ReplyDelete
  49. I would like to thank you for the efforts you have put in writing this website. I’m hoping the same high-grade site post from you in the upcoming as well. Actually your creative writing abilities has encouraged me to get my own website now. Actually the blogging is spreading its wings quickly. Your write up is a good example of it. 먹튀폴리스

    ReplyDelete
  50. An attention-grabbing dialogue is value comment. I believe that you need to write more on this matter, it won’t be a taboo subject however usually individuals are not sufficient to speak on such topics. To the next. Cheers 서산출장마사지

    ReplyDelete
  51. some ayurvedic herbs have nasty side effects too that is why you should carefully choose the safer ones. 토토검증

    ReplyDelete
  52. However, these days, TutuApp web is considered as a dispersion of Apache Cordova which incorporates extra instruments.

    ReplyDelete
  53. The provision of access to websites and storage space to individuals and companies who owns websites is known as web hosting. This Internet Hosting service enables organizations and individuals to make the sites that they own accessible on the World Wide Web. The service also allows organizations and individuals to Register here

    ReplyDelete
  54. Good work, I enjoyed – Gulvafslibning | Kurt Gulvmand. It was good. View my blog sometime, it all about Lake Mary, FL Real Estate. how to get backlinks

    ReplyDelete
  55. I simply wanted to make a quick note to express gratitude to you for all of the unique information you are showing on this site. My prolonged internet look up has at the end of the day been paid with extremely good know-how to write about with my friends. I ‘d believe that we visitors are very much fortunate to live in a wonderful website with many brilliant individuals with helpful suggestions. I feel quite privileged to have discovered the web page and look forward to tons of more fabulous times reading here. Thank you again for a lot of things. click my site here – alternative medicine institute kolkata Daniel Gordon GLD Partners

    ReplyDelete
  56. Fantastic!! you are doing good job! I impressed. Many bodies are follow to you and try to some new.. After read your comments I feel; Its very interesting and every guys sahre with you own works. Great!!
    hành trình bay sang nga

    bay từ anh về việt nam

    vé máy bay từ pháp về việt nam giá rẻ

    các chuyến bay từ đức về việt nam hôm nay

    Lịch bay từ Hàn Quốc về Việt Nam tháng 7

    ReplyDelete
  57. Excellent and very exciting site. Love to watch. Keep Rocking. sites like fiverr in india

    ReplyDelete
  58. Can I just say what a relief to discover somebody that truly knows what theyre speaking about online. You certainly discover how to bring a difficulty to light making it crucial. Workout . should ought to see this and understand why side of the story. I cant believe youre not more well-liked since you also certainly develop the gift. desktop compters

    ReplyDelete
  59. In this article, you will find 8 simple steps if you are interested in how to learn web design. As a beginner, you will learn 8 steps needed to create a personal or business website. Designing a new website can be simple for those who are willing to take the time to learn web design. One Off and Ongoing Website Maintenance Services

    ReplyDelete

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...