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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





147960 Sep 29,2019 11:25 PM UTC May 6,2020 02:46 PM UTC Vue 5
Tags: Schedule
Keith Nicholas
Asked On September 29, 2019 11:25 PM UTC

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.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On September 30, 2019 04:27 AM UTC

Keith Nicholas
Replied On 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.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On October 1, 2019 04:34 AM UTC

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

Isabelle Fuchs
Replied On 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 :-)

Ravikumar Venkatesan [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon