feat(SFT-2795): added ability to disable drag and drop modifying of events on CP Month/Week/Day vie

packages/plugin/src/Controllers/ViewController.php

@@ -133,6 +133,7 @@ public function actionTargetTime(
                 'calendarView' => $calendarView,
                 'calendarLanguage' => $language,
                 'calendarOptions' => $calendarOptions,
+                'allowEventsToBeModifiedByDragAndDrop' => $this->getSettingsService()->allowEventsToBeModifiedByDragAndDrop(),
                 'isQuickCreateEnabled' => $this->getSettingsService()->isQuickCreateEnabled(),
                 'currentSiteId' => $currentSiteId,
                 'siteMap' => $siteMap,

packages/plugin/src/Elements/Event.php

@@ -1383,7 +1383,9 @@ public function jsonSerialize(): array
                 'handle' => $this->getSite()->handle,
                 'language' => $this->getSite()->language,
             ],
-            'editable' => $this->isEditable(),
+            'canEdit' => $this->isEditable(),
+            'startEditable' => $this->isEditable() && Calendar::getInstance()->settings->allowEventsToBeModifiedByDragAndDrop(),
+            'durationEditable' => $this->isEditable() && Calendar::getInstance()->settings->allowEventsToBeModifiedByDragAndDrop(),
             'enabled' => (bool) $this->enabled,
             'backgroundColor' => $this->getCalendar()->color,
             'borderColor' => $this->getCalendar()->getDarkerColor(),

packages/plugin/src/Models/SettingsModel.php

@@ -13,6 +13,7 @@ class SettingsModel extends Model
     public const DEFAULT_ALL_DAY = false;
     public const DEFAULT_SHOW_MINI_CAL = true;
     public const DEFAULT_SHOW_DISABLED_EVENTS = true;
+    public const DEFAULT_ALLOW_EVENTS_TO_BE_MODIFIED_BY_DRAG_AND_DROP = true;
     public const DEFAULT_VIEW = Calendar::VIEW_MONTH;
     public const DEFAULT_ALLOW_QUICK_CREATE = true;
     public const DEFAULT_AUTHORED_EVENT_EDIT_ONLY = false;
@@ -36,6 +37,8 @@ class SettingsModel extends Model
 
     public null|array|bool $showDisabledEvents = null;
 
+    public null|array|bool $allowEventsToBeModifiedByDragAndDrop = null;
+
     public null|array|bool $quickCreateEnabled = null;
 
     public ?string $defaultView = null;
@@ -93,6 +96,7 @@ public function __construct(array $attributes = [])
         $this->defaultView = self::DEFAULT_VIEW;
         $this->guestAccess = null;
         $this->quickCreateEnabled = self::DEFAULT_ALLOW_QUICK_CREATE;
+        $this->allowEventsToBeModifiedByDragAndDrop = self::DEFAULT_ALLOW_EVENTS_TO_BE_MODIFIED_BY_DRAG_AND_DROP;
         $this->showDisabledEvents = self::DEFAULT_SHOW_DISABLED_EVENTS;
         $this->authoredEventEditOnly = self::DEFAULT_AUTHORED_EVENT_EDIT_ONLY;
         $this->firstDayOfWeek = self::DEFAULT_FIRST_DAY_OF_WEEK;

packages/plugin/src/Services/SettingsService.php

@@ -53,6 +53,11 @@ public function showDisabledEvents(): bool
         return $this->getSettingsModel()->showDisabledEvents;
     }
 
+    public function allowEventsToBeModifiedByDragAndDrop(): bool
+    {
+        return $this->getSettingsModel()->allowEventsToBeModifiedByDragAndDrop;
+    }
+
     public function isQuickCreateEnabled(): bool
     {
         return $this->getSettingsModel()->quickCreateEnabled;

packages/plugin/src/templates/settings/_general.html

@@ -77,6 +77,15 @@
             errors: settings.getErrors('showDisabledEvents')
         }) }}
 
+        {{ forms.lightswitchField({
+            label: "Allow events to be modified by drag and drop in Month/Week/Day views?"|t('calendar'),
+            instructions: "Allows all users with event creation privileges to use drag and drop to modify events."|t('calendar'),
+            id: 'allowEventsToBeModifiedByDragAndDrop',
+            name: 'settings[allowEventsToBeModifiedByDragAndDrop]',
+            on: settings.allowEventsToBeModifiedByDragAndDrop,
+            errors: settings.getErrors('allowEventsToBeModifiedByDragAndDrop')
+        }) }}
+
         {{ forms.lightswitchField({
             label: "Allow new events to be created in Month/Week/Day views?"|t('calendar'),
             instructions: "Allows all users with event creation privileges to use the Quick Create event feature."|t('calendar'),

packages/plugin/src/templates/view/calendar.html

@@ -104,6 +104,7 @@
          data-current-site-id="{{ selectedSiteId }}"
          data-current-day="{{ currentDay.toDateString }}"
          data-site-map="{{ siteMap|json_encode }}"
+         {% if allowEventsToBeModifiedByDragAndDrop %}data-allow-events-to-be-modified-by-drag-and-drop{% endif %}
          {% if isQuickCreateEnabled %}data-can-quick-create{% endif %}
          {% if isMultiSite %}data-is-multi-site{% endif %}
          {% if currentUser and currentUser.can('calendar-manageEvents') and calendarOptions is not empty %}

packages/plugin/src/translations/de/calendar.php

@@ -196,6 +196,8 @@
     'Displays a side menu with mini calendar and list of calendars, allowing you to filter your event results.' => 'Zeigt ein seitliches Menü mit dem Mini-Kalender und einer Liste aller Kalender an, mit der Ereignisse gefiltert werden können.',
     'Include Disabled Events in Month/Week/Day views?' => 'Deaktivierte Ereignisse in Monats-/Wochen-/Tagesansicht anzeigen?',
     'Events that are disabled will be displayed in the views with faded styles.' => 'Deaktivierte Ereignisse werden mit einem ausgegrautem Stil angezeigt.',
+    'Allow events to be modified by drag and drop in Month/Week/Day views?' => 'Soll es möglich sein, Ereignisse in der Monats-/Wochen-/Tagesansicht per Drag & Drop zu bearbeiten?',
+    'Allows all users with event creation privileges to use drag and drop to modify events.' => 'Ermöglicht allen Benutzern mit Berechtigung zum Erstellen von Ereignissen, Ereignisse per Drag & Drop zu bearbeiten.',
     'Default View' => 'Standardansicht',
     'The default page to go to when clicking the Calendar nav item.' => 'Die Standardansicht, wenn im Menü auf den Kalendereintrag geklickt wird.',
     'Allow new events to be created in Month/Week/Day views?' => 'Das Erstellen neuer Ereignisse in der Monats-/Wochen-/Tagesansicht zulassen?',

packages/plugin/src/translations/en-US/calendar.php

@@ -207,6 +207,8 @@
     'Displays a side menu with mini calendar and list of calendars, allowing you to filter your event results.' => 'Displays a side menu with mini calendar and list of calendars, allowing you to filter your event results.',
     'Include Disabled Events in Month/Week/Day views?' => 'Include Disabled Events in Month/Week/Day views?',
     'Events that are disabled will be displayed in the views with faded styles.' => 'Events that are disabled will be displayed in the views with faded styles.',
+    'Allow events to be modified by drag and drop in Month/Week/Day views?' => 'Allow events to be modified by drag and drop in Month/Week/Day views?',
+    'Allows all users with event creation privileges to use drag and drop to modify events.' => 'Allows all users with event creation privileges to use drag and drop to modify events.',
     'Default View' => 'Default View',
     'The default page to go to when clicking the Calendar nav item.' => 'The default page to go to when clicking the Calendar nav item.',
     'Allow new events to be created in Month/Week/Day views?' => 'Allow new events to be created in Month/Week/Day views?',

packages/plugin/src/translations/lv/calendar.php

@@ -190,6 +190,8 @@
     'Displays a side menu with mini calendar and list of calendars, allowing you to filter your event results.' => 'Parāda sānu izvēlni ar mini kalendāru un kalendāru sarakstu, ļaujot filtrēt pasākumus pēc kalendāra.',
     'Include Disabled Events in Month/Week/Day views?' => 'Iekļaut izslēgtos pasājumus mēneša/nedēļas/dienas skatos?',
     'Events that are disabled will be displayed in the views with faded styles.' => 'Izslēgtie pasākumi tiks atrādīti kalendāra skatos caurspīdīgāki.',
+    'Allow events to be modified by drag and drop in Month/Week/Day views?' => 'Vai atļaut notikumus mainīt, velkot un nometot tos mēneša/nedēļas/dienas skatos?',
+    'Allows all users with event creation privileges to use drag and drop to modify events.' => 'Atļauj visiem lietotājiem ar notikumu izveides privilēģijām modificēt notikumus, izmantojot vilkšanas un nomešanas funkciju.',
     'Default View' => 'Kalendāra skats pēc noklusējuma',
     'The default page to go to when clicking the Calendar nav item.' => 'Lapa uz kuru doties spiežot uz Kalendāra navigācijas pogas',
     'Allow new events to be created in Month/Week/Day views?' => 'Vai atļaut izveidot pasākumus kalendāra mēneša/nedēļas/dienas skatos',

packages/plugin/src/translations/nl/calendar.php

@@ -189,6 +189,8 @@
     'Displays a side menu with mini calendar and list of calendars, allowing you to filter your event results.' => 'Toont een menu in de zijbalk met een minikalender en kalenderlijst waarmee gefilderd kan worden binnen evenementen.',
     'Include Disabled Events in Month/Week/Day views?' => 'Include Disabled Events in Month/Week/Day views?',
     'Events that are disabled will be displayed in the views with faded styles.' => 'Events that are disabled will be displayed in the views with faded styles.',
+    'Allow events to be modified by drag and drop in Month/Week/Day views?' => 'Is het mogelijk om evenementen te bewerken door ze te verslepen in de maand-, week- en dagweergave?',
+    'Allows all users with event creation privileges to use drag and drop to modify events.' => 'Hiermee kunnen alle gebruikers met de juiste rechten om evenementen aan te maken, deze via drag-and-drop wijzigen.',
     'Default View' => 'Default View',
     'The default page to go to when clicking the Calendar nav item.' => 'The default page to go to when clicking the Calendar nav item.',
     'Allow new events to be created in Month/Week/Day views?' => 'Allow new events to be created in Month/Week/Day views?',

packages/scripts/src/calendars/fullcalendar-methods.js

@@ -1,4 +1,4 @@
-import { buildEventPopup } from './popups';
+import { buildEventPopup, hideAllPopups } from './popups';
 
 const $solspaceCalendar = $('#solspace-calendar');
 let $solspaceCalendarSpinner = null;
@@ -245,7 +245,7 @@ export const getEvents = (start, end, timezone, callback) => {
 
 export const closeAllPopups = () => {
   window.calendarPopupsEnabled = false;
-  tippy.hideAll();
+  hideAllPopups();
 };
 
 export const enablePopups = () => {

packages/scripts/src/calendars/main.js

@@ -10,9 +10,10 @@ $(() => {
   'use strict';
 
   const { currentDay, siteMap, overlapThreshold, language, firstDayOfWeek, timeFormat } = $calendar.data();
-  let { currentSiteId, canEditEvents, canQuickCreate, isMultiSite } = $calendar.data();
+  let { currentSiteId, canEditEvents, allowEventsToBeModifiedByDragAndDrop, canQuickCreate, isMultiSite } = $calendar.data();
 
   canEditEvents = canEditEvents !== undefined;
+  allowEventsToBeModifiedByDragAndDrop = allowEventsToBeModifiedByDragAndDrop !== undefined;
   canQuickCreate = canQuickCreate !== undefined;
   isMultiSite = isMultiSite !== undefined;
 
@@ -135,7 +136,7 @@ $(() => {
     showNonCurrentDates: true,
     eventLimit: 5,
     aspectRatio: 1.3,
-    editable: canEditEvents,
+    editable: canEditEvents && allowEventsToBeModifiedByDragAndDrop,
     lang: language,
     views: viewSpecificOptions,
     firstDay: firstDayOfWeek,

packages/scripts/src/calendars/popups.js

@@ -1,5 +1,6 @@
 let eventCreatorShown = false;
 const $calendar = $('#solspace-calendar');
+const popupInstances = new Set();
 
 const closeEventCreatorModal = (backdrop, modal) => {
   document.body.removeChild(backdrop);
@@ -174,6 +175,14 @@ export const buildEventPopup = (event, element, calendarTimeFormat, isMultiSite
     return;
   }
 
+  if (!window.calendarPopupsEnabled) {
+    return;
+  }
+
+  if (element[0]._tippy) {
+    element[0]._tippy.destroy();
+  }
+
   const start = moment(event.start);
   const end = moment(event.end);
 
@@ -226,7 +235,7 @@ export const buildEventPopup = (event, element, calendarTimeFormat, isMultiSite
     body.innerHTML += '<div class="event-repeats separator"><div class="spinner"></div></div>';
   }
 
-  if (event.editable) {
+  if (event.canEdit) {
     let buttonsHtml =
       '<div class="buttons">' +
       '<a class="btn small submit" href="' +
@@ -269,6 +278,9 @@ export const buildEventPopup = (event, element, calendarTimeFormat, isMultiSite
     delay: [500, 300],
     theme: 'calendar-event',
     appendTo: document.body,
+    onDestroy() {
+      popupInstances.delete(instance);
+    },
     onShow() {
       if (!window.calendarPopupsEnabled) {
         return false;
@@ -298,6 +310,8 @@ export const buildEventPopup = (event, element, calendarTimeFormat, isMultiSite
     },
   });
 
+  popupInstances.add(instance);
+
   popup.querySelector('.sc-event-popup__close').addEventListener('click', () => instance.hide());
 
   const deleteEventEl = popup.querySelector('.delete-event');
@@ -362,6 +376,11 @@ export const buildEventPopup = (event, element, calendarTimeFormat, isMultiSite
   }
 };
 
+export const hideAllPopups = () => {
+  popupInstances.forEach((instance) => instance.destroy());
+  popupInstances.clear();
+};
+
 export const createDateAsUTC = (date) =>
   new Date(
     date.getUTCFullYear(),