Search results

TimeScale

The timeScale allows the user to set the required time slot duration for the work cells that displays on the Scheduler. It includes the below properties such as,

  • enable - It accepts true or false value, denoting whether to show or hide the time slots. Its default value is true.

  • interval – Specifies the major time slot duration.

  • slotCount – Specifies the value, based on which the minor time slots are divided into appropriate count.

The interval and slotCount can be set on the Scheduler with the following code example.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="col-lg-9 control-section">
        <div class="content-wrapper">
            @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()
        </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 timescale()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

Customizing time cells

The timeScale is also availed with template options to allow customization. It includes the following 2 properties for customization -

  • majorSlotTemplate - Accepts the id value of the template design block preceded by a symbol #, which gets applied for the major time slots.

  • minorSlotTemplate - Accepts the id value of the template design block preceded by a symbol #, which gets applied for the minor time slots.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="col-lg-9 control-section">
        <div class="content-wrapper">
            @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()
        </div>
    </div>
    <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>
}
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 custom-timecells()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

On/Off timescale

The time cells can be enabled / disabled on Schedule, by setting true / false to the enable property available within timeScale. It’s default value is true.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="col-lg-9 control-section">
        <div class="content-wrapper">
            @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()
        </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 on-off-timescale()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

On/Off Time indicator

The current time indicator visually depicts the live current system time appropriately on the user interface. It can be enabled / disabled by setting true / false to the showTimeIndicator property. It’s default value is true.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @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(); }).ShowTimeIndicator(false).SelectedDate(new DateTime(2018, 6, 5)).Render()
        </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 time-indicator()
        {
            return View();
        }
    }
}