@svar-ui/svelte-calendar 2.6.0 → 2.7.0

package/dist/components/Calendar.svelte

@@ -13,7 +13,7 @@ let { events, init, view = "day", date, views = [
 	"day",
 	"week",
 	"month"
-], toolbar, cellCss, eventCss, eventContent, recurring = false, readonly = false, children, tooltip, eventPopup, ...restProps } = $props();
+], toolbar, cellCss, eventCss, eventContent, recurring = false, history = false, readonly = false, children, tooltip, eventPopup, eventProjection, ...restProps } = $props();
 // uses same logic as the Locale component
 const words = {
 	...coreEn,
@@ -34,7 +34,8 @@ const fmt = (format) => {
 const dataStore = new CalendarStore(writable, {
 	recurring,
 	weekStart: rawLocale?.calendar?.weekStart ?? 1,
-	dateFormat: fmt
+	dateFormat: fmt,
+	history
 });
 // define event route
 let firstInRoute = dataStore.in;
@@ -75,12 +76,17 @@ const stateStore = {
 	getReactiveState,
 	exec,
 	getEvent,
-	fmt
+	fmt,
+	getBrandmark: () => dataStore.getBrandmark()
 };
 setContext("calendar-api", stateStore);
 let init_once = true;
+let lastOptions = null;
 const reinitStore = () => {
-	dataStore.configureViews(viewOptions);
+	if (lastOptions !== viewOptions) {
+		lastOptions = viewOptions;
+		dataStore.configureViews(viewOptions);
+	}
 	dataStore.init({
 		currentView: view,
 		currentDate: date,
@@ -89,6 +95,7 @@ const reinitStore = () => {
 	if (init_once && init) {
 		init(api);
 		init_once = false;
+		dataStore.postInit();
 	}
 };
 reinitStore();
@@ -107,4 +114,6 @@ $effect(reinitStore);
 	{tooltip}
 	{eventPopup}
 	{readonly}
+	{history}
+	{eventProjection}
 />

package/dist/components/Calendar.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
 import { CalendarStore } from "@svar-ui/calendar-store";
 import type { ViewConfig } from "@svar-ui/calendar-store";
-import type { CalendarInstanceApi } from "./types.js";
-import type { ToolbarItem, CellCss, EventCss } from "@svar-ui/calendar-store";
+import type { CalendarInstanceApi } from "../types.js";
+import type { ToolbarItem, CellCss, EventCss, EventProjection } from "@svar-ui/calendar-store";
 type Props = {
     events: any;
     init?: (api: CalendarInstanceApi) => void;
@@ -18,9 +18,12 @@ type Props = {
     eventContent?: any;
     date?: Date;
     recurring?: boolean;
+    history?: boolean;
     children?: Snippet;
     tooltip?: any;
     eventPopup?: any;
+    eventProjection?: EventProjection | null;
+    [key: `on${string}`]: ((ev: any) => void) | undefined;
 };
 declare const Calendar: import("svelte").Component<Props, {
     getState: () => import("@svar-ui/calendar-store").State;
@@ -35,7 +38,11 @@ declare const Calendar: import("svelte").Component<Props, {
         events: import("@svar-ui/lib-state").IPublicWritable<import("@svar-ui/calendar-store").EventsStore>;
         viewData: import("@svar-ui/lib-state").IPublicWritable<any>;
         filters: import("@svar-ui/lib-state").IPublicWritable<Map<string, (obj: any) => boolean>>;
-        editorData: import("@svar-ui/lib-state").IPublicWritable<import("@svar-ui/calendar-store").CalendarEvent | null>;
+        editorData: import("@svar-ui/lib-state").IPublicWritable<import("@svar-ui/calendar-store").EditorData | null>;
+        history: import("@svar-ui/lib-state").IPublicWritable<{
+            undo: number;
+            redo: number;
+        }>;
         _view: import("@svar-ui/lib-state").IPublicWritable<import("@svar-ui/calendar-store").ViewModel>;
     };
     getStores: () => {
@@ -52,23 +59,29 @@ declare const Calendar: import("svelte").Component<Props, {
         event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
         edit?: boolean;
         id?: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
         event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
         mode?: "single" | "following";
-        originalDate?: string;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
+        cascade?: boolean;
     } | {
         id: import("@svar-ui/calendar-store").EventID | null;
+        rawId?: import("@svar-ui/calendar-store").EventID | null;
+        mode?: import("@svar-ui/calendar-store").RecurringEditMode | null;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
-        x: number;
-        y: number;
+        rawId?: import("@svar-ui/calendar-store").EventID;
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        mode?: "single" | "following";
     } | {
         filter?: ((obj: any) => boolean) | null;
         tag?: string;
-    }) => Promise<{
+    } | import("@svar-ui/calendar-store").RequestDataAction | import("@svar-ui/calendar-store").ProvideDataAction) => Promise<{
         date?: Date;
         view?: string;
     } | {
@@ -77,23 +90,29 @@ declare const Calendar: import("svelte").Component<Props, {
         event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
         edit?: boolean;
         id?: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
         event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
         mode?: "single" | "following";
-        originalDate?: string;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
+        cascade?: boolean;
     } | {
         id: import("@svar-ui/calendar-store").EventID | null;
+        rawId?: import("@svar-ui/calendar-store").EventID | null;
+        mode?: import("@svar-ui/calendar-store").RecurringEditMode | null;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
-        x: number;
-        y: number;
+        rawId?: import("@svar-ui/calendar-store").EventID;
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        mode?: "single" | "following";
     } | {
         filter?: ((obj: any) => boolean) | null;
         tag?: string;
-    }>;
+    } | import("@svar-ui/calendar-store").RequestDataAction | import("@svar-ui/calendar-store").ProvideDataAction>;
     setNext: (ev: any) => any;
     intercept: (name: keyof import("@svar-ui/calendar-store").StoreActions, handler: (v: {
         date?: Date;
@@ -104,23 +123,29 @@ declare const Calendar: import("svelte").Component<Props, {
         event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
         edit?: boolean;
         id?: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
         event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
         mode?: "single" | "following";
-        originalDate?: string;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
+        cascade?: boolean;
     } | {
         id: import("@svar-ui/calendar-store").EventID | null;
+        rawId?: import("@svar-ui/calendar-store").EventID | null;
+        mode?: import("@svar-ui/calendar-store").RecurringEditMode | null;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
-        x: number;
-        y: number;
+        rawId?: import("@svar-ui/calendar-store").EventID;
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        mode?: "single" | "following";
     } | {
         filter?: ((obj: any) => boolean) | null;
         tag?: string;
-    }) => void | boolean | Promise<boolean>, config?: import("@svar-ui/lib-state").IEventConfig) => void;
+    } | import("@svar-ui/calendar-store").RequestDataAction | import("@svar-ui/calendar-store").ProvideDataAction) => void | boolean | Promise<boolean>, config?: import("@svar-ui/lib-state").IEventConfig) => void;
     on: (name: keyof import("@svar-ui/calendar-store").StoreActions, handler: (v: {
         date?: Date;
         view?: string;
@@ -130,23 +155,29 @@ declare const Calendar: import("svelte").Component<Props, {
         event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
         edit?: boolean;
         id?: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
         event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
         mode?: "single" | "following";
-        originalDate?: string;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
+        rawId?: import("@svar-ui/calendar-store").EventID;
+        cascade?: boolean;
     } | {
         id: import("@svar-ui/calendar-store").EventID | null;
+        rawId?: import("@svar-ui/calendar-store").EventID | null;
+        mode?: import("@svar-ui/calendar-store").RecurringEditMode | null;
     } | {
         id: import("@svar-ui/calendar-store").EventID;
-        x: number;
-        y: number;
+        rawId?: import("@svar-ui/calendar-store").EventID;
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        mode?: "single" | "following";
     } | {
         filter?: ((obj: any) => boolean) | null;
         tag?: string;
-    }) => void | boolean | Promise<boolean>, config?: import("@svar-ui/lib-state").IEventConfig) => void;
+    } | import("@svar-ui/calendar-store").RequestDataAction | import("@svar-ui/calendar-store").ProvideDataAction) => void | boolean | Promise<boolean>, config?: import("@svar-ui/lib-state").IEventConfig) => void;
     detach: (tag: number | string | symbol) => void;
 }, "">;
 type Calendar = ReturnType<typeof Calendar>;

package/dist/components/ContextMenu.svelte

@@ -6,6 +6,7 @@ import { en as coreEn } from "@svar-ui/core-locales";
 import { getMenuOptions } from "@svar-ui/calendar-store";
 let { options = [], api = null, resolver = null, filter = null, at = "point", children, onclick, css } = $props();
 let activeId = null;
+let rawId = null;
 // set locale
 let l = getContext("wx-i18n");
 if (!l) {
@@ -29,15 +30,16 @@ function getOptions() {
 	const base = options.length ? options : getMenuOptions();
 	return applyLocale(base);
 }
-function itemResolver(rawId, ev) {
-	if (!rawId || !api) return null;
-	const event = api.getEvent(rawId);
+function itemResolver(id, ev) {
+	if (!id || !api) return null;
+	const event = api.getEvent(id);
 	if (!event) return null;
 	if (resolver) {
 		const result = resolver(event, ev);
 		if (!result) return null;
 	}
 	activeId = event.id;
+	rawId = id;
 	return event;
 }
 function menuAction(ev) {
@@ -45,9 +47,15 @@ function menuAction(ev) {
 	if (!action) return;
 	const id = typeof activeId === "object" ? activeId.id : activeId;
 	if (action.id === "edit-event") {
-		api.exec("select-event", { id });
+		api.exec("select-event", {
+			id,
+			rawId
+		});
 	} else if (action.id === "delete-event") {
-		api.exec("delete-event", { id });
+		api.exec("delete-event", {
+			id,
+			rawId
+		});
 	}
 	onclick?.(ev);
 }

package/dist/components/Editor.svelte

@@ -4,9 +4,11 @@ import { locale } from "@svar-ui/lib-dom";
 import { en } from "@svar-ui/calendar-locales";
 import { en as coreEn } from "@svar-ui/core-locales";
 import DateTimePicker from "./DateTimePicker.svelte";
-import { getEditorItems } from "./editorItems.js";
+import EventDatesForm from "./EventDatesForm.svelte";
+import { getEditorItems } from "../defaults.js";
 registerEditorItem("date-time-picker", DateTimePicker);
-let { api, values, items = getEditorItems(), placement = "sidebar", layout = "default", focus = true, css = "", topBar, autoSave = true, onchange, onsave, onaction, ...editorProps } = $props();
+registerEditorItem("event-dates", EventDatesForm);
+let { api, values, items, placement, layout = "default", focus = true, css = "", topBar, autoSave = true, onchange, onsave, onaction, ...editorProps } = $props();
 // svelte-ignore state_referenced_locally
 void values;
 // svelte-ignore state_referenced_locally
@@ -30,9 +32,10 @@ function applyLocale(list) {
 		return next;
 	});
 }
-let generation = $state(1);
-const allDay = $derived(generation > 0 ? $editorData?.allDay : false);
-const cItems = $derived(applyLocale(items));
+const calendarCtx = getContext("calendar-api");
+const finalPlacement = $derived(placement ?? (calendarCtx?.isCompact() ? "fullscreen" : "sidebar"));
+const useRecurringForm = $derived(!!$editorData?.recurring && ($editorData?.recurringMode ?? "series") !== "single");
+const cItems = $derived(applyLocale(items ?? getEditorItems(useRecurringForm)));
 const defaultTopBar = { items: [
 	{
 		comp: "icon",
@@ -49,49 +52,44 @@ const defaultTopBar = { items: [
 	}
 ] };
 const editorTopBar = $derived(topBar === undefined ? defaultTopBar : topBar);
-const editorCss = $derived([
-	"wx-editor-calendar",
-	allDay ? "wx-editor-all-day" : "",
-	css
-].filter(Boolean).join(" "));
+const editorCss = $derived(["wx-editor-calendar", css].filter(Boolean).join(" "));
 function handleSave(ev) {
 	onsave?.(ev);
 	const data = $editorData;
 	if (!data) return;
+	const mode = data.recurringMode ?? "series";
+	// a series save must not carry the clicked occurrence's context in
+	// rawId, or the store would treat it as a single-occurrence edit
 	api.exec("update-event", {
 		id: data.id,
-		event: { ...ev.values }
+		rawId: mode === "series" ? data.id : data.rawId,
+		event: { ...ev.values },
+		...data.recurringOriginalDate && mode !== "series" ? { mode } : {}
 	});
 }
-function sameDay(a, b) {
-	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
 function handleChange(ev) {
-	const { key, value, update } = ev;
-	const prev = $editorData;
-	generation++;
-	if (prev && key === "start" && !update.allDay) {
-		const oldStart = prev.start;
-		const oldEnd = prev.end;
-		if (oldStart instanceof Date && oldEnd instanceof Date && sameDay(oldStart, oldEnd) && value instanceof Date) {
-			const newEnd = new Date(oldEnd);
-			newEnd.setFullYear(value.getFullYear(), value.getMonth(), value.getDate());
-			update.end = newEnd;
-		}
-	}
 	onchange?.(ev);
 }
 function handleDelete() {
 	const data = $editorData;
 	if (!data) return;
-	api.exec("delete-event", { id: data.id });
-	api.exec("select-event", { id: null });
+	api.exec("delete-event", {
+		id: data.id,
+		rawId: data.rawId
+	});
+	api.exec("select-event", {
+		id: null,
+		rawId: null
+	});
 }
 function handleAction(ev) {
 	onaction?.(ev);
 	const { item } = ev;
 	if (item.id === "close" && !!item.comp) {
-		api.exec("select-event", { id: null });
+		api.exec("select-event", {
+			id: null,
+			rawId: null
+		});
 	}
 }
 </script>
@@ -106,9 +104,9 @@ function handleAction(ev) {
 		onchange={handleChange}
 		onaction={handleAction}
 		onsave={handleSave}
-		{placement}
+		placement={finalPlacement}
 		{layout}
-		values={$editorData}
+		values={$editorData.values}
 		css={editorCss}
 	/>
 {/if}
@@ -117,7 +115,4 @@ function handleAction(ev) {
 	:global(.wx-sidearea .wx-editor-calendar) {
 		width: 450px;
 	}
-	:global(.wx-editor-calendar.wx-editor-all-day .wx-timepicker) {
-		visibility: hidden;
-	}
 </style>

package/dist/components/EventDatesForm.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">import { getContext, setContext } from "svelte";
+import { Checkbox, DatePicker, TimePicker } from "@svar-ui/svelte-core";
+const locale = getContext("wx-i18n");
+const _ = locale ? locale.getGroup("eventCalendar") : (v) => v;
+let { value, error, onchange } = $props();
+setContext("wx-input-id", "");
+function sameDay(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function update(part) {
+	onchange({ value: {
+		...value,
+		...part
+	} });
+}
+function pickDate(key, day) {
+	if (!day) return;
+	const current = value[key];
+	const next = new Date(day);
+	if (current) {
+		next.setHours(current.getHours(), current.getMinutes(), 0, 0);
+	}
+	if (key === "start" && sameDay(value.start, value.end)) {
+		const end = new Date(value.end);
+		end.setFullYear(next.getFullYear(), next.getMonth(), next.getDate());
+		update({
+			start: next,
+			end
+		});
+	} else {
+		update({ [key]: next });
+	}
+}
+function pickTime(key, time) {
+	const next = new Date(value[key]);
+	next.setHours(time.getHours(), time.getMinutes(), 0, 0);
+	update({ [key]: next });
+}
+</script>
+
+<div class="wx-event-dates" class:wx-error={!!error}>
+	<div class="wx-date-row">
+		<span class="wx-date-label">{_("Start date")}</span>
+		<div class="wx-date-control">
+			<DatePicker
+				value={value.start}
+				buttons={false}
+				onchange={ev => pickDate("start", ev.value)}
+			/>
+		</div>
+		{#if !value.allDay}
+			<div class="wx-time-control">
+				<TimePicker
+					value={value.start}
+					onchange={ev => pickTime("start", ev.value)}
+				/>
+			</div>
+		{/if}
+	</div>
+
+	<div class="wx-date-row">
+		<span class="wx-date-label">{_("End date")}</span>
+		<div class="wx-date-control">
+			<DatePicker
+				value={value.end}
+				buttons={false}
+				onchange={ev => pickDate("end", ev.value)}
+			/>
+		</div>
+		{#if !value.allDay}
+			<div class="wx-time-control">
+				<TimePicker
+					value={value.end}
+					onchange={ev => pickTime("end", ev.value)}
+				/>
+			</div>
+		{/if}
+	</div>
+
+	<div class="wx-date-row">
+		<span class="wx-date-label"></span>
+		<Checkbox
+			label={_("All day")}
+			value={!!value.allDay}
+			onchange={ev => update({ allDay: ev.value })}
+		/>
+	</div>
+</div>
+
+<style>
+	.wx-event-dates {
+		display: flex;
+		flex-direction: column;
+		gap: var(--wx-padding);
+	}
+
+	.wx-date-row {
+		display: flex;
+		align-items: center;
+		gap: var(--wx-padding);
+	}
+
+	.wx-date-label {
+		flex: none;
+		width: 72px;
+	}
+
+	.wx-date-control {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.wx-time-control {
+		flex: none;
+		width: 96px;
+	}
+
+	.wx-error :global(.wx-input) {
+		border-color: var(--wx-color-danger);
+	}
+</style>

package/dist/components/EventDatesForm.svelte.d.ts

@@ -0,0 +1,15 @@
+type Value = {
+    start: Date;
+    end: Date;
+    allDay?: boolean;
+};
+type $$ComponentProps = {
+    value: Value;
+    error?: unknown;
+    onchange: (ev: {
+        value: Value;
+    }) => void;
+};
+declare const EventDatesForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventDatesForm = ReturnType<typeof EventDatesForm>;
+export default EventDatesForm;

package/dist/components/Layout.svelte

@@ -2,24 +2,37 @@
 import Navigation from "./Navigation.svelte";
 import Sections from "./Render/Sections.svelte";
 import ScrollableSection from "./Render/ScrollableSection.svelte";
+const COMPACT_WIDTH = 480;
 const _ = getContext("wx-i18n").getGroup("eventCalendar");
-const { store, views, toolbar, cellCss, eventCss, eventContent, children, tooltip, eventPopup, brandmark, readonly = false } = $props();
+const { store, views, toolbar, cellCss, eventCss, eventContent, children, tooltip, eventPopup, brandmark, readonly = false, history = false, eventProjection } = $props();
 // svelte-ignore state_referenced_locally
 const { viewData, currentView, _view } = store.getReactiveState();
 const renderMode = $derived($_view?.render);
+let isCompact = false;
+// svelte-ignore state_referenced_locally
+store.isCompact = () => isCompact;
+function observeSize(node) {
+	store.getRootNode = () => node;
+	const observer = new ResizeObserver((entries) => {
+		isCompact = entries[0].contentRect.width < COMPACT_WIDTH;
+		node.classList.toggle("wx-calendar--compact", isCompact);
+	});
+	observer.observe(node);
+	return { destroy: () => observer.disconnect() };
+}
 </script>
 
 {#snippet viewContent()}
 	{#if renderMode === "scrollable"}
-		<ScrollableSection data={$viewData} {cellCss} {eventCss} {eventContent} view={$currentView} {tooltip} {eventPopup} {readonly} />
+		<ScrollableSection data={$viewData} {cellCss} {eventCss} {eventContent} view={$currentView} {tooltip} {eventPopup} {readonly} {eventProjection} />
 	{:else}
-		<Sections data={$viewData} {cellCss} {eventCss} {eventContent} view={$currentView} {tooltip} {eventPopup} {readonly} />
+		<Sections data={$viewData} {cellCss} {eventCss} {eventContent} view={$currentView} {tooltip} {eventPopup} {readonly} {eventProjection} />
 	{/if}
 {/snippet}
 
-<div class="wx-calendar" role="region" aria-label={_("Calendar")}>
+<div class="wx-calendar" role="region" aria-label={_("Calendar")} use:observeSize>
 	{#if toolbar !== null}
-		<Navigation {views} toolbar={toolbar} {readonly} />
+		<Navigation {views} toolbar={toolbar} {readonly} {history} />
 	{/if}
 	{#if children}
 		<div class="wx-calendar-content">

package/dist/components/Layout.svelte.d.ts

@@ -15,6 +15,8 @@ type $$ComponentProps = {
     eventPopup?: any;
     brandmark?: Brandmark;
     readonly?: boolean;
+    history?: boolean;
+    eventProjection?: any;
 };
 declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
 type Layout = ReturnType<typeof Layout>;

package/dist/components/Navigation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { getContext } from "svelte";
-import { Toolbar, registerToolbarItem } from "@svar-ui/svelte-toolbar";
+import { Toolbar, registerToolbarItem, ButtonList } from "@svar-ui/svelte-toolbar";
 import { RichSelect, Segmented } from "@svar-ui/svelte-core";
 import { getToolbarItems } from "@svar-ui/calendar-store";
 import DateNav from "./DateNav.svelte";
@@ -8,36 +8,42 @@ import DateLabel from "./DateLabel.svelte";
 import MenuButton from "./MenuButton.svelte";
 import AddEventButton from "./AddEventButton.svelte";
 registerToolbarItem("richselect", RichSelect);
+registerToolbarItem("richselect-navigation", RichSelect);
+registerToolbarItem("richselect-navigation", ButtonList, { menu: true });
 registerToolbarItem("segmented", Segmented);
+registerToolbarItem("segmented-navigation", Segmented);
+registerToolbarItem("segmented-navigation", ButtonList, { menu: true });
+registerToolbarItem("segmented", ButtonList, { menu: true });
 registerToolbarItem("dateNav", DateNav);
 registerToolbarItem("todayButton", TodayButton);
 registerToolbarItem("dateLabel", DateLabel);
 registerToolbarItem("menuButton", MenuButton);
 registerToolbarItem("addEventButton", AddEventButton);
 const store = getContext("calendar-api");
-const { views, toolbar = { items: getToolbarItems() }, readonly = false } = $props();
-const { currentView } = store.getReactiveState();
+const { views, toolbar, readonly = false, history = false } = $props();
+const reactiveState = store.getReactiveState();
+const { currentView } = reactiveState;
 const _ = getContext("wx-i18n").getGroup("eventCalendar");
 const items = $derived.by(() => {
-	const base = toolbar?.items;
+	const base = toolbar ? toolbar.items : getToolbarItems({ history });
 	const viewOptions = views.map((v) => ({
 		id: v.id,
 		label: _(v.label || v.id.charAt(0).toUpperCase() + v.id.slice(1))
 	}));
 	const res = [...base ?? []].map((item) => {
-		if (item.id === "modes") {
+		let next = item;
+		if (next.id === "modes") {
 			if (viewOptions.length > 1) {
 				return {
-					...item,
+					...next,
 					value: $currentView,
 					options: viewOptions
 				};
 			} else {
 				return null;
 			}
-		}
-		if (readonly && item.comp === "addEventButton") return null;
-		return item;
+		} else if (!readonly) {} else if (next.comp === "addEventButton" || next.id === "undo" || next.id === "redo") return null;
+		return next;
 	}).filter(Boolean);
 	return res;
 });
@@ -48,9 +54,11 @@ const onchange = ({ item, value }) => {
 };
 </script>
 
-<div class="wx-navigation" role="navigation" aria-label={_("Calendar controls")}>
-	<Toolbar {items} {onchange} css={toolbar?.css}></Toolbar>
-</div>
+{#if items.length}
+	<div class="wx-navigation" role="navigation" aria-label={_("Calendar controls")}>
+		<Toolbar {items} {onchange} css={toolbar?.css}></Toolbar>
+	</div>
+{/if}
 
 <style>
 	.wx-navigation {

package/dist/components/Navigation.svelte.d.ts

@@ -6,6 +6,7 @@ type $$ComponentProps = {
         css?: string;
     };
     readonly?: boolean;
+    history?: boolean;
 };
 declare const Navigation: import("svelte").Component<$$ComponentProps, {}, "">;
 type Navigation = ReturnType<typeof Navigation>;

package/dist/components/Render/BarSection.svelte

@@ -73,6 +73,9 @@ function css(p) {
 		box-shadow: none;
 		border-radius: 0;
 	}
+	.wx-bar-single-day:global(.wx-dragging) {
+		background-color: var(--wx-background);
+	}
 	.wx-bar-single-day:hover {
 		background-color: var(--wx-color-secondary-hover);
 		box-shadow: none;