Timescale Customization in ASP.NET MVC Scheduler

The time slots are usually the time cells that are displayed on the Day, Week, and Work Week views of both the calendar (in the leftmost position) and timeline views (at the top). The TimeScale property lets you control and set the required time slot duration for the work cells displayed on the Scheduler. It includes the following sub-options:

  • Enable - When set to true, allows the Scheduler to display appointments accurately against the exact time duration. If set to false, all the appointments of a day are displayed one below the other with no grid lines. Its default value is true.
  • Interval – Defines the duration on which the time axis is displayed, for example, in 1 hour or 30 minute intervals. It accepts values in minutes and defaults to 60.
  • SlotCount – Decides the number of slots to be split for the specified time interval duration. It defaults to 2, thus displaying two slots to represent an hour (each slot representing 30 minutes).

Note: The upper limit for rendering slots within a single day, using the Interval and SlotCount properties of the TimeScale, is 1000. This constraint aligns with the maximum colspan value permissible for the table element, also capped at 1000. This restriction applies exclusively to the TimelineDay, TimelineWeek, and TimelineWorkWeek views.

Setting different time slot duration

The Interval and SlotCount properties can be used together on the Scheduler to set a different time slot duration, as shown in the following code example. Here, six time slots together represent an hour.

@using Syncfusion.EJ2.Schedule

@(Html.EJS().Schedule("schedule")
    .Width("100%")
    .Height("550px")
    .SelectedDate(new DateTime(2018, 2, 15))
    .Views(view => {
        view.Option(View.Day).Add();
        view.Option(View.Week).Add();
        view.Option(View.WorkWeek).Add();
    })
    .TimeScale(ts => ts.Enable(true).Interval(60).SlotCount(6))
    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
    .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, 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; }
}

Customizing time cells using a template

The TimeScale property also provides template options that allow customization of time slots:

  • MajorSlotTemplate - The template option to be applied for major time slots. The template accepts either a string or an HTMLElement as the template design, and the parsed design is displayed on the time cells. Time details can be accessed within this template.
  • MinorSlotTemplate - The template option to be applied for minor time slots. The template accepts either a string or an HTMLElement as the template design, and the parsed design is displayed on the time cells. Time details can be accessed within this template.
@using Syncfusion.EJ2.Schedule

@(Html.EJS().Schedule("schedule")
    .Width("100%")
    .Height("550px")
    .SelectedDate(new DateTime(2018, 2, 15))
    .Views(view => {
        view.Option(View.Day).Add();
        view.Option(View.Week).Add();
        view.Option(View.WorkWeek).Add();
    })
    .TimeScale(ts => 
        ts.Enable(true)
        .Interval(60)
        .SlotCount(6)
        .MajorSlotTemplate("#majorSlotTemplate")
        .MinorSlotTemplate("#minorSlotTemplate"
    ))
    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
    .Render()
)

<script id="majorSlotTemplate" type="text/x-template">
    <div>${majorSlotTemplate(data.date)}</div>
</script>

<script id="minorSlotTemplate" type="text/x-template">
    <div style="text-align: right; margin-right: 15px">${minorSlotTemplate(data.date)}</div>
</script>

<script type="text/javascript">
    window.majorSlotTemplate = function (date) {
        var instance = new ej.base.Internationalization();
        return instance.formatDate(date, { skeleton: 'hm' });
    };
    window.minorSlotTemplate = function (date) {
        var instance = new ej.base.Internationalization();
        return instance.formatDate(date, { skeleton: 'ms' }).replace(':00', '');
    };
</script>
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, 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 the timescale

The grid lines that indicate the exact time duration can be enabled or disabled on the Scheduler by setting true or false to the Enable option within the TimeScale property. Its default value is true.

@using Syncfusion.EJ2.Schedule

@(Html.EJS().Schedule("schedule")
    .Width("100%")
    .Height("550px")
    .SelectedDate(new DateTime(2018, 2, 15))
    .Views(view => {
        view.Option(View.Day).Add();
        view.Option(View.Week).Add();
        view.Option(View.WorkWeek).Add();
    })
    .TimeScale(ts => ts.Enable(false))
    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
    .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, 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; }
}

Highlighting current date and time

By default, the Scheduler indicates the current date with a highlighted date header on all views and marks the system’s current time on specific views such as Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week. To stop highlighting the current time indicator on Scheduler views, set false on the ShowTimeIndicator property, which defaults to true.

@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();
        view.Option(View.TimelineDay).Add();
        view.Option(View.TimelineWeek).Add();
        view.Option(View.TimelineWorkWeek).Add();
    })
    .ShowTimeIndicator(false)
    .Render()
)
public ActionResult Index()
{
    return View();
}

Customizing current time indicator

The appearance and behavior of the current time indicator can be customized using the CurrentTimeIndicatorSettings property. This property includes the following options to control different aspects of the time indicator:

  • showTime - When set to true, displays the current time label (hours and minutes) on the indicator. The default value is true.
  • showPreviousDates - When set to true, extends the indicator line to span across previous dates in the view. The default value is true.
  • onTop - When set to true, positions the indicator line on top of appointments. When set to false, appointments appear on top of the indicator. The default value is false.

Note: The current time indicator customization is only applicable in views that display a time grid (Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views) when both TimeScale is enabled and ShowTimeIndicator is set to true.

@using Syncfusion.EJ2.Schedule

<div class="control-section">
    <div class="schedule-control-section">
        @(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();
                view.Option(View.TimelineDay).Add();
                view.Option(View.TimelineWeek).Add();
                view.Option(View.TimelineWorkWeek).Add();
            })
            .SelectedDate(new DateTime(2023, 2, 15))
            .ShowTimeIndicator(true)
            .TimeScale(ts => ts.Enable(true).Interval(60).SlotCount(4))
            .CurrentTimeIndicatorSettings(new ScheduleCurrentTimeIndicatorSettings { ShowTime = true, ShowPreviousDates = true, OnTop = true })
            .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
            .Render()
        )
    </div>
</div>

<div class="property-section">
    <h4>Properties</h4>
    <table id="property-grid" class="property-panel-table" style="width: 100%;">
        <tbody>
            <tr style="height: 50px">
                <td style="width: 30%">
                    <div>Show Time Indicator</div>
                </td>
                <td style="width: 70%">
                    <div id="master-toggle">
                        <input type="checkbox" id="masterToggle" checked="checked" />
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 30%">
                    <div>Show Time</div>
                </td>
                <td style="width: 70%">
                    <div>
                        <input type="checkbox" id="showTimeToggle" checked="checked" />
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 30%">
                    <div>Show Previous Dates</div>
                </td>
                <td style="width: 70%">
                    <div>
                        <input type="checkbox" id="showPreviousDatesToggle" checked="checked" />
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 30%">
                    <div>On Top</div>
                </td>
                <td style="width: 70%">
                    <div>
                        <input type="checkbox" id="onTopToggle" checked="checked" />
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    var masterToggle = document.getElementById('masterToggle');
    var showTimeToggle = document.getElementById('showTimeToggle');
    var showPreviousDatesToggle = document.getElementById('showPreviousDatesToggle');
    var onTopToggle = document.getElementById('onTopToggle');
    var scheduleObj = document.getElementById('schedule').ej2_instances[0];

    function applyChanges() {
        if (!masterToggle.checked) {
            scheduleObj.showTimeIndicator = false;
            return;
        }
        scheduleObj.showTimeIndicator = true;
        scheduleObj.currentTimeIndicatorSettings = {
            showTime: showTimeToggle.checked,
            showPreviousDates: showPreviousDatesToggle.checked,
            onTop: onTopToggle.checked
        };
    }

    masterToggle.addEventListener('change', applyChanges);
    showTimeToggle.addEventListener('change', applyChanges);
    showPreviousDatesToggle.addEventListener('change', applyChanges);
    onTopToggle.addEventListener('change', applyChanges);
</script>

<style>
    .control-section {
        margin-bottom: 20px;
    }

    .schedule-control-section {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .property-section {
        border: 1px solid #d0d0d0;
        border-radius: 4px;
        padding: 15px;
    }

    .property-panel-table {
        border-collapse: collapse;
    }

    .property-panel-table td {
        border: 1px solid #d9d9d9;
        padding: 10px;
        vertical-align: middle;
    }

    #master-toggle, #showTimeToggle, #showPreviousDatesToggle, #onTopToggle {
        display: flex;
        align-items: center;
    }

    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
</style>
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, 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; }
}

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.