How to build simple HTML Calendar

Feb 19, 2007

6 min read

.NET1.0

.NET1.1

.NET2.0

VS.NET2003

VS2005

C#2.0

.NET3.0

VB8

C#

VB

ASP.NET

Windows

.NET

Visual-Studio

Dev

WebForms

Beginner

WinForms

Author picture

by Mohm'ed Melhem

Contributor

44k Views

'

Screenshot - Calendar.gif

Introduction

This article focus on how to build Dynamic Calendar from scratch in easy steps so we can customize it for any new goal that may be requested in any project.

Background

Some Times telling what day could be task for even smarts one of people, and there is lot of ready tools build to help us with but, may someday someone ask you to build new calendar control from scratch so you I though how we can build one.

Using Code

To build any simple calendar we need to know several things about month we want show its table:

current month number and year number from this two knowns we get number of day's in current month at this year using function Date.DaysInMonth(year, month) after that we generate an instance of date object with passed month and year with day number 1, using another property of Date Object we get current (1 day in month number in first week of that month) currentDate.DayOfWeek() so we can get the offset in weeks array that contain days ordered from (Sun to Sat) so we can know how to represent our day as shown in code below.

Code

Function DrawCalender(ByVal month As Integer, ByVal year As Integer) As String
'to hold current date of this day for presentation peropse
Dim today As Date = New Date(Now.Year, Now.Month, Now.Day)
'
object of passed month and year
Dim currentDate As Date = New Date(year, CInt(month), 1)
'array hold days of week
Dim days() As String = New String() {"Sun", "Mon", "Tu", "Wen", "Thr", "Fri", "Sat"}
'
temp holder to hold week name from array above
Dim day As String
'number of days in selected month
Dim numDays As Integer = Date.DaysInMonth(year, month)
Dim index, position As Integer
Dim returnData As String = ""
'
1st day of month day number
Dim offset As Integer = currentDate.DayOfWeek()
'MsgBox(offset)
returnData = "<table border=""0"" cellpadding=""0"" cellspacing=""0"">"
returnData &= "<tr>"
returnData &= "<td colspan=""7"" align=""center"">" & currentDate.Month.ToString() & " / " & currentDate.Year & "</td>"
returnData &= "</tr>"
returnData &= "<tr>"
For Each day In days
returnData &= "<td align=""center"" width=""26"">" & day & "</td>"
Next
returnData &= "</tr>"
position = 0
For index = 1 - offset To numDays
If position Mod 7 = 0 Then
returnData &= "<tr>"
End If
If index < 1 Then
returnData &= "<td align=""center"">-</td>"
ElseIf index = today.Day AndAlso year = today.Year AndAlso month = today.Month Then
returnData &= "<td align=""center""><b>" & (index).ToString() & "</b></td>"
Else
returnData &= "<td align=""center"">" & (index).ToString() & "</td>"
End If

position += 1
If position Mod 7 = 0 Then returnData &= "</tr>"
Next

If position Mod 7 <> 0 Then
For index = 1 To 7 - (position Mod 7)
returnData &= "<td align=""center"">-</td>"
Next
returnData &= "</tr>"
End If
returnData &= "</table>"
Return returnData
End Function
Private Function Years() As String()
Dim str(10) As String
Dim index As Integer
For index = 0 To str.Length - 1
str(index) = Now.Year - str.Length + index + 1
Next
Return str
End Function

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)