Search results

Read Only

An interaction with the appointments of the Scheduler can be enabled/disabled through the readonly property. When the readonly property is set to true, it is not possible to do any actions on the appointments, but you can navigate between the schedule dates, views and can also be able to see the appointment details in the quick window. By default, this 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" height="550" selectedDate="new DateTime(2018, 2, 15)" readonly="true">
                <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 IActionResult read-only()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
}

How to prevent the pop-ups from opening

When readonly is set to true, only the CRUD action will be prevented but still popup will be displayed with appointment details, which can be allowed only to view. Refer the below code example to disable the popup when readonly is set to true.

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)" readonly="true" 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 prevent-popup()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
}