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.
<template>
<div>
<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">
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
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";
Vue.use(SchedulePlugin);
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)) {
args.element.classList.add("e-past-app");
}
},
onEventCheck(args) {
var eventObj = args.data instanceof Array ? args.data[0] : args.data;
return eventObj.StartTime < new Date();
}
}
});
</script>
<style>
.custom-class.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.e-past-app {
background-color: #5a67ee;
}
</style>
Kindly try the above sample and get back to us If you would require further assistance.
Regards,
Ravikumar Venkatesan
