snapshot of https://github.com/espocrm/espocrm.git (master, 2026-09-18; blobs > 131072B omitted)

client/modules/crm/src/views/calendar/calendar-page.js

@@ -0,0 +1,601 @@
+/************************************************************************
+ * This file is part of EspoCRM.
+ *
+ * EspoCRM – Open Source CRM application.
+ * Copyright (C) 2014-2026 EspoCRM, Inc.
+ * Website: https://www.espocrm.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of this program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU Affero General Public License version 3.
+ *
+ * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
+ * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
+ ************************************************************************/
+
+import View from 'view';
+import CalendarEditViewModal from 'crm:views/calendar/modals/edit-view';
+import {inject} from 'di';
+import ShortcutManager from 'helpers/site/shortcut-manager';
+import DebounceHelper from 'helpers/util/debounce';
+import WebSocketManager from 'web-socket-manager';
+import Utils from 'utils';
+
+class CalendarPage extends View {
+
+    template = 'crm:calendar/calendar-page'
+
+    //el = '#main'
+
+    fullCalendarModeList = [
+        'month',
+        'agendaWeek',
+        'agendaDay',
+        'basicWeek',
+        'basicDay',
+        'listWeek',
+    ]
+
+    events = {
+        /** @this CalendarPage */
+        'click [data-action="createCustomView"]': function () {
+            this.createCustomView();
+        },
+        /** @this CalendarPage */
+        'click [data-action="editCustomView"]': function () {
+            this.editCustomView();
+        },
+    }
+
+    /**
+     * @private
+     * @type {ShortcutManager}
+     */
+    @inject(ShortcutManager)
+    shortcutManager
+
+    /**
+     * @private
+     * @type {DebounceHelper|null}
+     */
+    webSocketDebounceHelper = null
+
+    /**
+     * @private
+     * @type {number}
+     */
+    webSocketDebounceInterval = 500
+
+    /**
+     * @private
+     * @type {number}
+     */
+    webSocketBlockInterval = 1000
+
+    /**
+     * @private
+     * @type {WebSocketManager}
+     */
+    @inject(WebSocketManager)
+    webSocketManager
+
+    /**
+     * A shortcut-key => action map.
+     *
+     * @protected
+     * @type {?Object.<string, function (KeyboardEvent): void>}
+     */
+    shortcutKeys = {
+        /** @this CalendarPage */
+        'Home': function (e) {
+            this.handleShortcutKeyHome(e);
+        },
+        /** @this CalendarPage */
+        'Numpad7': function (e) {
+            this.handleShortcutKeyHome(e);
+        },
+        /** @this CalendarPage */
+        'Numpad4': function (e) {
+            this.handleShortcutKeyArrowLeft(e);
+        },
+        /** @this CalendarPage */
+        'Numpad6': function (e) {
+            this.handleShortcutKeyArrowRight(e);
+        },
+        /** @this CalendarPage */
+        'ArrowLeft': function (e) {
+            this.handleShortcutKeyArrowLeft(e);
+        },
+        /** @this CalendarPage */
+        'ArrowRight': function (e) {
+            this.handleShortcutKeyArrowRight(e);
+        },
+        /** @this CalendarPage */
+        'Control+ArrowLeft': function (e) {
+            this.handleShortcutKeyArrowLeft(e);
+        },
+        /** @this CalendarPage */
+        'Control+ArrowRight': function (e) {
+            this.handleShortcutKeyArrowRight(e);
+        },
+        /** @this CalendarPage */
+        'Minus': function (e) {
+            this.handleShortcutKeyMinus(e);
+        },
+        /** @this CalendarPage */
+        'Equal': function (e) {
+            this.handleShortcutKeyPlus(e);
+        },
+        /** @this CalendarPage */
+        'NumpadSubtract': function (e) {
+            this.handleShortcutKeyMinus(e);
+        },
+        /** @this CalendarPage */
+        'NumpadAdd': function (e) {
+            this.handleShortcutKeyPlus(e);
+        },
+        /** @this CalendarPage */
+        'Digit1': function (e) {
+            this.handleShortcutKeyDigit(e, 1);
+        },
+        /** @this CalendarPage */
+        'Digit2': function (e) {
+            this.handleShortcutKeyDigit(e, 2);
+        },
+        /** @this CalendarPage */
+        'Digit3': function (e) {
+            this.handleShortcutKeyDigit(e, 3);
+        },
+        /** @this CalendarPage */
+        'Digit4': function (e) {
+            this.handleShortcutKeyDigit(e, 4);
+        },
+        /** @this CalendarPage */
+        'Digit5': function (e) {
+            this.handleShortcutKeyDigit(e, 5);
+        },
+        /** @this CalendarPage */
+        'Digit6': function (e) {
+            this.handleShortcutKeyDigit(e, 6);
+        },
+        /** @this CalendarPage */
+        'Control+Space': function (e) {
+            this.handleShortcutKeyControlSpace(e);
+        },
+    }
+
+    /**
+     * @param {{
+     *     userId?: string,
+     *     userName?: string|null,
+     *     mode?: string|null,
+     *     date?: string|null,
+     * }} options
+     */
+    constructor(options) {
+        super(options);
+
+        this.options = options;
+    }
+
+    setup() {
+        this.mode = this.mode || this.options.mode || null;
+        this.date = this.date || this.options.date || null;
+
+        if (!this.mode) {
+            this.mode = this.getStorage().get('state', 'calendarMode') || null;
+
+            if (this.mode && this.mode.indexOf('view-') === 0) {
+                const viewId = this.mode.slice(5);
+                const calendarViewDataList = this.getPreferences().get('calendarViewDataList') || [];
+                let isFound = false;
+
+                calendarViewDataList.forEach(item => {
+                    if (item.id === viewId) {
+                        isFound = true;
+                    }
+                });
+
+                if (!isFound) {
+                    this.mode = null;
+                }
+
+                if (this.options.userId) {
+                    this.mode = null;
+                }
+            }
+        }
+
+        this.shortcutManager.add(this, this.shortcutKeys);
+
+        this.on('remove', () => {
+            this.shortcutManager.remove(this);
+        });
+
+        if (!this.mode || ~this.fullCalendarModeList.indexOf(this.mode) || this.mode.indexOf('view-') === 0) {
+            this.setupCalendar();
+        } else if (this.mode === 'timeline') {
+            this.setupTimeline();
+        }
+        this.initWebSocket();
+    }
+
+    /**
+     * @private
+     */
+    initWebSocket() {
+        if (this.options.userId && this.getUser().id !== this.options.userId) {
+            return;
+        }
+
+        this.webSocketDebounceHelper = new DebounceHelper({
+            interval: this.webSocketDebounceInterval,
+            blockInterval: this.webSocketBlockInterval,
+            handler: () => this.handleWebSocketUpdate(),
+        });
+
+        if (!this.webSocketManager.isEnabled()) {
+            const testHandler = () => this.webSocketDebounceHelper.process();
+
+            this.on('remove', () => window.removeEventListener('calendar-update', testHandler));
+
+            // For testing purpose.
+            window.addEventListener('calendar-update', testHandler);
+
+            return;
+        }
+
+        this.webSocketManager.subscribe('calendarUpdate', () => this.webSocketDebounceHelper.process());
+
+        this.on('remove', () => this.webSocketManager.unsubscribe('calendarUpdate'));
+    }
+
+    /**
+     * @private
+     */
+    handleWebSocketUpdate() {
+        this.getCalendarView()?.actionRefresh({suppressLoadingAlert: true});
+    }
+
+    /**
+     * @private
+     */
+    onSave() {
+        if (!this.webSocketDebounceHelper) {
+            return;
+        }
+
+        this.webSocketDebounceHelper.block()
+    }
+
+    afterRender() {
+        this.$el.focus();
+    }
+
+    updateUrl(trigger) {
+        let url = '#Calendar/show';
+
+        if (this.mode || this.date) {
+            url += '/';
+        }
+
+        if (this.mode) {
+            url += 'mode=' + this.mode;
+        }
+
+        if (this.date) {
+            url += '&date=' + this.date;
+        }
+
+        if (this.options.userId) {
+            url += '&userId=' + this.options.userId;
+
+            if (this.options.userName) {
+                url += '&userName=' + encodeURIComponent(this.options.userName);
+            }
+        }
+
+        this.getRouter().navigate(url, {trigger: trigger});
+    }
+
+    /**
+     * @private
+     */
+    setupCalendar() {
+        const viewName = this.getMetadata().get(['clientDefs', 'Calendar', 'calendarView']) ||
+            'crm:views/calendar/calendar';
+
+        this.createView('calendar', viewName, {
+            date: this.date,
+            userId: this.options.userId,
+            userName: this.options.userName,
+            mode: this.mode,
+            fullSelector: '#main > .calendar-container',
+            onSave: () => this.onSave(),
+        }, view => {
+            let initial = true;
+
+            this.listenTo(view, 'view', (date, mode) => {
+                this.date = date;
+                this.mode = mode;
+
+                if (!initial) {
+                    this.updateUrl();
+                }
+
+                initial = false;
+            });
+
+            this.listenTo(view, 'change:mode', (mode, refresh) => {
+                this.mode = mode;
+
+                if (!this.options.userId) {
+                    this.getStorage().set('state', 'calendarMode', mode);
+                }
+
+                if (refresh) {
+                    this.updateUrl(true);
+
+                    return;
+                }
+
+                if (!~this.fullCalendarModeList.indexOf(mode)) {
+                    this.updateUrl(true);
+                }
+
+                this.$el.focus();
+            });
+        });
+    }
+
+    /**
+     * @private
+     */
+    setupTimeline() {
+        const viewName = this.getMetadata().get(['clientDefs', 'Calendar', 'timelineView']) ||
+            'crm:views/calendar/timeline';
+
+        this.createView('calendar', viewName, {
+            date: this.date,
+            userId: this.options.userId,
+            userName: this.options.userName,
+            fullSelector: '#main > .calendar-container',
+            onSave: () => this.onSave(),
+        }, view => {
+            let initial = true;
+
+            this.listenTo(view, 'view', (date, mode) => {
+                this.date = date;
+                this.mode = mode;
+
+                if (!initial) {
+                    this.updateUrl();
+                }
+
+                initial = false;
+            });
+
+            this.listenTo(view, 'change:mode', mode => {
+                this.mode = mode;
+
+                if (!this.options.userId) {
+                    this.getStorage().set('state', 'calendarMode', mode);
+                }
+
+                this.updateUrl(true);
+            });
+        });
+    }
+
+    updatePageTitle() {
+        this.setPageTitle(this.translate('Calendar', 'scopeNames'));
+    }
+
+    async createCustomView() {
+        const view = new CalendarEditViewModal({
+            afterSave: data => {
+                this.mode = `view-${data.id}`;
+                this.date = null;
+
+                this.updateUrl(true);
+            },
+        });
+
+        await this.assignView('modal', view);
+
+        await view.render();
+    }
+
+    async editCustomView() {
+        const viewId = this.getCalendarView().viewId;
+
+        if (!viewId) {
+            return;
+        }
+        const view = new CalendarEditViewModal({
+            id: viewId,
+            afterSave: () => {
+                this.getCalendarView().setupMode();
+                this.getCalendarView().reRender();
+            },
+            afterRemove: () => {
+                this.mode = null;
+                this.date = null;
+
+                this.updateUrl(true);
+            },
+        });
+
+        await this.assignView('modal', view);
+
+        await view.render();
+    }
+
+    /**
+     * @private
+     * @return {import('./calendar').default|import('./timeline').default}
+     */
+    getCalendarView() {
+        return this.getView('calendar');
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} e
+     */
+    handleShortcutKeyHome(e) {
+        if (Utils.isKeyEventInTextInput(e)) {
+            return;
+        }
+
+        e.preventDefault();
+
+        this.getCalendarView().actionToday();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} e
+     */
+    handleShortcutKeyArrowLeft(e) {
+        if (Utils.isKeyEventInTextInput(e)) {
+            return;
+        }
+
+        if (
+            e.target instanceof HTMLElement &&
+            e.target.parentElement instanceof HTMLLIElement
+        ) {
+            return;
+        }
+
+        e.preventDefault();
+
+        this.getCalendarView().actionPrevious();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} e
+     */
+    handleShortcutKeyArrowRight(e) {
+        if (Utils.isKeyEventInTextInput(e)) {
+            return;
+        }
+
+        if (
+            e.target instanceof HTMLElement &&
+            e.target.parentElement instanceof HTMLLIElement
+        ) {
+            return;
+        }
+
+        e.preventDefault();
+
+        this.getCalendarView().actionNext();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} e
+     */
+    handleShortcutKeyMinus(e) {
+        if (Utils.isKeyEventInTextInput(e)) {
+            return;
+        }
+
+        if (!this.getCalendarView().actionZoomOut) {
+            return;
+        }
+
+        e.preventDefault();
+
+        this.getCalendarView().actionZoomOut();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} e
+     */
+    handleShortcutKeyPlus(e) {
+        if (Utils.isKeyEventInTextInput(e)) {
+            return;
+        }
+
+        if (!this.getCalendarView().actionZoomIn) {
+            return;
+        }
+
+        e.preventDefault();
+
+        this.getCalendarView().actionZoomIn();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} e
+     * @param {Number} digit
+     */
+    handleShortcutKeyDigit(e, digit) {
+        if (Utils.isKeyEventInTextInput(e)) {
+            return;
+        }
+
+        const modeList = this.getCalendarView().hasView('modeButtons') ?
+            this.getCalendarView()
+                .getModeButtonsView()
+                .getModeDataList(true)
+                .map(item => item.mode) :
+            this.getCalendarView().modeList;
+
+        const mode = modeList[digit - 1];
+
+        if (!mode) {
+            return;
+        }
+
+        e.preventDefault();
+
+        if (mode === this.mode) {
+            this.getCalendarView().actionRefresh();
+
+            return;
+        }
+
+        this.getCalendarView().selectMode(mode);
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} e
+     */
+    handleShortcutKeyControlSpace(e) {
+        if (Utils.isKeyEventInTextInput(e)) {
+            return;
+        }
+
+        if (!this.getCalendarView().createEvent) {
+            return;
+        }
+
+        e.preventDefault();
+
+        this.getCalendarView().createEvent();
+    }
+}
+
+// noinspection JSUnusedGlobalSymbols
+export default CalendarPage;

client/modules/crm/src/views/calendar/fields/teams.js

@@ -0,0 +1,40 @@
+/************************************************************************
+ * This file is part of EspoCRM.
+ *
+ * EspoCRM – Open Source CRM application.
+ * Copyright (C) 2014-2026 EspoCRM, Inc.
+ * Website: https://www.espocrm.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of this program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU Affero General Public License version 3.
+ *
+ * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
+ * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
+ ************************************************************************/
+
+import LinkMultipleFieldView from 'views/fields/link-multiple';
+
+export default class CalendarSharedViewTeamsFieldView extends LinkMultipleFieldView {
+
+    foreignScope = 'Team'
+
+    getSelectBoolFilterList() {
+        if (this.getAcl().getPermissionLevel('userCalendar') === 'team') {
+            return ['onlyMy'];
+        }
+    }
+}

client/modules/crm/src/views/calendar/fields/users.js

@@ -0,0 +1,47 @@
+/************************************************************************
+ * This file is part of EspoCRM.
+ *
+ * EspoCRM – Open Source CRM application.
+ * Copyright (C) 2014-2026 EspoCRM, Inc.
+ * Website: https://www.espocrm.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of this program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU Affero General Public License version 3.
+ *
+ * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
+ * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
+ ************************************************************************/
+
+import LinkMultipleFieldView from 'views/fields/link-multiple';
+
+class CalendarUsersFieldView extends LinkMultipleFieldView {
+
+    foreignScope = 'User'
+    sortable = true
+
+    getSelectBoolFilterList() {
+        if (this.getAcl().getPermissionLevel('userCalendar') === 'team') {
+            return ['onlyMyTeam'];
+        }
+    }
+
+    getSelectPrimaryFilterName() {
+        return 'active';
+    }
+}
+
+export default CalendarUsersFieldView;

client/modules/crm/src/views/calendar/modals/edit-view.js

@@ -0,0 +1,299 @@
+/************************************************************************
+ * This file is part of EspoCRM.
+ *
+ * EspoCRM – Open Source CRM application.
+ * Copyright (C) 2014-2026 EspoCRM, Inc.
+ * Website: https://www.espocrm.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of this program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU Affero General Public License version 3.
+ *
+ * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
+ * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
+ ************************************************************************/
+
+import ModalView from 'views/modal';
+import Model from 'model';
+import EditForModalRecordView from 'views/record/edit-for-modal';
+import EnumFieldView from 'views/fields/enum';
+import VarcharFieldView from 'views/fields/varchar';
+import CalendarSharedViewTeamsFieldView from 'crm:views/calendar/fields/teams';
+
+export default class CalendarEditViewModal extends ModalView {
+
+    // language=Handlebars
+    templateContent = `
+        <div class="record-container no-side-margin">{{{record}}}</div>
+    `
+
+    className = 'dialog dialog-record'
+
+    /**
+     * @private
+     * @type {EditForModalRecordView}
+     */
+    recordView
+
+    /**
+     * @param {{
+     *     afterSave?: function({id: string}): void,
+     *     afterRemove?: function(): void,
+     *     id?: string,
+     * }} options
+     */
+    constructor(options) {
+        super();
+
+        this.options = options;
+    }
+
+    setup() {
+        const id = this.options.id;
+
+        this.buttonList = [
+            {
+                name: 'cancel',
+                label: 'Cancel',
+                onClick: () => this.actionCancel(),
+            },
+        ];
+
+        this.isNew = !id;
+
+        const calendarViewDataList = this.getPreferences().get('calendarViewDataList') || [];
+
+        if (this.isNew) {
+            this.buttonList.unshift({
+                name: 'save',
+                label: 'Create',
+                style: 'danger',
+                onClick: () => this.actionSave(),
+            });
+        } else {
+            this.dropdownItemList.push({
+                name: 'remove',
+                label: 'Remove',
+                onClick: () => this.actionRemove(),
+            });
+
+            this.buttonList.unshift({
+                name: 'save',
+                label: 'Save',
+                style: 'primary',
+                onClick: () => this.actionSave(),
+            });
+        }
+
+        const model = new Model();
+
+        model.name = 'CalendarView';
+
+        const modelData = {};
+
+        if (!this.isNew) {
+            calendarViewDataList.forEach(item => {
+                if (id === item.id) {
+                    modelData.teamsIds = item.teamIdList || [];
+                    modelData.teamsNames = item.teamNames || {};
+                    modelData.id = item.id;
+                    modelData.name = item.name;
+                    modelData.mode = item.mode;
+                }
+            });
+        } else {
+            modelData.name = this.translate('Shared', 'labels', 'Calendar');
+
+            let foundCount = 0;
+
+            calendarViewDataList.forEach(item => {
+                if (item.name.indexOf(modelData.name) === 0) {
+                    foundCount++;
+                }
+            });
+
+            if (foundCount) {
+                modelData.name += ' ' + foundCount;
+            }
+
+            modelData.id = id;
+
+            modelData.teamsIds = this.getUser().get('teamsIds') || [];
+            modelData.teamsNames = this.getUser().get('teamsNames') || {};
+        }
+
+        model.set(modelData);
+
+        this.recordView = new EditForModalRecordView({
+            model: model,
+            detailLayout: [
+                {
+                    rows: [
+                        [
+                            {
+                                view: new VarcharFieldView({
+                                    name: 'name',
+                                    labelText: this.translate('name', 'fields'),
+                                    params: {
+                                        required: true,
+                                    },
+                                })
+                            },
+                            {
+                                view: new EnumFieldView({
+                                    name: 'mode',
+                                    labelText: this.translate('mode', 'fields', 'DashletOptions'),
+                                    params: {
+                                        translation: 'DashletOptions.options.mode',
+                                        options: this.getMetadata().get('clientDefs.Calendar.sharedViewModeList') || [],
+                                    },
+                                })
+                            }
+                        ],
+                        [
+                            {
+                                view: new CalendarSharedViewTeamsFieldView({
+                                    name: 'teams',
+                                    labelText: this.translate('teams', 'fields'),
+                                    params: {
+                                        required: true
+                                    },
+                                })
+                            },
+                            false
+                        ]
+                    ]
+                }
+            ]
+        });
+
+        this.assignView('record', this.recordView);
+
+        if (this.isNew) {
+            this.headerText = this.translate('Create Shared View', 'labels', 'Calendar');
+        } else {
+            this.headerText = this.translate('Edit Shared View', 'labels', 'Calendar') + ' · ' +
+                modelData.name;
+        }
+    }
+
+    async actionSave() {
+        if (this.recordView.validate()) {
+            return;
+        }
+
+        const modelData = this.recordView.fetch();
+
+        const calendarViewDataList = this.getPreferences().get('calendarViewDataList') || [];
+
+        const data = {
+            name: modelData.name,
+            teamIdList: modelData.teamsIds,
+            teamNames: modelData.teamsNames,
+            mode: modelData.mode,
+            id: undefined,
+        };
+
+        if (this.isNew) {
+            data.id = Math.random().toString(36).substring(2, 12);
+
+            calendarViewDataList.push(data);
+        } else {
+            data.id = this.getView('record').model.id;
+
+            calendarViewDataList.forEach((item, i) => {
+                if (item.id === data.id) {
+                    calendarViewDataList[i] = data;
+                }
+            });
+        }
+
+        Espo.Ui.notify(this.translate('saving', 'messages'));
+
+        this.disableButton('save');
+        this.disableButton('remove');
+
+        try {
+            await this.getPreferences().save(
+                {
+                    calendarViewDataList: calendarViewDataList,
+                },
+                {patch: true}
+            )
+        } catch (e) {
+            this.enableButton('remove');
+            this.enableButton('save');
+
+            return;
+        }
+
+        Espo.Ui.notify();
+
+        this.trigger('after:save', data);
+
+        if (this.options.afterSave) {
+            this.options.afterSave(data);
+        }
+
+        this.close();
+    }
+
+    async actionRemove() {
+        await this.confirm(this.translate('confirmation', 'messages'));
+
+        this.disableButton('save');
+        this.disableButton('remove');
+
+        const id = this.options.id;
+
+        if (!id) {
+            return;
+        }
+
+        const newCalendarViewDataList = [];
+
+        const calendarViewDataList = this.getPreferences().get('calendarViewDataList') || [];
+
+        calendarViewDataList.forEach(item => {
+            if (item.id !== id) {
+                newCalendarViewDataList.push(item);
+            }
+        });
+
+        Espo.Ui.notifyWait();
+
+        try {
+            await this.getPreferences().save({
+                calendarViewDataList: newCalendarViewDataList,
+            }, {patch: true})
+        } catch (e) {
+            this.enableButton('remove');
+            this.enableButton('save');
+
+            return;
+        }
+
+        Espo.Ui.notify();
+
+        this.trigger('after:remove');
+
+        if (this.options.afterRemove) {
+            this.options.afterRemove();
+        }
+
+        this.close();
+    }
+}

client/modules/crm/src/views/calendar/modals/edit.js

@@ -0,0 +1,280 @@
+/************************************************************************
+ * This file is part of EspoCRM.
+ *
+ * EspoCRM – Open Source CRM application.
+ * Copyright (C) 2014-2026 EspoCRM, Inc.
+ * Website: https://www.espocrm.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of this program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU Affero General Public License version 3.
+ *
+ * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
+ * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
+ ************************************************************************/
+
+import EditModalView from 'views/modals/edit';
+
+class CalenderEditModalView extends EditModalView {
+
+    template = 'crm:calendar/modals/edit'
+
+    scopeList = [
+        'Meeting',
+        'Call',
+        'Task',
+    ]
+
+    data() {
+        return {
+            scopeList: this.scopeList,
+            scope: this.scope,
+            isNew: !(this.id),
+        };
+    }
+
+    additionalEvents = {
+        /** @this CalenderEditModalView */
+        'change .scope-switcher input[name="scope"]': function () {
+            Espo.Ui.notifyWait();
+
+            const prevScope = this.scope;
+
+            const scope = $('.scope-switcher input[name="scope"]:checked').val();
+            this.scope = scope;
+
+            this.getModelFactory().create(this.scope, model => {
+                model.populateDefaults();
+
+                let attributes = this.getRecordView().fetch();
+
+                attributes = {...attributes, ...this.getRecordView().model.getClonedAttributes()};
+
+                this.filterAttributesForEntityType(attributes, scope, prevScope);
+
+                model.set(attributes);
+
+                this.model = model;
+
+                this.createRecordView(model, (view) => {
+                    view.render();
+                    view.notify(false);
+                });
+
+                this.handleAccess(model);
+            });
+        },
+    }
+
+    /**
+     * @param {Record} attributes
+     * @param {string} entityType
+     * @param {string} previousEntityType
+     */
+    filterAttributesForEntityType(attributes, entityType, previousEntityType) {
+        if (entityType === 'Task' || previousEntityType === 'Task') {
+            delete attributes.reminders;
+        }
+
+        this.getHelper()
+            .fieldManager
+            .getEntityTypeFieldList(entityType, {type: 'enum'})
+            .forEach(field => {
+                if (!(field in attributes)) {
+                    return;
+                }
+
+                const options = this.getMetadata().get(['entityDefs', entityType, 'fields', field, 'options']) || [];
+
+                const value = attributes[field];
+
+                if (!~options.indexOf(value)) {
+                    delete attributes[field];
+                }
+            });
+    }
+
+    createRecordView(model, callback) {
+        if (!this.id && !this.dateIsChanged) {
+            if (this.options.dateStart && this.options.dateEnd) {
+                this.model.set('dateStart', this.options.dateStart);
+                this.model.set('dateEnd', this.options.dateEnd);
+            }
+
+            if (this.options.allDay) {
+                const allDayScopeList = this.getMetadata().get('clientDefs.Calendar.allDayScopeList') || [];
+
+                if (~allDayScopeList.indexOf(this.scope)) {
+                    this.model.set('dateStart', null);
+                    this.model.set('dateEnd', null);
+                    this.model.set('dateStartDate', null);
+                    this.model.set('dateEndDate', this.options.dateEndDate);
+
+                    if (this.options.dateEndDate !== this.options.dateStartDate) {
+                        this.model.set('dateStartDate', this.options.dateStartDate);
+                    }
+                }
+                else if (this.getMetadata().get(['entityDefs', this.scope, 'fields', 'dateStartDate'])) {
+                    this.model.set('dateStart', null);
+                    this.model.set('dateEnd', null);
+                    this.model.set('dateStartDate', this.options.dateStartDate);
+                    this.model.set('dateEndDate', this.options.dateEndDate);
+                    this.model.set('isAllDay', true);
+                }
+                else {
+                    this.model.set('isAllDay', false);
+                    this.model.set('dateStartDate', null);
+                    this.model.set('dateEndDate', null);
+                }
+            }
+        }
+
+        this.listenTo(this.model, 'change:dateStart', (m, value, o) => {
+            if (o.ui) {
+                this.dateIsChanged = true;
+            }
+        });
+
+        this.listenTo(this.model, 'change:dateEnd', (m, value, o) => {
+            if (o.ui || o.updatedByDuration) {
+                this.dateIsChanged = true;
+            }
+        });
+
+
+        super.createRecordView(model, callback);
+    }
+
+    handleAccess(model) {
+        if (
+            this.id &&
+            !this.getAcl().checkModel(model, 'edit') || !this.id &&
+            !this.getAcl().checkModel(model, 'create')
+        ) {
+            this.hideButton('save');
+            this.hideButton('fullForm');
+
+            this.$el.find('button[data-name="save"]').addClass('hidden');
+            this.$el.find('button[data-name="fullForm"]').addClass('hidden');
+        }
+        else {
+            this.showButton('save');
+            this.showButton('fullForm');
+        }
+
+        if (!this.getAcl().checkModel(model, 'delete')) {
+            this.hideButton('remove');
+        } else {
+            this.showButton('remove');
+        }
+    }
+
+    afterRender() {
+        super.afterRender();
+
+        if (this.hasView('edit')) {
+            const model = this.getView('edit').model;
+
+            if (model) {
+                this.handleAccess(model);
+            }
+        }
+    }
+
+    setup() {
+        this.events = {
+            ...this.additionalEvents,
+            ...this.events,
+        };
+
+        this.scopeList = Espo.Utils.clone(this.options.scopeList || this.scopeList);
+        this.enabledScopeList = this.options.enabledScopeList || this.scopeList;
+
+        if (!this.options.id && !this.options.scope) {
+            const scopeList = [];
+
+            this.scopeList.forEach((scope) => {
+                if (this.getAcl().check(scope, 'create')) {
+                    if (~this.enabledScopeList.indexOf(scope)) {
+                        scopeList.push(scope);
+                    }
+                }
+            });
+
+            this.scopeList = scopeList;
+
+            const calendarDefaultEntity = scopeList[0];
+
+            if (calendarDefaultEntity && ~this.scopeList.indexOf(calendarDefaultEntity)) {
+                this.options.scope = calendarDefaultEntity;
+            } else {
+                this.options.scope = this.scopeList[0] || null;
+            }
+
+            if (this.scopeList.length === 0) {
+                this.remove();
+                return;
+            }
+        }
+
+        super.setup();
+
+        if (!this.id) {
+            this.$header = $('<a>')
+                .attr('title', this.translate('Full Form'))
+                .attr('role', 'button')
+                .attr('data-action', 'fullForm')
+                .addClass('action')
+                .text(this.translate('Create', 'labels', 'Calendar'));
+        }
+
+        if (this.id) {
+            this.buttonList.splice(1, 0, {
+                name: 'remove',
+                text: this.translate('Remove'),
+                onClick: () => this.actionRemove(),
+            });
+        }
+
+        this.once('after:save', () => {
+            this.$el.find('.scope-switcher').remove();
+        })
+    }
+
+    actionRemove() {
+        const model = this.getView('edit').model;
+
+        this.confirm(this.translate('removeRecordConfirmation', 'messages'), () => {
+            const $buttons = this.dialog.$el.find('.modal-footer button');
+
+            $buttons.addClass('disabled');
+
+            model.destroy()
+                .then(() => {
+                    this.trigger('after:delete', model);
+
+                    this.dialog.close();
+                })
+                .catch(() => {
+                    $buttons.removeClass('disabled');
+                });
+        });
+    }
+
+    setupActionItems() {}
+}
+
+export default CalenderEditModalView;

client/modules/crm/src/views/calendar/modals/shared-options.js

@@ -0,0 +1,144 @@
+/************************************************************************
+ * This file is part of EspoCRM.
+ *
+ * EspoCRM – Open Source CRM application.
+ * Copyright (C) 2014-2026 EspoCRM, Inc.
+ * Website: https://www.espocrm.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of this program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU Affero General Public License version 3.
+ *
+ * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
+ * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
+ ************************************************************************/
+
+import ModalView from 'views/modal';
+import Model from 'model';
+import EditForModalRecordView from 'views/record/edit-for-modal';
+import CalendarUsersFieldView from 'crm:views/calendar/fields/users';
+
+export default class TimelineSharedOptionsModalView extends ModalView {
+
+    className = 'dialog dialog-record'
+
+    templateContent = `
+        <div class="record-container no-side-margin">{{{record}}}</div>
+    `
+
+    /**
+     * @private
+     * @type {EditForModalRecordView}
+     */
+    recordView
+
+    /**
+     *
+     * @param {{
+     *     users: {id: string, name: string}[],
+     *     onApply: function({
+     *         users: {id: string, name: string}[],
+     *     }),
+     * }} options
+     */
+    constructor(options) {
+        super(options);
+
+        this.options = options;
+    }
+
+    setup() {
+        this.buttonList = [
+            {
+                name: 'save',
+                label: 'Save',
+                style: 'primary',
+                onClick: () => this.actionSave(),
+            },
+            {
+                name: 'cancel',
+                label: 'Cancel',
+                onClick: () => this.actionClose(),
+            },
+        ];
+
+        this.headerText = this.translate('timeline', 'modes', 'Calendar') + ' · ' +
+            this.translate('Shared Mode Options', 'labels', 'Calendar')
+
+        const users = this.options.users;
+
+        const userIdList = [];
+        const userNames = {};
+
+        users.forEach(item => {
+            userIdList.push(item.id);
+
+            userNames[item.id] = item.name;
+        });
+
+        this.model = new Model({
+            usersIds: userIdList,
+            usersNames: userNames,
+        });
+
+        this.recordView = new EditForModalRecordView({
+            model: this.model,
+            detailLayout: [
+                {
+                    rows: [
+                        [
+                            {
+                                view: new CalendarUsersFieldView({
+                                    name: 'users',
+                                }),
+                            },
+                            false
+                        ]
+                    ]
+                }
+            ]
+        });
+
+        this.assignView('record', this.recordView);
+    }
+
+    /**
+     * @private
+     */
+    actionSave() {
+        const data = this.recordView.processFetch();
+
+        if (this.recordView.validate()) {
+            return;
+        }
+
+        /** @type {{id: string, name: string}[]} */
+        const users = [];
+
+        const userIds = this.model.attributes.usersIds || [];
+
+        userIds.forEach(id => {
+            users.push({
+                id: id,
+                name: (data.usersNames || {})[id] || id
+            });
+        });
+
+        this.options.onApply({users: users})
+
+        this.close();
+    }
+}

client/modules/crm/src/views/calendar/mode-buttons.js

@@ -0,0 +1,158 @@
+/************************************************************************
+ * This file is part of EspoCRM.
+ *
+ * EspoCRM – Open Source CRM application.
+ * Copyright (C) 2014-2026 EspoCRM, Inc.
+ * Website: https://www.espocrm.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of this program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU Affero General Public License version 3.
+ *
+ * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
+ * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
+ ************************************************************************/
+
+import View from 'view';
+
+/** @module modules/crm/views/calendar/mode-buttons */
+
+class CalendarModeButtons extends View {
+
+    template = 'crm:calendar/mode-buttons'
+
+    visibleModeListCount = 3
+
+    data() {
+        const scopeFilterList = Espo.Utils.clone(this.scopeList);
+        scopeFilterList.unshift('all');
+
+        const scopeFilterDataList = [];
+
+        this.scopeList.forEach(scope => {
+            const o = {scope: scope};
+
+            if (!this.getCalendarParentView().enabledScopeList.includes(scope)) {
+                o.disabled = true;
+            }
+
+            scopeFilterDataList.push(o);
+        });
+
+        return {
+            mode: this.mode,
+            visibleModeDataList: this.getVisibleModeDataList(),
+            hiddenModeDataList: this.getHiddenModeDataList(),
+            scopeFilterDataList: scopeFilterDataList,
+            isCustomViewAvailable: this.isCustomViewAvailable,
+            hasMoreItems: this.isCustomViewAvailable,
+            hasWorkingTimeCalendarLink: this.getAcl().checkScope('WorkingTimeCalendar'),
+        };
+    }
+
+    /**
+     * @return {
+     *     import('modules/crm/views/calendar/calendar').default|
+     *     import('modules/crm/views/calendar/timeline').default
+     * }
+     */
+    getCalendarParentView() {
+        // noinspection JSValidateTypes
+        return this.getParentView();
+    }
+
+    setup() {
+        this.isCustomViewAvailable = this.options.isCustomViewAvailable;
+        this.modeList = this.options.modeList;
+        this.scopeList = this.options.scopeList;
+        this.mode = this.options.mode;
+    }
+
+    /**
+     * @param {boolean} [originalOrder]
+     * @return {Object.<string, *>[]}
+     */
+    getModeDataList(originalOrder) {
+        const list = [];
+
+        this.modeList.forEach(name => {
+            const o = {
+                mode: name,
+                label: this.translate(name, 'modes', 'Calendar'),
+                labelShort: this.translate(name, 'modes', 'Calendar').substring(0, 2),
+            };
+
+            list.push(o);
+        });
+
+        if (this.isCustomViewAvailable) {
+            (this.getPreferences().get('calendarViewDataList') || []).forEach(item => {
+                item = Espo.Utils.clone(item);
+
+                item.mode = 'view-' + item.id;
+                item.label = item.name;
+                item.labelShort = (item.name || '').substring(0, 2);
+                list.push(item);
+            });
+        }
+
+        if (originalOrder) {
+            return list;
+        }
+
+        let currentIndex = -1;
+
+        list.forEach((item, i) => {
+            if (item.mode === this.mode) {
+                currentIndex = i;
+            }
+        });
+
+        return list;
+    }
+
+    getVisibleModeDataList() {
+        const fullList = this.getModeDataList();
+
+        const current = fullList.find(it => it.mode === this.mode);
+
+        const list = fullList.slice(0, this.visibleModeListCount);
+
+        if (current && !list.find(it => it.mode === this.mode)) {
+            list.push(current);
+        }
+
+        return list;
+    }
+
+    getHiddenModeDataList() {
+        const fullList = this.getModeDataList();
+
+        const list = [];
+
+        fullList.forEach((o, i) => {
+            if (i < this.visibleModeListCount) {
+                return;
+            }
+
+            list.push(o);
+        });
+
+        return list;
+    }
+}
+
+export default CalendarModeButtons;