Category / Section
How to show week number and month name view range in JavaScript Schedule?
3 mins read
This knowledge base article explains the way to display week numbers and month names in custom view range in JavaScript Scheduler.
Step 1: Create a Schedule with custom view range in horizontal mode by referring the instructions given in the below UG link.
https://help.syncfusion.com/js/schedule/views#custom
Step 2: Define create and actionComplete scheduler events with appropriate handlers. These events will be raised during the initial load and the completion of the view navigation action respectively.
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
cellWidth: "40px",
orientation: "horizontal",
firstDayOfWeek: "Monday",
views: ["CustomView"],
currentView: ej.Schedule.CurrentView.CustomView,
currentDate: new Date(),
renderDates: {
start: new Date(2018, 9, 7),
end: new Date(2019, 3, 10)
},
group: {
resources: ["Owners"]
},
resources: [{
field: "ownerId",
title: "Owner",
name: "Owners", allowMultiple: true,
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, groupId: 1, color: "#f8a398" },
{ text: "Steven", id: 3, groupId: 2, color: "#56ca85" },
{ text: "Michael", id: 5, groupId: 1, color: "#51a0ed" },
{ text: "Milan", id: 13, groupId: 3, color: "#99ff99" },
{ text: "Paul", id: 15, groupId: 3, color: "#cc99ff" }
],
text: "text", id: "id", groupId: "groupId", color: "color"
}
}],
appointmentSettings: {
dataSource: dManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule",
resourceFields: "ownerId"
},
create: "onCreate",
actionComplete: "onComplete"
});
Step 3: Within create and actionComplete scheduler events, week numbers and month names for the corresponding month is calculated using custom view start date and rendered it in separate rows as shown below.
function onCreate() {
var obj = $("#Schedule1").data("ejSchedule");
if (obj._isCustomMonthView()) {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December"
];
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($(".weekRow"), function (value) {
if ($(value).hasClass("weekRow")) {
return value;
}
});
if (result.length != 0) {
$(".weekRow").remove();
$(".monthRow").remove();
}
var date = new Date(obj._renderStart);
var $tr = "<tr class='weekRow'>";
var $mTr = "<tr class='monthRow'>";
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 = Math.round(obj._dateRender.length / 7); a <= len; a++) {
var weekDate = date._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._dateRender.indexOf(weekDate.start.getTime() + (1000 * 60 * 60 * 24 * b)) != -1) count++;
}
if (count > 0) {
$tr += "<td colspan='" + count +
"' style='padding:5px;border-left:1px solid #c3c3c3;border-bottom:1px solid #c3c3c3;text-align: center;'>" +
weekNumber + "</td>";
date = new Date(weekDate.end.getTime() + (1000 * 60 * 60 * 24));
}
}
$tr += "</tr>";
$($tr).insertBefore(obj.element.find(".e-headerdays").find("tr:first"));
var dateIndexes = obj._dateRender.map(date => new Date(date).getMonth());
var monthIndex = [];
dateIndexes.forEach(index => {
if (monthIndex.indexOf(index) === -1) {
monthIndex.push(index);
}
});
var temp = 0;
for (var a = 0, length = monthIndex.length; a < length; a++) {
var colspan = dateIndexes.filter(index => index === monthIndex[a]).length;
$mTr += "<td colspan='" + colspan +
"'style='padding:5px;border-left:1px solid #c3c3c3;border-bottom:1px solid #c3c3c3;text-align: center;'>" +
monthNames[monthIndex[a]] + "," + obj.monthDays[(temp + colspan) - 1].getFullYear() + "</td>";
temp = temp + colspan;
}
$mTr += "</tr>";
$($mTr).insertBefore(obj.element.find(".e-headerdays").find("tr:first"));
obj.element.find(".weekRow").children().first().css("border-left", "none");
obj.refreshScroller();
}
}
function onComplete(args) {
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 custom view.
<style type="text/css">
.e-schedule .e-horizontalmonthtimecellsht {
height: 118px;
}
</style>
Step 5: Run the sample and now you can see the month name and week number one by one in horizontal custom view as shown below.
Figure 1: Schedule control displaying week number and month name in horizontal custom view range.
Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample358342082
Conclusion
I hope you enjoyed learning on how to show week number and month name view range in JavaScript Schedule.
You can refer to our JavaScript Schedule feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Schedule example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
