Andrew Rea

This example simply gets a background image form the link provided below, applies some css, some anonymous types and outputs the current day and month in this fashion. 

First of all the site which I got this very cool graphic from is here, http://mintyferret.com/free/free-web-20-calendar-icons/, thanks! 

Just incase for whatever reasons that link stops working and you cannot get the calendar images.  Here is the images which is from the above link.

I obviously resized the brown one lol and used it in my example.  The mark up for the layout is as follows:

                <div class="smallCalendar">
                    <div class="month">
                        <%= new []{"JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"}.ElementAt<string>(DateTime.Now.Month - 1) %>
                    </div>
                    <div class="day">
                        <%= DateTime.Now.Day.ToString() %>
                    </div>
                </div>

OK, You see the syntax for the month there, but I will explain a bit more.  I have not really touched on the .NET Framework 3.5 yet, so this is one of my first uses of anonymous types.  I wanted to to create a simple array of Month names and select using the current month from the DateTime type.  This is a very long way of going about this, as I could have simply done the following:

                <div class="smallCalendar">
                    <div class="month">
                        <%=DateTime.Now.ToString("MMM").ToUpper() %>
                    </div>
                    <div class="day">
                        <%= DateTime.Now.Day.ToString() %>
                    </div>
                </div>

But as I say I just wanted to try out and experiment with some anonymous types.  Lastly is the CSS I used to style the above element blocks.  Nothing to special here, but it achieves my desired result.

.smallCalendar
{
	width: 45px;
	height: 50px;
	background: url( '/Images/CalendarSmall.jpg' ) no-repeat left 2px;
	text-align: center;
	float: left;
	margin-top: 10px;
	margin-right: 5px;
}
.smallCalendar .month
{
	color: #FFFFFF;
}
.smallCalendar .day
{
	font-size: 1.4em;
	color: #993333;
}

Cheers,

Andrew :-)