Click here to Skip to main content
15,868,141 members
Articles / Programming Languages / C#
Article

Adding week numbers to ASP.NET Calendar Control

Rate me:
Please Sign up or sign in to vote.
3.80/5 (5 votes)
7 Mar 2008CPOL1 min read 72.7K   652   17   12
How to add a week number column to the calendar control using javascript

Introduction

This is a simple way to add an extra column to the asp.net calendar control that shows the
week number for each row like illustrated below.

CalWithWeeks.gif

Background

In some contries week numbers is often used and the standard calendar control does not
include the option to show week numbers.

After having experimented with different events of the control I discovered that using javascript
the column could be added very simpel, all though I would have preffered a code-behind
solution.

In my search for a solution I found many request for this, but no sutable solution.

Using the code

The code is simple. I use a javascript function "addWkColumn" to manipulate the table that is
created by the calendar control.

JavaScript
function addWkColumn(tblId, wkStart)
{
    var tbl = document.getElementById(tblId);
    var tblBodyObj = tbl.tBodies[0];
    for (var i=0; i<tblBodyObj.rows.length; i++) 
    {
        // Month Header
        if (i==0)
        {
            // Add extra colspan column
            tblBodyObj.rows[i].cells[0].colSpan=8;
        }
        // Week Header
        if (i==1)
        {
            // Add week column headline
            var newCell = tblBodyObj.rows[i].insertCell(0);
            newCell.innerHTML = 'wk';
            newCell.style.fontSize= '8px';
            newCell.style.fontWeight= 'bold';
            newCell.style.verticalAlign= 'bottom';
            newCell.style.backgroundColor = '#ffffee';
        } 
        // Normal row
        if (i >= 2 )
        {
            // Add the weeknumbers 
            var newCell = tblBodyObj.rows[i].insertCell(0);
            newCell.innerHTML = wkStart;
            wkStart += 1;
            newCell.style.fontSize= '8px';
            newCell.style.backgroundColor = '#ffffee';
        }
    }
}

Now all you have to do is to call the javascript function with the table id for the calendar table.

To do this I use the ClientScript.RegisterStartupScript from code behind, to ensure the correct
clientid name and to find the week number for the first week in the shown month.

C#
private void addWeekNumberColumn()
{
    // Get the date shown in the calendar control
    DateTime curMonth = Calendar1.VisibleDate;

    // Find first day of the current month
    curMonth = Convert.ToDateTime(curMonth.Year.ToString() + "-" + curMonth.Month.ToString() + "-01");
    
    // Build javascript
    string jscript = "<script type='text/javascript'> addWkColumn('" + Calendar1.ClientID + "', " + getISOWeek(curMonth).ToString() + ");</script>";
    
     // Add script to page for execution of addWkColumn javascript function
    Page.ClientScript.RegisterStartupScript(this.GetType(), "AddWeeknumbers", jscript);
}
// Helper function to find ISO week
private int getISOWeek(DateTime day)
{
    return System.Globalization.CultureInfo.CurrentCulture.Calendar.GetWeekOfYear(day, System.Globalization.CalendarWeekRule.FirstFourDayWeek, DayOfWeek.Monday);
}

Now all you have to do is to call the addWeekNumberColumn() function from the page_load
event of the page.

Points of Interest

Please note that the javascript function should only be called with a reference to a calendar
control created tableID, as it references cell numbers directly. This is no problem unless you call
it with a different table.

Happy coding!

History

Version 1.0

License

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


Written By
Chief Technology Officer TimeMap ApS
Denmark Denmark
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralThanks for the example... Pin
simpa6-May-11 6:30
simpa6-May-11 6:30 
GeneralInstead of inserting a new column Pin
Tattarn23-Jul-08 1:55
Tattarn23-Jul-08 1:55 
First of, thanks for this article, it sure helped me with solving the problem with week-numbers not showing.
I used your solution but reworked it slightly so that you can still choose weeks, and also fixed the problem with using VisibleDate since it wont be set when a single day is selected in the calendar.

Instead of inserting a whole new column, I use the SelectWeekText to show some selectortext for the weeks.
This text I set to something that can be easily found and replaced for instance SelectWeekText="replaceWeekText".

Then I changed the javascript to:

function addWkColumn(tblId, wkStart)
{
    var tbl = document.getElementById(tblId);
    var tblBodyObj = tbl.tBodies[0];
    for (var i=0; i<tblbodyobj.rows.length;>
    {
        // Normal row
        if (i >= 2 )
        {
            // Add the weeknumbers 
            tblBodyObj.rows[i].cells[0].innerHTML = tblBodyObj.rows[i].cells[0].innerHTML.replace(/replaceWeekText/g,'v ' + wkStart);
            wkStart=wkStart+1;
        }
    }
}


This way the weeks will still be selectable and also show the correct weeknumber.

There was also a problem with only using VisibleDate since it is set to DateTime.MinDate when a day is selected.

So, on PageLoad (and !IsPostBack) I use DateTime.Now to get the weeknumber, and on event VisibleMonthChanged; e.NewDate is used instead.
When they are used, I store that date in a HiddenField so that when the event SelectionChanged is called (single day selected) and
VisibleDate therefore cant be used, the value from the HiddenField is used instead (using selecteddate is not an option since it can be a date from previous or next month).

Doing it this way, it will show correct weeks, which also will be selectable and the weeks will be correct at all times.

Hope this helps someone Smile | :)
GeneralRe: Instead of inserting a new column Pin
nilsreuvers2-Sep-08 2:37
nilsreuvers2-Sep-08 2:37 
GeneralRe: Instead of inserting a new column Pin
nilsreuvers2-Sep-08 3:28
nilsreuvers2-Sep-08 3:28 
GeneralRe: Instead of inserting a new column Pin
woodz19-Dec-08 9:28
woodz19-Dec-08 9:28 
GeneralRe: Instead of inserting a new column Pin
woodz19-Dec-08 9:32
woodz19-Dec-08 9:32 
QuestionIs it working properly? Pin
ebbehundborg27-Mar-08 23:37
ebbehundborg27-Mar-08 23:37 
AnswerRe: Is it working properly? Pin
TDunk28-Mar-08 0:13
TDunk28-Mar-08 0:13 
GeneralISO week of the year numbers Pin
PIEBALDconsult7-Mar-08 5:13
mvePIEBALDconsult7-Mar-08 5:13 
GeneralRe: ISO week of the year numbers Pin
TDunk7-Mar-08 7:19
TDunk7-Mar-08 7:19 
GeneralRe: ISO week of the year numbers Pin
PIEBALDconsult7-Mar-08 11:40
mvePIEBALDconsult7-Mar-08 11:40 
GeneralRe: ISO week of the year numbers Pin
TDunk7-Mar-08 21:08
TDunk7-Mar-08 21:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.