Calendar Single Line CQWP Item Style

March 10, 2014 — 2 Comments

The content query web part allows your to apply a custom item style using XSL to view the information in a custom way. This item style shows a Calendar Event with a nice visual icon. Everything renders on a single line.



  1. Open SharePoint Designer.
  2. Open your site collection where you want to use this style.
  3. Click on All Files > Style Library > XSL Style Sheets.
  4. Check out the ItemStyle.xsl file
  5. At the end of the file, before the </xsl:stylesheet> tag copy and paste the item style below.
  6. You can now access this item style in you CWQP presentation style drop down

Note: You must enter the following field mappings in the template in for it to render properly.


<xsl:template name=”EventsLargeCalendarIcon” match=”Row[@Style=’EventsLargeCalendarIcon’]” mode=”itemstyle”>
<xsl:variable name=”SafeLinkUrl”>
<xsl:call-template name=”OuterTemplate.GetSafeLink”>
<xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>
<xsl:variable name=”SafeImageUrl”>
<xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>
<xsl:with-param name=”UrlColumnName” select=”‘ImageUrl'”/>
<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:variable name=”dateTime” select=”ddwrt:FormatDate(string(@StartDate), 1033, 3)” />
<xsl:variable name=”dateTimeCondensed” select=”ddwrt:FormatDate(string(@StartDate), 1033, 2)” />
<xsl:variable name=”date” select=”substring-before(substring-after($dateTime, ‘, ‘), ‘, ‘)” />
<xsl:variable name=”month” select=”substring-before($date, ‘ ‘)” />
<xsl:variable name=”day” select=”substring-after($date, ‘ ‘)” />
<xsl:variable name=”time” select=”substring-after($dateTimeCondensed, ‘ ‘)” />

<td><div style=”width:50px;height:50px; background-color: #E6E7E8; border-radius:5px;text-align:center;float:inherit”>
<div style=”font-size:8pt; text-align:center;border-top-left-radius:5px;border-top-right-radius:5px;background-color:#717174;color:white”><xsl:value-of select=”substring($month,1,3)” /></div>
<h1><xsl:value-of select=”$day” /></h1>

<td style=”width:125px”><a href=”{$SafeLinkUrl}” target=”_blank”><xsl:value-of select=”@Title” /></a></td>
<td style=”padding-right:15px;”>
<xsl:when test=”@AllDayEvent = 1″>

<xsl:value-of select=”ddwrt:FormatDateTime(@StartDate, 1033, ‘hh:mm tt’)” />

<xsl:if test=”@Recurrence = ‘1’”>
<img src=”/_layouts/images/recurrence.gif” />



2 responses to Calendar Single Line CQWP Item Style


    Is it possible to have the events display horizontally instead of vertically using the style above? If yes, what would I need to change? Thanks.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s