Category: Uncategorized

SharePoint 2010: Custom Calendar Item Style

A small variation of the calendar style provided at labs.steveottenad.com. I made it look like this

SharePoint 2010 Calendar style
Add the following template to ItemStyle.xsl as explained in the above article, including adding the namespace xmlns:ddwrt….:

<xsl:template name="EventDisplay" match="Row[@Style='EventDisplay']" mode="itemstyle"><br />
	<xsl:variable name="dateTime" select="ddwrt:FormatDate(string(@EventDate), 1033, 3)" /><br />
	<xsl:variable name="dateTimeCondensed" select="ddwrt:FormatDate(string(@EventDate), 1033, 2)" /><br />
	<xsl:variable name="date"  select="substring-before(substring-after($dateTime, ', '), ', ')" /><br />
	<xsl:variable name="month" select="ddwrt:FormatDateTime(string(@EventDate), 1033, 'MMM')" /><br />
	<xsl:variable name="day"   select="substring-after($date, ' ')" /><br />
	<xsl:variable name="time"  select="substring-after($dateTimeCondensed, ' ')" /><br />
<xsl:variable name="SafeLinkUrl"><br />
            <xsl:call-template name="OuterTemplate.GetSafeLink"><br />
                 <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/><br />
            </xsl:call-template><br />
       </xsl:variable><br />
		<xsl:variable name="DisplayTitle"><br />
            <xsl:call-template name="OuterTemplate.GetTitle"><br />
                <xsl:with-param name="Title" select="@Title"/><br />
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/><br />
             </xsl:call-template><br />
       </xsl:variable><br />
	<xsl:if test="ddwrt:FormatDateTime(string(ddwrt:Today()),1033,'yyyyMMdd') &lt;= ddwrt:FormatDateTime(string(@EventDate),1033,'yyyyMMdd')"></p>
<div class="item link-item">
<div class="description xslCal">
<div class="left">
				<span class="month"><xsl:value-of select="$month" /></span><br />
				<span class="day"><xsl:value-of select="$day" /></span>
			</div>
<p><!--/Left--></p>
<div class="right">
				<span class="title"><br />
<a href="{$SafeLinkUrl}"><xsl:value-of select="$DisplayTitle" /></a></span>
		   </div>
<p><!--/Right-->
		</div>
<p><!--/description-->
	</div>
<p><!--/item--><br />
	</xsl:if><br />
</xsl:template>

Add this css to your stylesheet (see original article for instructions):
.xslCal .left{ position:relative; float:left; text-align:center}<br />
.xslCal .right span{display:block; margin-left:75px;}<br />
.xslCal .month{text-transform:uppercase; font-weight:bold; background:#71cdf4; color:#fff; padding:2px; float:left;width :30px; display:inline-block; text-align:center }<br />
.xslCal .day{font-size:11px; text-align:center; background:#eee; display:inline-block; width:22px;padding:2px	}<br />
.xslCal .title{color:#0775aa; display:block; padding-top:3px; font-family:verdana}

Blog Categories