ASP.NET Calendar - Knowledge Base

« Back to Knowledge Base list

Add week number

Q:

We need your help to show the week number for each row in the calendar control.

A:

Here is the working example:

<%@ Page Language="C#" %>
<%@ Register TagPrefix="obout" Namespace="OboutInc.Calendar2" Assembly="obout_Calendar2_NET" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
     <title>obout ASP.NET Calendar examples</title>
     <script type="text/javascript">
        // Below we add a new method to the basic Date object
        // You can define your own getWeek() method if you don't like ISO 8601
        /**
         * Returns the week number for this date.  dowOffset is the day of week the week
         * "starts" on for your locale - it can be from 0 to 6. If dowOffset is 1 (Monday),
         * the week returned is the ISO 8601 week number.
         * @param int dowOffset
         * @return int
        */
        Date.prototype.getWeek = function (dowOffset) {
           /*getWeek() was developed by Nick Baicoianu at MeanFreePath: http://www.epoch-calendar.com */
 
           dowOffset = typeof (dowOffset) == 'int' ? dowOffset : 0; //default dowOffset to zero
           var newYear = new Date(this.getFullYear(), 0, 1);
           var day = newYear.getDay() - dowOffset; //the day of week the year begins on
           day = (day >= 0 ? day : day + 7);
           var daynum = Math.floor((this.getTime() - newYear.getTime() -
                   (this.getTimezoneOffset() - newYear.getTimezoneOffset()) * 60000) / 86400000) + 1;
           var weeknum;
           //if the year starts before the middle of a week
           if (day < 4) {
              weeknum = Math.floor((daynum + day - 1) / 7) + 1;
              if (weeknum > 52) {
                 nYear = new Date(this.getFullYear() + 1, 0, 1);
                 nday = nYear.getDay() - dowOffset;
                 nday = nday >= 0 ? nday : nday + 7;
                 /*if the next year starts before the middle of
                    the week, it is week #1 of that year*/
                 weeknum = nday < 4 ? 1 : 53;
              }
           } else {
              weeknum = Math.floor((daynum + day - 1) / 7);
           }
           return weeknum;
        }
 
        // our method that builds a month table (to ovveride the base Calendar method)
        function myBuildMonth() {
           // get the original month table
           var table = this._origin_buildMonth();
           // get the 1st of the month
           var currentDate = new Date(this.lastYear, this.lastMonth, 1, 9, 0, 0, 999);
           //get previous days of the week
           while (currentDate.getDay() != this.firstDayOfWeek) {
               currentDate.setDate(currentDate.getDate() - 1);
           }
 
           //---------------------------------------------------------
           // modify the month table - add one column with week number
           //---------------------------------------------------------
 
           // first row - row with the month title
           // change the single cell's colspan
           table.rows[0].cells[0].colSpan = 8;
 
           // for each of other 7 rows in the table
           for (var i = 1; i <= 7; i++) {
              // current row
              var row = table.rows[i];
              // new cell for this row
              var cell = row.insertCell(0);
              // the first row contains day names
              if (i > 1) {
                // the number of the week
                var weekN = currentDate.getWeek(this.firstDayOfWeek);
                // add the week number to the cell
                cell.appendChild(document.createTextNode(weekN.toString()));
                // make the style like for disabled date
                cell.className = this.styleDayDisabled;
                // but change its color
                cell.style.color = "#B0B0FF";
                // increase the current date on a week
                currentDate.setDate(currentDate.getDate() + 7);
              }
           }
           return table;
        }
     </script>
  </head>
  <body>
     <form id="Form1" runat="server">
        <asp:ScriptManager runat="server" ID="scriptManager" />
        <obout:Calendar runat="server"  ID="MyCalenar" />
        <script type="text/javascript">
           // the origin 'buildMonth' is saved?
           if (typeof oboutCalendar.prototype._origin_buildMonth != "function") {
              // not yet - save it
              oboutCalendar.prototype._origin_buildMonth = oboutCalendar.prototype.buildMonth;
              // and override it
              oboutCalendar.prototype.buildMonth = myBuildMonth;
           }
        </script>
     </form>
  </body>
</html>


Result: