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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show week number in month view?

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.

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

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7733 05/29/2017 05/29/2017 ASP.NET MVC Schedule
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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