Add button calendar modal

package.json

@@ -12,7 +12,10 @@
 		"format": "prettier --plugin prettier-plugin-svelte . --write ."
 	},
 	"devDependencies": {
-		"@iconify/svelte": "^4.0.1",
+		"@event-calendar/core": "^2.6.1",
+		"@event-calendar/day-grid": "^2.6.1",
+		"@event-calendar/list": "^2.6.1",
+		"@iconify/svelte": "^4.0.2",
 		"@sveltejs/adapter-node": "^5.0.1",
 		"@sveltejs/kit": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
@@ -59,12 +62,13 @@
 		"http-proxy-middleware": "^3.0.0",
 		"js-yaml": "^4.1.0",
 		"konva": "^9.3.6",
-		"maplibre-gl": "^4.1.3",
+		"maplibre-gl": "^4.2.0",
 		"marked": "^12.0.2",
 		"svelte-confetti": "^1.4.0",
-		"svelte-dnd-action": "^0.9.43",
+		"svelte-dnd-action": "^0.9.44",
 		"svelte-modals": "^1.3.0",
 		"svelte-ripple": "^0.1.1",
-		"svelte-tiny-virtual-list": "^2.1.0"
+		"svelte-tiny-virtual-list": "^2.1.0",
+		"weekstart": "^2.0.0"
 	}
 }

scripts/translations/fetch.py

@@ -132,6 +132,11 @@ def process_dir(_dir, _output, _keys):
             ("notifications_dismiss", ["ui.notification_toast.dismiss"]),
             ("expand", ["ui.components.target-picker.expand"]),
             ("weather_forecast", ["ui.card.weather.forecast"]),
+            ("calendar", ["ui.components.calendar.label"]),
+            ("today", ["ui.components.calendar.today"]),
+            ("calendar_error", ["ui.components.calendar.event_retrieval_error"]),
+            ("event_delete", ["ui.components.calendar.event.delete"]),
+            ("year", ["ui.components.calendar.event.rrule.year"]),
         ],
     ),
     (  # MEDIA_PLAYER

src/global.d.ts

@@ -1,5 +1,8 @@
 declare module 'svelte-ripple';
 declare module 'svelte-confetti';
+declare module '@event-calendar/core';
+declare module '@event-calendar/day-grid';
+declare module '@event-calendar/list';
 
 declare type Item = import('svelte-dnd-action').Item;
 declare type DndEvent<ItemType = Item> = import('svelte-dnd-action').DndEvent<ItemType>;

src/lib/Main/Button.svelte

@@ -12,7 +12,10 @@
 		ripple,
 		states,
 		templates,
-		config
+		config,
+		selectedLanguage,
+		calendarView,
+		calendarFirstDay
 	} from '$lib/Stores';
 	import { getDomain, getName, getTogglableService } from '$lib/Utils';
 	import Icon, { loadIcon } from '@iconify/svelte';
@@ -197,9 +200,23 @@
 					openModal(() => import('$lib/Modal/SwitchModal.svelte'), { sel });
 					break;
 
+				// calendar
+				case 'calendar': {
+					// set first day of week
+					$calendarFirstDay =
+						'weekInfo' in Intl.Locale.prototype
+							? (new Intl.Locale($selectedLanguage) as any)?.weekInfo.firstDay
+							: (await import('weekstart')).getWeekStartByLocale($selectedLanguage);
+
+					// set calendar view type
+					$calendarView = localStorage.getItem('calendar');
+
+					openModal(() => import('$lib/Modal/CalendarModal.svelte'), { sel });
+					break;
+				}
+
 				// sensor
 				case 'air_quality':
-				case 'calendar':
 				case 'date':
 				case 'time':
 				case 'event':
@@ -425,9 +442,6 @@
 	onDestroy(() => unsubscribe?.());
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-
 <div
 	class="container"
 	bind:this={container}