Set Different Time Duration on Event Editor

17 Feb 20223 minutes to read

In event window, start/end time duration will be processed based on the interval value within the timeScale property. By default, interval value is 30, therefore in event window start/end time duration will be in 30 mins duration. You can set custom interval range to the start/end time in event window using popupOpen event as shown below.

CSHTML

@using Syncfusion.EJ2


    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" popupOpen="onPopupOpen" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        function onPopupOpen(args) {
            args.duration = 40;
        }
    </script>

Data.cs

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 event-duration()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}