We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can you make all the cells in the Calendar less than the current time (+ some offset) disabled?

I want it so that people can't schedule anything in the past (but potentially view past events readonly) and new events must at least be 15 minutes or so in the future.

5 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team September 30, 2019 04:27 AM UTC

KN Keith Nicholas September 30, 2019 04:30 AM UTC

It's not about the events, its about the cells, I want to make it so the cells are disabled and can't be selected, and you can't trigger creating a new event if they are in the past.

KK Karthigeyan Krishnamurthi Syncfusion Team October 1, 2019 04:34 AM UTC

Thanks for the update. 
Our online sample includes your requirement using popupOpen event, kindly refer it. 

IF Isabelle Fuchs May 5, 2020 07:43 AM UTC

hi, could you fix your problem? Because i have neraly the same issue - before a spezial date - no events are allowed to be created or changed...
and i don´t know how to prevent that a new event can be created...perhaps you can show me your solution :-)

RV Ravikumar Venkatesan Syncfusion Team May 6, 2020 02:46 PM UTC

Hi Isabelle, 

Greetings from Syncfusion support. 

We have validated your reported query “no events are allowed to be created or changed” at our end. We have achieved your requirement with the help of below code. 

    <div class="col-md-12 control-section"> 
      <div class="content-wrapper"> 
        <ejs-schedule id="Schedule" ref="ScheduleObj" height="650px" cssClass="custom-class" :selectedDate="selectedDate" :eventSettings="eventSettings" 
          :popupOpen="onPopupOpen" :actionBegin="onActionBegin" :dragStop="onDragStop" :resizeStop="onResizeStop" :eventRendered="onEventRendered" 
          :dragStart="onDragStart" :resizeStart="onResizeStart"> 
import Vue from "vue"; 
import { scheduleData } from "./datasource"; 
import { extend } from "@syncfusion/ej2-base"; 
import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule"; 
export default Vue.extend({ 
  data: function() { 
    return { 
      eventSettings: { dataSource: extend([], scheduleData, null, true) }, 
      selectedDate: new Date() 
  provide: { 
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop] 
  methods: { 
    onPopupOpen: function(args) { 
      let isPopup = args.type === "QuickInfo" || args.type === "Editor"; 
      let isEvent = args.target.classList.contains("e-appointment"); 
      if (!isEvent && isPopup) { 
        args.cancel = this.onEventCheck(args); 
      } else if (isEvent && this.onEventCheck(args)) { 
        if (args.type === "QuickInfo") { 
          args.element.querySelector(".e-edit.e-icons").disabled = true; 
          args.element.querySelector(".e-delete.e-icons").disabled = true; 
        } else if (args.type === "Editor") { 
          args.cancel = true; 
    onActionBegin(args) { 
      if ( 
        args.requestType === "eventCreate" || 
        args.requestType === "eventChange" 
      ) { 
        args.cancel = this.onEventCheck(args); 
    onDragStart(args) { 
      args.cancel = this.onEventCheck(args); 
    onDragStop(args) { 
      args.cancel = this.onEventCheck(args); 
    onResizeStart(args) { 
      args.cancel = this.onEventCheck(args); 
    onResizeStop(args) { 
      args.cancel = this.onEventCheck(args); 
    onEventRendered(args) { 
      if (this.onEventCheck(args)) { 
    onEventCheck(args) { 
      var eventObj = args.data instanceof Array ? args.data[0] : args.data; 
      return eventObj.StartTime < new Date(); 
.custom-class.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.e-past-app { 
  background-color: #5a67ee; 

Kindly try the above sample and get back to us If you would require further assistance. 

Ravikumar Venkatesan 

Live Chat Icon For mobile
Up arrow icon