Search results

Context Menu in Vue Schedule component

20 Apr 2021 / 4 minutes to read

You can display context menu on work cells and appointments of Scheduler by making use of the ContextMenu control manually from the application end. In the following code example, context menu control is being added from sample end and set its target as Scheduler.

On Scheduler cells, you can display the menu items such as New Event, New Recurring Event and Today option. For appointments, you can display its related options such as Edit Event and Delete Event. The default event window can be opened for appointment creation and editing using the openEditor method of Scheduler.

The deletion of appointments can be done by using the deleteEvent public method. Also, the selectedDate property can be used to navigate between different dates.

You can also display custom menu options on Scheduler cells and appointments. Context menu will open on tap-hold in responsive mode.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div id='app'>
        <div id='container'>
             <div class='content-wrapper'>
                <ejs-schedule id='Schedule' ref='scheduleObj' height='550px' :selectedDate='selectedDate' :eventSettings='eventSettings'></ejs-schedule>
            </div>
            <div>
                <ejs-contextmenu id='contextmenu' ref='menuObj' cssClass='schedule-context-menu' target='.e-schedule' :items='menuItems' :beforeOpen='onContextMenuBeforeOpen' :select='onMenuItemSelect' ></ejs-contextmenu>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { extend, closest, isNullOrUndefined, Browser, remove, removeClass } from '@syncfusion/ej2-base';
    import { DataManager, Query } from '@syncfusion/ej2-data';
    import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
    import { ContextMenuPlugin } from '@syncfusion/ej2-vue-navigations';
    Vue.use(SchedulePlugin);
    Vue.use(ContextMenuPlugin);

    export default {
        data: function () {
            return {
                eventSettings: { dataSource: extend([], scheduleData, null, true) },
                selectedDate: new Date(2018, 1, 15),
                menuItems: [
                    {
                        text: 'New Event',
                        iconCss: 'e-icons new',
                        id: 'Add'
                    }, {
                        text: 'New Recurring Event',
                        iconCss: 'e-icons recurrence',
                        id: 'AddRecurrence'
                    }, {
                        text: 'Today',
                        iconCss: 'e-icons today',
                        id: 'Today'
                    }, {
                        text: 'Edit Event',
                        iconCss: 'e-icons edit',
                        id: 'Save'
                    }, {
                        text: 'Edit Event',
                        id: 'EditRecurrenceEvent',
                        iconCss: 'e-icons edit',
                        items: [{
                            text: 'Edit Occurrence',
                            id: 'EditOccurrence'
                        }, {
                            text: 'Edit Series',
                            id: 'EditSeries'
                        }]
                    }, {
                        text: 'Delete Event',
                        iconCss: 'e-icons delete',
                        id: 'Delete'
                    }, {
                        text: 'Delete Event',
                        id: 'DeleteRecurrenceEvent',
                        iconCss: 'e-icons delete',
                        items: [{
                            text: 'Delete Occurrence',
                            id: 'DeleteOccurrence'
                        }, {
                            text: 'Delete Series',
                            id: 'DeleteSeries'
                        }]
                    }
                ],
                selectedTarget: null
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek, Month, Agenda]
        },
        methods: {
            onContextMenuBeforeOpen: function(args) {
                let newEventElement = document.querySelector('.e-new-event');
                if (newEventElement) {
                    remove(newEventElement);
                    removeClass([document.querySelector('.e-selected-cell')], 'e-selected-cell');
                }
                let targetElement = args.event.target;
                if (closest(targetElement, '.e-contextmenu')) {
                    return;
                }
                let menuObj = this.$refs.menuObj;
                let scheduleObj = this.$refs.scheduleObj;
                this.selectedTarget = closest(targetElement, '.e-appointment,.e-work-cells,' +
                        '.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');
                if (isNullOrUndefined(this.selectedTarget)) {
                    args.cancel = true;
                    return;
                }
                if (this.selectedTarget.classList.contains('e-appointment')) {
                    let eventObj= scheduleObj.getEventDetails(this.selectedTarget);
                    if (eventObj.RecurrenceRule) {
                        menuObj.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
                        menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);
                    } else {
                        menuObj.showItems(['Save', 'Delete'], true);
                        menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
                    }
                    return;
                }
                menuObj.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
                menuObj.showItems(['Add', 'AddRecurrence', 'Today'], true);
            },
            onMenuItemSelect: function(args) {
                let scheduleObj = this.$refs.scheduleObj.ej2Instances;
                let selectedMenuItem = args.item.id;
                let eventObj;
                if (this.selectedTarget.classList.contains('e-appointment')) {
                    eventObj = scheduleObj.getEventDetails(this.selectedTarget);
                }
                switch (selectedMenuItem) {
                    case 'Today':
                        scheduleObj.selectedDate = new Date();
                        break;
                    case 'Add':
                    case 'AddRecurrence':
                        let selectedCells = scheduleObj.getSelectedElements();
                        let activeCellsData = scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : this.selectedTarget);
                        if (selectedMenuItem === 'Add') {
                            scheduleObj.openEditor(activeCellsData, 'Add');
                        } else {
                            scheduleObj.openEditor(activeCellsData, 'Add', null, 1);
                        }
                        break;
                    case 'Save':
                    case 'EditOccurrence':
                    case 'EditSeries':
                        if (selectedMenuItem === 'EditSeries') {
                            eventObj = new DataManager(scheduleObj.eventsData).
                                executeLocal(new Query().where(scheduleObj.eventFields.id, 'equal', eventObj[scheduleObj.eventFields.recurrenceID]))[0];
                        }
                        scheduleObj.openEditor(eventObj, selectedMenuItem);
                        break;
                    case 'Delete':
                        scheduleObj.deleteEvent(eventObj);
                        break;
                    case 'DeleteOccurrence':
                    case 'DeleteSeries':
                        scheduleObj.deleteEvent(eventObj, selectedMenuItem);
                        break;
                }
            }
        }
    }
</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";

  .schedule-context-menu .e-menu-item .new::before {
        content: '\e7f9';
    }

    .schedule-context-menu .e-menu-item .edit::before {
        content: '\ea9a';
    }

    .schedule-context-menu .e-menu-item .recurrence::before {
        content: '\e308';
        font-weight: bold;
    }

    .schedule-context-menu .e-menu-item .today::before {
        content: '\e322';
    }

    .schedule-context-menu .e-menu-item .delete::before {
        content: '\e94a';
    }

    .e-bigger .schedule-context-menu ul .e-menu-item .e-menu-icon {
        font-size: 14px;
    }

    .schedule-context-menu ul .e-menu-item .e-menu-icon {
        font-size: 12px;
    }

    .schedule-context-menu .e-menu-parent.e-ul .e-menu-item {
        font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
    }
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];
});