Search results

Customization

Setting cell dimensions

The height and width of the Schedule cells can be customized by cssClass field which overrides the default CSS class. By doing so, it also needs to adjust the outer event wrapper element to cope with the CSS changes which can be done by calling the adjustEventWrapper method.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 2, 15)" views="@ViewBag.view" cssClass="schedule-cell-dimension" actionComplete="onActionComplete" created="onCreated">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <style>
        .schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col,
        .schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col {
            width: 200px;
        }

        .schedule-cell-dimension.e-schedule .e-vertical-view .e-time-cells-wrap table th,
        .schedule-cell-dimension.e-schedule .e-vertical-view .e-work-cells {
            height: 100px;
        }

        .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells,
        .schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col {
            width: 200px;
        }

        .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells {
            height: 200px;
        }
    </style>
    <script type="text/javascript">
        function onCreated(args) {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            scheduleObj.adjustEventWrapper();
        }
        function onActionComplete(args) {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            if (args.requestType === 'dateNavigate' || args.requestType === 'viewNavigate') {
                scheduleObj.adjustEventWrapper();
            }
        }
    </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 IActionResult cell-dimensions()
        {
            ViewBag.datasource = new ScheduleData().GetEmployeeEventData();
            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();
        }
    }
}

Scroll to specific time

You can manually scroll to specific time on Schedule by making use of the scrollTo method as shown below.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <table style="width: 100%">
            <tbody>
                <tr style="height: 50px">
                    <td>
                        <div>
                            Scroll To
                        </div>
                    </td>
                    <td>
                        <div>
                            <ejs-timepicker id="ScrollToHour" width="120" format="HH:mm" value="new DateTime(2000, 1, 1, 9, 0, 0)" change="onChange"></ejs-timepicker>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        function onChange(args) {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            scheduleObj.scrollTo(args.text);
        }
    </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 IActionResult scrollto-specific-time()
        {
            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 },
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Making specific events read-only

You can restrict the CRUD operations on specific appointments based on certain conditions. In the below demo, the events that has occurred on the past hours from the current time are made as read-only and the CRUD actions has been prevented on it.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" popupOpen="onPopupOpen" eventRendered="onEventRendered" eventClick="onEventClick">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <style>
        .e-schedule .e-read-only {
            opacity: .8;
        }
    </style>
    <script type="text/javascript">
        var isReadOnly = function (data) {
            return data.ReadOnly || (data.EndTime < new Date());
        };

        function onEventClick(args) {
            if ((args.element).classList.contains('e-read-only')) {
                args.cancel = true;
            }
        }
        function onEventRendered(args) {
            if (isReadOnly(args.data)) {
                args.element.setAttribute('aria-readonly', 'true');
                args.element.classList.add('e-read-only');
            }
        }
        function onPopupOpen(args) {
            if (args.type === 'editor' && isReadOnly(args.data)) {
                args.cancel = true;
            }
        }
    </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 IActionResult read-only()
        {
            ViewBag.datasource = new ScheduleData().GetReadonlyEventsData();
            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 }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

The event editor is prevented to open on the read-only events by setting args.cancel to true within the popupOpen event.

Check for the cell availability

You can check whether the given time range slots are available for event creation or already occupied by other events using isSlotAvailable method. In the below demo, if the applicable time slot already contains an appointment, then no more appointments can be added to that cell.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 2, 15)" views="@ViewBag.view" actionBegin="onActionBegin">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        function onActionBegin(args) {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            if (args.requestType === 'eventCreate' && args.data.length > 0) {
                var eventData = args.data[0];
                var eventField = scheduleObj.eventFields;
                var startDate = eventData[eventField.startTime];
                var endDate = eventData[eventField.endTime];
                args.cancel = !scheduleObj.isSlotAvailable(startDate, endDate);
            }
        }
    </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 IActionResult cell-availability()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Cell customization

The cellTemplate option which accepts the template string is used to customize the cell background with specific images / appropriate text on the given date values.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2017, 12, 15)" views="@ViewBag.view" cellTemplate="#apptemplate">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <style>
        .e-schedule .e-month-view .e-work-cells {
            position: relative;
        }
        .e-schedule .templatewrap {
            text-align: center;
            position: absolute;
            width: 100%;
        }
        .e-schedule .templatewrap img {
            width: 25px;
            height: 25px;
        }
        .e-schedule .caption {
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
    </style>
    <script id="apptemplate" type="text/template">
        ${if (type === "monthCells")}
        <div class="templatewrap">
            ${getCellContent(data.date)}
        </div> ${/if}
    </script>
    <script type="text/javascript">
        function getCellContent(date) {
            if (date.getMonth() === 9 && date.getDate() === 31) {
                return '<div class="caption">Thanksgiving day</div>';
            } else if (date.getMonth() === 11 && date.getDate() === 9) {
                return '<div class="caption">Party time</div>';
            } else if (date.getMonth() === 11 && date.getDate() === 13) {
                return '<div class="caption">Party time</div>';
            } else if (date.getMonth() === 11 && date.getDate() === 22) {
                return '<div class="caption">Happy birthday</div>';
            } else if (date.getMonth() === 11 && date.getDate() === 24) {
                return '<div class="caption">Christmas Eve</div>';
            } else if (date.getMonth() === 11 && date.getDate() === 25) {
                return '<div class="caption">Christmas Day</div>';
            } else if (date.getMonth() === 0 && date.getDate() === 1) {
                return '<div class="caption">New Year"s Day</div>';
            } else if (date.getMonth() === 0 && date.getDate() === 14) {
                return '<div class="caption">Get together</div>';
            }
            return '';
        }
    </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 IActionResult cell-customization()
        {
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Schedule element customization

Cells can be customized like changing its background color, adding custom template using renderCell event. In the below demo, cell’s default work hour background color is changed.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2017, 12, 15)" views="@ViewBag.view" renderCell="onRenderCell">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        function onRenderCell(args) {
            if (args.element.classList.contains('e-work-hours') && (args.date.getDate() === 12 || args.date.getDate() === 14)) {
                args.element.style.background = '#deecfc';
            }
        }
    </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 IActionResult cell-customization()
        {
            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 }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

In month view, date header is not applicable and therefore renderCells event is used to display custom text in Cells as shown here.