Thursday, 25th January 2007CSS ASP Calendar

An ASP Dynamic Calendar that produces a Valid CSS & XHTML Calendar

Before I begin, click here for an example of the calendar script below in action!

A friend recently asked me to help him with a booking form he was creating for a website. The key thing he couldn't do was have a simple popup calendar (date picker) that a user could easily select a date from which would then fill out the date field on the form when clicked (fo an example of the calendar script used a date picker, click here)

Joy of joys I thought - at last a chance for me to do a little dabbling in the world of ASP.NET - I'd heard great things about the calendar control (3 lines of code and your done, etc). Alas I was to be very disappointed.

It seems that Microsoft still have many lessons to learn when it comes to clean HTML and CSS implementations. The code produced by the ASP.NET calendar component was awful, difficult to customize and downright heavy.

"Sod this" I thought, I'll script one up myself, now rather than reinventing the wheel, I discovered that Veerle (veerle.duoh.com) had already put a lot of effort in to producing a CSS styled XHTML calendar layout so I used the HTML of that as the goal for my script to produce.

Alternative CSS Stylesheets for the Calendars

Please note however that Veerle''s CSS cannot be used for commercial purposes - to that end, I have coded two alternative CSS stylesheets - these work slightly different to Veerle''s and all of the references use the #calendar absolute reference so you can copy and paste directly in your current stylesheet without worry about contamination of your other CSS styles. Both styles are included in the download zip and can be viewed here: Funky CSS Calendar and here Windows Style CSS Calendar

The Code

Now - I'm not going to comment or explain the script at this point because its very straight forward - if anyone does want more details, let me know. I have also produced a PHP version of the script for fun, this can be seen here. The code is available below or as a downloadable ZIP here: asp css calendar.zip


<%
dateToView = request("dateToView")
IF dateToView = "" THEN dateToView = date
daysInCurrentMonth = Day(DateSerial(year(dateToView), month(dateToView) + 1, 0))
firstDateofMonthDate = "1/" & month(dateToView) & "/" & year(dateToView)
firstOfMonthDay = weekday(firstDateofMonthDate)
lastOfMonthDay = weekday(daysInCurrentMonth & "/" & month(dateToView) & "/" & year(dateToView))
previousMonth = DateAdd("m", -1, dateToView)
nextMonth = DateAdd("m", 1, dateToView)
%>



<%
'WRITTEN BY BOB MCKAY, FRESHMANGO.COM - USE AS YOU WISH BUT PLEASE LEAVE THIS
'ALL XHTML & CSS BY VEERLE: http://veerle.duoh.com
columnCounter = 0
FOR fillLeadingEmptyDays = 1 TO (firstOfMonthDay - 1)
columnCounter = columnCounter + 1
Response.Write(" ")
NEXT
FOR enterDays = 1 TO daysInCurrentMonth
columnCounter = columnCounter + 1
Response.Write(" ")
IF columnCounter = 7 THEN
Response.Write(" ")
columnCounter = 0
END IF
NEXT
FOR fillEmptyDays = (columnCounter + 1) TO 7
IF columnCounter = 0 THEN EXIT FOR
Response.Write(" ")
NEXT
%>
<< <%=monthName(month(dateToView))%> <%=year(dateToView)%> >>
S M TW T FS
 
 IF enterDays & "/" & month(dateToView) = day(date) & "/" & month(date) THEN Response.Write(" class = ""today""")
dayLinkDestination = "#"
Response.Write(" href=""" & dayLinkDestination & """>" & enterDays & "
 

Comment On This Article