Articles in this section
Category / Section

How to show week number in month view?

3 mins read

How to show week number in month view?

The following steps helps you to show week number in month view.

Step 1:  Create an MVC application and include the EJMVC Schedule control in it by referring the following KB link,

https://syncfusion.com/kb/3606/how-to-add-the-ejmvc-schedule-control-in-the-mvc-application

Step 2: Define the Create and ActionComplete events for Scheduler with appropriate handlers. These events will be raised during the initial Scheduler load and the completion of the view navigation action in it respectively.

 
@(Html.EJ().Schedule("Schedule1")
        .Width("100%")
        .Height("525px")
        .Orientation(Orientation.Horizontal)
         .CurrentView(CurrentView.Month)
        .CurrentDate(new DateTime(2016, 10, 29))
        .ScheduleClientSideEvents(evt => //here Scheduler events are defined
            evt.Create("onCreate")
            .ActionComplete("onComplete"))
        .AppointmentSettings(fields => fields.Datasource(ViewBag.datasource)
                .Id("Id")
                    .Subject("Subject")
                    .StartTime("StartTime")
                    .EndTime("EndTime")
                    .AllDay("AllDay")
                    .Recurrence("Recurrence")
                    .RecurrenceRule("RecurrenceRule")
                     )
)

 

Step 3: onCreate and onComplete are the functions within which the code to show week number in month view is defined as shown in the below code example.

function onCreate() { //  this function will be called during the initial load 
            var obj = $("#Schedule1").data("ejSchedule");
            if (obj.currentView() == "month") {
               Date.prototype._getWeekNumber = function () {
                    var weekNo = Math.ceil((((this - new Date(this.getFullYear(), 0, 1)) / 86400000) + new Date(this.getFullYear(), 0, 1).getDay() + 1) / 7);
                    return (weekNo > 52) ? weekNo - 52 : weekNo;
                };
                var result = $.grep($(".cusRow"), function (value) { if ($(value).hasClass("cusRow")) { return value; } });
                if (result.length != 0) $(".cusRow").remove();
                var date = new Date(obj.currentDate());
                var weekFirst = new Date(date.getFullYear(), date.getMonth(), 1);
                var $tr = "<tr class='cusRow'>";
              Date.prototype._currentWeekDates = function (firstdayofweek) {
                var dayDiffer = this.getDay() - firstdayofweek,
                    start = new Date(this.getFullYear(), this.getMonth(), this.getDate() + (((dayDiffer < 0) ? dayDiffer + 7 : dayDiffer) * -1)),
                    end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 6);
                return { start: new Date(start), end: new Date(end) };
            };
              for (var a = 0, len = obj._dateRender.length / 7 ; a < len; a++) {
                    var weekDate = weekFirst._currentWeekDates(obj._firstdayofweek);
                    var weekNumber = weekDate.start._getWeekNumber();
                    var count = 0, total = ((weekDate.end - weekDate.start) / (1000 * 60 * 60 * 24)) + 1;
                    for (b = 0; b < total; b++) {
                        if (obj.monthDays.indexOf(weekDate.start.getTime() + (1000 * 60 * 60 * 24 * b)) != -1) count++;
                    }
                    $tr += "<td colspan='" + count + "' style='padding:5px;border-left:1px solid #c3c3c3;border-bottom:1px solid #c3c3c3;text-align: center;'>" + weekNumber + "</td>";
                    weekFirst = new Date(weekDate.end.getTime() + (1000 * 60 * 60 * 24));
                }
                $tr += "</tr>";
                $($tr).insertBefore(obj.element.find(".e-headerdays").find("tr:first"));
                obj.element.find(".cusRow").children().first().css("border-left","none");
                obj.refreshScroller();
            }
        }
function onComplete(args) { //  this function will be called when the view is changed
            if (args.requestType == "viewNavigate" || args.requestType == "dateNavigate")
                onCreate();
        }

 

Step 4: Include the below CSS style in the sample to show the day’s name in month view.

<style type="text/css">
    .e-schedule .e-horizontalmonthtimecellsht {
        height: 91px;
    }
</style>

Note:

For vertical view, include the below code example instead of step 3 and 4

 

function onCreate() {
        var obj = $("#Schedule1").data("ejSchedule");
        if (obj.currentView() == "month") {
            Date.prototype._getWeekNumber = function () {
                var weekNo = Math.ceil((((this - new Date(this.getFullYear(), 0, 1)) / 86400000) + new Date(this.getFullYear(), 0, 1).getDay() + 1) / 7);
                return (weekNo > 52) ? weekNo - 52 : weekNo;
            };
            var date = new Date(obj.currentDate());
            var weekFirst = new Date(date.getFullYear(), date.getMonth(), 1);
            Date.prototype._currentWeekDates = function (firstdayofweek) {
                var dayDiffer = this.getDay() - firstdayofweek,
                    start = new Date(this.getFullYear(), this.getMonth(), this.getDate() + (((dayDiffer < 0) ? dayDiffer + 7 : dayDiffer) * -1)),
                    end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 6);
                return { start: new Date(start), end: new Date(end) };
            };
            for (var a = 0, len = obj._dateRender.length / 7 ; a < len; a++) {
                var weekDate = weekFirst._currentWeekDates(obj._firstdayofweek);
                var weekNumber = weekDate.start._getWeekNumber();
                var count = 0, total = ((weekDate.end - weekDate.start) / (1000 * 60 * 60 * 24)) + 1;
                $($(".e-scrolltimecells").find(".e-timecelldivs")[a]).html("Week" + " " + weekNumber);
                weekFirst = new Date(weekDate.end.getTime() + (1000 * 60 * 60 * 24));
            }
        }
    }
    function onComplete(args) {
        if (args.requestType == "viewNavigate" || args.requestType == "dateNavigate")
            onCreate();
    }

 

Step 5: Run the sample and now you can see the week number in horizontal month view as shown below.

Week number in horizontal month view sample

MVC Sample: http://www.syncfusion.com/downloads/support/forum/129240/ze/Sample-86267156

ASP Sample: http://www.syncfusion.com/downloads/support/forum/129240/ze/Sample1215035652

JS Sample: http://jsplayground.syncfusion.com/xzewq45f

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied