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.

Source
Preview
app.vue
<template>
    <div>
        <div id="app">
            <div id="container">
                <ejs-schedule id="Schedule" height="550px" :selectedDate='selectedDate' :eventSettings='eventSettings'
                     :readonly="readonly">
                    <e-views>
                        <e-view option="Day"></e-view>
                        <e-view option="Week"></e-view>
                        <e-view option="WorkWeek"></e-view>
                        <e-view option="Month"></e-view>
                        <e-view option="Agenda"></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from "vue";
    import { scheduleData } from './datasource.ts';
    import { extend } from '@syncfusion/ej2-base';
    import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda } from "@syncfusion/ej2-vue-schedule";

    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                eventSettings: { dataSource: extend([], scheduleData, null, true) },
                selectedDate: new Date(2018, 1, 15),
                readonly: true,
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek, Month, Agenda]
        },
    }

</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>

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.

Source
Preview
app.vue
<template>
    <div>
        <div id="app">
            <div id="container">
                <ejs-schedule id="Schedule" height="550px" :selectedDate='selectedDate' :eventSettings='eventSettings'
                     :readonly="readonly" :eventClick="onEventClick" :popupOpen="onPopupOpen">
                    <e-views>
                        <e-view option="Day"></e-view>
                        <e-view option="Week"></e-view>
                        <e-view option="WorkWeek"></e-view>
                        <e-view option="Month"></e-view>
                        <e-view option="Agenda"></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from "vue";
    import { scheduleData } from './datasource.ts';
    import { extend } from '@syncfusion/ej2-base';
    import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda, EventCickArgs, PopupOpenEventArgs } from "@syncfusion/ej2-vue-schedule";

    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                eventSettings: { dataSource: extend([], scheduleData, null, true) },
                selectedDate: new Date(2018, 1, 15),
                readonly: true,
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek, Month, Agenda]
        },
        methods: {
            onEventRendered: function (args) {
                let scheduleObj = document.getElementById('Schedule');
                if (scheduleObj.readonly) {
                 args.cancel = true;
                }
            }
            onPopupOpen: function (args) {
                let scheduleObj = document.getElementById('Schedule');
                if (scheduleObj.readonly) {
                args.cancel = true;
                }
            }
        }
    }

</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>