Add contao/calendar-bundle dependency

composer.json

@@ -11,6 +11,7 @@
   "require": {
     "php": "^8.3",
     "contao/core-bundle": "^5.7",
+    "contao/calendar-bundle": "^5.7",
     "contao/manager-plugin": "^2.0",
     "numero2/contao-tags": "^0.5"
   },

contao/templates/frontend/event_filter.html.twig

@@ -46,6 +46,13 @@
 
     const targetEventListId = filters.dataset.eventlistId || 'eventlist';
     const list = document.getElementById(targetEventListId);
+    const initialStoredEventListView = (() => {
+        try {
+            return (window.localStorage.getItem('eventlist_view') || '').trim();
+        } catch (error) {
+            return '';
+        }
+    })();
 
     const applyDefaultGrid = (targetList) => {
         if (!targetList) {
@@ -53,10 +60,7 @@
         }
 
         targetList.classList.add('event-filter-target-list');
-
-        targetList.style.display = 'grid';
-        targetList.style.gridTemplateColumns = 'repeat(auto-fill, minmax(240px, 1fr))';
-        targetList.style.gap = '1rem';
+        targetList.classList.add('grid');
     };
 
     if (!list) {
@@ -68,6 +72,34 @@
 
     applyDefaultGrid(list);
 
+    window.addEventListener('DOMContentLoaded', () => {
+        window.setTimeout(() => {
+            if ('' !== initialStoredEventListView) {
+                return;
+            }
+
+            const targetList = document.getElementById(targetEventListId);
+
+            if (!targetList) {
+                return;
+            }
+
+            targetList.classList.remove('list');
+            applyDefaultGrid(targetList);
+
+            const toggleToList = document.getElementById('toggletolist');
+            const toggleToGrid = document.getElementById('toggletogrid');
+
+            toggleToList?.classList.remove('disabled');
+            toggleToGrid?.classList.add('disabled');
+
+            try {
+                window.localStorage.setItem('eventlist_view', 'grid');
+            } catch (error) {
+            }
+        }, 0);
+    }, { once: true });
+
     const events = list ? Array.from(list.querySelectorAll(':scope > .event')) : [];
     const tagSelect = filters.querySelector('#tag-filter');
     const locationSelect = filters.querySelector('#location-filter');