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>
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