Search results

Working Days and Hours

The Scheduler can be customized in various aspects like -

  • Setting different day hour limits
  • Setting different working hours
  • Setting different work days and first day of week
  • Option to show/hide week end in Schedule

Schedule Display Hours

It denotes the start and end hour time limits to be displayed on the Scheduler. To set this time limit, two properties namely startHour and endHour can be used. The following code example renders the scheduler from 7.00 AM to 6.00 PM.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2018, 2, 15)" startHour="07:00" endHour="18:00">
                <e-schedule-views>
                    <e-view option="Day"></e-view>
                    <e-view option="Week"></e-view>
                    <e-view option="WorkWeek"></e-view>
                </e-schedule-views>
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult display-hours()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

Working Hours

Working hours indicates the work hour limit within the Scheduler, which is highlighted visually with white color work cells. workHours is a object property which contains the below specified options,

  • highlight – enables/disables the highlighting of work hours.
  • start - sets the start time of the working/business hour in a day.
  • end - sets the end time limit of the working/business hour in a day.
tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-views>
                    <e-view option="Day"></e-view>
                    <e-view option="Week"></e-view>
                    <e-view option="WorkWeek"></e-view>
                    <e-view option="Month"></e-view>
                </e-schedule-views>
                <e-schedule-workhours highlight="true" start="11:00" end="20:00"></e-schedule-workhours>
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult display-hours()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

Working Days

The working days of a week can be set on Schedule using the workDays property which accepts the collection of day indexes (from 0 to 6) of a week. By default, it is set to [1, 2, 3, 4, 5] and in the below demo, it has been set to [1, 3, 5] which means that Monday, Wednesday, Friday is being set as working days of a week and is visually differentiated from non-working days. The working hours usually applies only on these given working days.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" width="100%" height="550px" workDays="@ViewBag.workday" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-views>
                    <e-view option="Day"></e-view>
                    <e-view option="Week"></e-view>
                    <e-view option="WorkWeek"></e-view>
                </e-schedule-views>
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult display-hours()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            ViewBag.workday = new int[] { 1, 3, 5 };
            return View();
        }
    }
}

Setting start day of the week

The first day of the week can also be set on the Schedule by making use of the firstDayOfWeek property, doing so which will make the Schedule to start with that day.

Here, Sunday is always denoted as 0, Monday as 1 and so on.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" width="100%" height="550px" firstDayOfWeek="1" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-views>
                    <e-view option="Day"></e-view>
                    <e-view option="Week"></e-view>
                    <e-view option="WorkWeek"></e-view>
                </e-schedule-views>
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult display-hours()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

Hide Weekend Days

The showWeekend property is used either to show or hide the weekend days of a week and it is not applicable on work-week view. By default, it is set to true. The days which are not a part of the working days collection of a Schedule are usually considered as weekend days.

Here, the working days are defined as [1, 3, 4, 5] on Schedule and the remaining days (0, 2, 6 – Sunday, Tuesday and Saturday) are considered as weekend days and will be hidden from the views as the showWeekend property is set to false.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" width="100%" height="550px" workDays="@ViewBag.workday" showWeekend="false" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-views>
                    <e-view option="Day"></e-view>
                    <e-view option="Week"></e-view>
                    <e-view option="WorkWeek"></e-view>
                </e-schedule-views>
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult display-hours()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            ViewBag.workday = new int[] { 1, 3, 4, 5 };
            return View();
        }
    }
}