Working Days and Hours in ASP.NET MVC Scheduler
The Scheduler can be customized on various aspects, and it inherits almost all the calendar-specific features, such as the following options:
- To set a custom time range display on the Scheduler.
- To set different working hours.
- To set different working days.
- To set a different first day of the week.
- To show or hide weekend days.
- To show the week number.
Setting working days
By default, the Scheduler considers the weekdays from Monday to Friday as Working days and therefore defaults to [1, 2, 3, 4, 5], where 1 represents Monday, 2 represents Tuesday, and so on. The days that are not defined in this working days collection are considered non-working days. When the weekend days are set to hide from the Scheduler, all those non-working days also get hidden from the layout.
The Work week and Timeline Work week views display exactly the defined working days on the Scheduler layout, whereas other views display all the days and simply differentiate the non-working days on the UI with an inactive cell color.
NOTE
The working or business hours depiction on the Scheduler is usually valid only on the specified working days.
The following example depicts how to set the Scheduler to display Monday, Wednesday, and Friday as the working days of a week.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(view => {
view.Option(View.Week).Add();
view.Option(View.WorkWeek).Add();
view.Option(View.Month).Add();
})
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.WorkDays(ViewBag.workday)
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
ViewBag.workday = new int[] { 1, 3, 5 };
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2023, 2, 13, 9, 30, 0), EndTime = new DateTime(2023, 2, 13, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2023, 2, 15, 9, 30, 0), EndTime = new DateTime(2023, 2, 15, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Hiding weekend days
The ShowWeekend property is used to either show or hide the weekend days of a week, and it is not applicable on the Work week view (since non-working days are usually not displayed on the Work week view). By default, it is set to true. Days that are not part of the working days collection of the Scheduler are usually considered non-working or weekend days.
Here, the working days are defined as [1, 3, 4, 5] on the Scheduler, so the remaining days (0, 2, 6 – Sunday, Tuesday, and Saturday) are considered non-working or weekend days and are hidden from all the views when the ShowWeekend property is set to false.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(view => {
view.Option(View.Day).Add();
view.Option(View.Week).Add();
view.Option(View.TimelineMonth).Add();
})
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.ShowWeekend(false)
.WorkDays(ViewBag.workday)
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
ViewBag.workday = new int[] { 1, 3, 4, 5 };
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2023, 2, 12, 9, 30, 0), EndTime = new DateTime(2023, 2, 12, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Showing week numbers
The week number count of a week can be shown in the header bar of the Scheduler by setting ShowWeekNumber to true. By default, its value is false. In the Month view, the week numbers are displayed as the first column.
NOTE
The
ShowWeekNumberproperty is not applicable on Timeline views, as it has the equivalent HeaderRows property to handle such requirements with additional customization.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(view => {
view.Option(View.Day).Add();
view.Option(View.Week).Add();
view.Option(View.WorkWeek).Add();
})
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.ShowWeekNumber(true)
.WorkDays(ViewBag.workday)
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
ViewBag.workday = new int[] { 1, 3, 4, 5 };
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2023, 2, 12, 9, 30, 0), EndTime = new DateTime(2023, 2, 12, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Different options for showing week numbers
By default, week numbers are shown in the Scheduler based on the first day of the year. However, the week numbers can be determined based on the following criteria.
-
FirstDay– The first week of the year is calculated based on the first day of the year. -
FirstFourDayWeek– The first week of the year begins from the first week with four or more days. -
FirstFullWeek– The first week of the year begins when meeting the first day of the week (firstDayOfWeek) and the first day of the year.
For more details, refer to this link.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(view => {
view.Option(View.Day).Add();
view.Option(View.Week).Add();
view.Option(View.WorkWeek).Add();
})
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.ShowWeekNumber(true)
.WeekRule(WeekRule.FirstFourDayWeek)
.WorkDays(ViewBag.workday)
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
ViewBag.workday = new int[] { 1, 3, 5 };
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2018, 2, 13, 9, 30, 0), EndTime = new DateTime(2018, 2, 13, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2018, 2, 15, 9, 30, 0), EndTime = new DateTime(2018, 2, 15, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Note: Enable the showWeekNumber property to configure the weekRule property. Also, the weekRule property depends on the value of the firstDayOfWeek property.
Set working hours
Working hours indicates the work hour limit within the Scheduler, which is visually highlighted with an active color on work cells. The working hours can be set on Scheduler using the WorkHours property which is of object type and includes the following sub-options,
Working hours indicate the work hour limit within the Scheduler, which is visually highlighted with an active color on work cells. The working hours can be set on the Scheduler using the WorkHours property, which is of object type and includes the following sub-options:
-
Highlight– enables or disables the highlighting of work hours. -
Start- sets the start time of the working or business hour of a day. -
End- sets the end time limit of the working or business hour of a day.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(view => {
view.Option(View.Day).Add();
view.Option(View.Week).Add();
view.Option(View.WorkWeek).Add();
})
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.WorkHours(wh =>
wh.Highlight(true)
.Start("11:00")
.End("20:00")
)
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2023, 2, 13, 11, 0, 0), EndTime = new DateTime(2023, 2, 13, 13, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2023, 2, 15, 11, 0, 0), EndTime = new DateTime(2023, 2, 15, 13, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Displaying custom hours in the Scheduler
It is possible to display the Scheduler layout with specific time durations by hiding the unwanted hours. To do so, set the start and end hour for the Scheduler using the StartHour and EndHour properties, respectively.
The following code example displays the Scheduler starting from the time range 7.00 AM to 6.00 PM, and the remaining hours are hidden on the UI.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(view => {
view.Option(View.Day).Add();
view.Option(View.Week).Add();
view.Option(View.WorkWeek).Add();
})
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.StartHour("07:00")
.EndHour("18:00")
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2023, 2, 12, 9, 30, 0), EndTime = new DateTime(2023, 2, 12, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Setting the start day of the week
By default, the Scheduler defaults to Sunday as its first day of a week. To change the Scheduler’s start day of the week to a different day, set the FirstDayOfWeek property with values ranging from 0 to 6.
Here, Sunday is always denoted as
0, Monday as1, and so on.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(view => {
view.Option(View.Day).Add();
view.Option(View.Week).Add();
view.Option(View.WorkWeek).Add();
})
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.FirstDayOfWeek(1)
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2023, 2, 12, 9, 30, 0), EndTime = new DateTime(2023, 2, 12, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Scrolling to a specific time and date
You can manually scroll to a specific time on the Scheduler by using the scrollTo method, as shown in the following code example.
@using Syncfusion.EJ2.Schedule
<table style="width: 100%">
<tbody>
<tr>
<td>
<div>
Scroll To
</div>
</td>
<td>
<div>
@(Html.EJS().TimePicker("ScrollToHour")
.Width("120")
.Change("onChange")
.Value(new DateTime(2000, 1, 1, 9, 0, 0))
.Format("HH:mm")
.Render()
)
</div>
</td>
</tr>
</tbody>
</table>
<div>
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(ViewBag.view)
.Render()
)
</div>
<script type="text/javascript">
function onChange(args) {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.scrollTo(args.text);
}
</script>public ActionResult Index()
{
List<ScheduleView> viewOption = new List<ScheduleView>()
{
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
};
ViewBag.view = viewOption;
return View();
}How to scroll to current time on initial load
There are scenarios where you may need to load the Scheduler showing the system’s current time in the currently visible viewport area. In such cases, the Scheduler needs to be scrolled to a specific time based on the system’s current time, as depicted in the following code example.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(view => {
view.Option(View.Day).Add();
view.Option(View.Week).Add();
view.Option(View.WorkWeek).Add();
})
.Created("onCreate")
.Render()
)
<script type="text/javascript">
function onCreate() {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var curTime = new Date();
var hours = curTime.getHours() < 10 ? '0' +curTime.getHours().toString() : curTime.getHours().toString();
var minutes = curTime.getMinutes().toString();
var time = hours + ':' + minutes;
scheduleObj.scrollTo(time);
}
</script>public ActionResult Index()
{
return View();
}NOTE
You can refer to our ASP.NET MVC Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Scheduler example to know how to present and manipulate data.