How to set different work hours on each day of a Scheduler in .NET MVC application?
This knowledge base article explains how to highlight different working hours on each day of a ASP.NET MVC Scheduler.
Step 1: Create an MVC application with default Schedule sample by referring the following knowledge base link.
https://help.syncfusion.com/aspnetmvc/schedule/getting-started
Also, define the sample with Resources and Grouping option, as shown below.
@(Html.EJ().Schedule("Schedule1")
.Width("100%")
.Height("525px")
.CurrentDate(new DateTime(2017, 6, 5))
.CurrentView(CurrentView.Workweek)
.WorkHours(hrs => hrs.Highlight(false))
.Resources(res =>
{
res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(true).ResourceSettings(flds => flds.Datasource((System.Collections.IEnumerable)ViewBag.Owners).Text("text").Id("id").GroupId("groupId").Color("color")).Add();
})
.Group(gr =>
{
gr.Resources(ViewBag.Resources);
})
.AppointmentSettings(fields => fields.Datasource((System.Collections.IEnumerable)ViewBag.datasource)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Description("Description")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule")
.ResourceFields("OwnerId"))
.ScheduleClientSideEvents(f => f.Create("setWorkHours").ActionComplete("setWorkHours"))
)
Step 2: Work hours can be manually highlighted by adding the e-businesshighlightworkcells class to the required cells. This should be done while the initial load of the scheduler as well as on every action completion time. The setWorkHours function will be called during the initial load as well as on every successful action completion such as date or view navigation or so on, where each resource’s day index along with the start and end time of the work hour is defined. Based on the externally provided start and end values within the setWorkHours function, the e-businesshighlightworkcells class is added to the respective resource cells.
function setWorkHours(args) {
if ((args.requestType == "viewNavigate" || args.requestType == "dateNavigate" || args.type == "create") && this.currentView() != "month" && !this._isCustomMonthView() && this.model.orientation != "horizontal") {
var resource = {
0: { //Nancy
// day index
1: { StartTime: 9, EndTime: 17 },
2: { StartTime: 11, EndTime: 15 },
3: { StartTime: 9, EndTime: 15 }
},
1: { //Steven
1: { StartTime: 9, EndTime: 12 },
4: { StartTime: 10, EndTime: 13 }
},
2: { //Michael
3: { StartTime: 9, EndTime: 12 },
6: { StartTime: 10, EndTime: 13 }
}
};
var viewCount = this._dateRender.length;
for (var a = 0; a < this.res1.length; a++) {
var curRes = resource[a];
for (var b = 0; b < this._dateRender.length; b++) {
var dateIndex = new Date(this._dateRender[b]).getDay();
if (!ej.isNullOrUndefined(curRes[dateIndex])) {
for (var i = (curRes[dateIndex].StartTime * 2) ; i < (curRes[dateIndex].EndTime * 2) ; i++) {
this.element.find(".e-workcellstab tr td:nth-child(" + ((b + 1) + (a * viewCount)) + ")").eq(i).addClass("e-businesshighlightworkcells");
}
}
}
}
}
}
Step 3: Run the sample and the Scheduler control will be displayed with different work hours on each day as follows.
Figure 1: Scheduler control displayed with different working hours (white colored cells) on each day.
Sample Link:
https://www.syncfusion.com/downloads/support/directtrac/183765/ze/ScheduleSample-1525560109
Conclusion
I hope you enjoyed learning about how to set different work hours on each day of a Scheduler in .NET MVC application.
You can refer to our ASP.NET MVC Scheduler 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 ASP.NET MVC Scheduler 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!
