)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show week number in month view?

Platform: ASP.NET MVC |
Control: Schedule |
Published Date: May 29, 2017 |
Last Revised Date: May 24, 2019

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

 

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon