npm - @event-calendar/core - Versions diffs - 5.6.1 → 5.7.0 - Mend

@event-calendar/core 5.6.1 → 5.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md +52 -2
package/dist/index.css +1 -1
package/dist/index.js +112 -32
package/package.json +2 -2
package/src/Calendar.svelte +3 -3
package/src/lib/date.js +71 -27
package/src/lib/events.js +3 -3
package/src/lib/utils.js +4 -0
package/src/plugins/time-grid/derived.js +8 -2
package/src/storage/derived.js +18 -1
package/src/storage/effects.js +66 -11
package/src/storage/options.js +2 -3
package/src/storage/state.svelte.js +8 -3

package/README.md CHANGED Viewed

@@ -136,6 +136,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
   - [slotWidth](#slotwidth)
   - [snapDuration](#snapduration)
   - [theme](#theme)
+  - [timeZone](#timezone)
   - [titleFormat](#titleformat)
   - [unselect](#unselect)
   - [unselectAuto](#unselectauto)
@@ -260,8 +261,8 @@ This bundle contains a version of the calendar that includes all plugins and is
 The first step is to include the following lines of code in the `<head>` section of your page:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.6.1/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.6.1/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.7.0/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.7.0/dist/event-calendar.min.js"></script>
 ```
 <details>
@@ -1652,6 +1653,15 @@ Start date of the range the calendar needs events for
 End date of the range the calendar needs events for
 </td>
 </tr>
+<tr>
+<td>
+`timeZone`
+</td>
+<td>
+The value of the calendar's [timeZone](#timezone) option. Sent only when `timeZone` is not `'local'`
+</td>
+</tr>
 </table>
 </td>
 </tr>
@@ -1721,6 +1731,13 @@ function(fetchInfo, successCallback, failureCallback) { }
 </td>
 <td>ISO8601 string representation of the end date</td>
 </tr>
+<tr>
+<td>
+`timeZone`
+</td>
+<td>The value of the calendar's [timeZone](#timezone) option</td>
+</tr>
 </table>
 The `successCallback` function must be called by the custom function with an array of [parsable](#parsing-event-from-a-plain-object) [Event](#event-object) objects.
@@ -2640,6 +2657,39 @@ function (theme) {
 </tr>
 </table>
+### timeZone
+- Type `string`
+- Default `'local'`
+The time zone the calendar uses to display dates and times.
+The following values are accepted:
+- `'local'` — uses the browser's local time zone
+- `'UTC'` — uses UTC (zero offset)
+- A UTC offset string in the form `'±HH:MM'`, e.g. `'+05:30'` or `'-06:00'`
+Event dates that contain an explicit timezone offset in their ISO string (e.g. `'2028-06-01T10:00:00+02:00'`) will be shifted to the calendar's timezone. Event dates without timezone info (e.g. `'2028-06-01T10:00:00'`) are treated as floating — they display their wall-clock time as-is and will be interpreted in the calendar's timezone from that point forward.
+When the `timeZone` option changes at runtime, all already-loaded events and the current `date` option are automatically shifted to the new timezone. Events from [eventSources](#eventsources) are re-fetched automatically.
+```js
+let ec = new EventCalendar(document.getElementById('ec'), {
+    timeZone: '+02:00',
+    events: [
+        {
+            start: '2028-06-01T10:00:00',        // floating — displayed as 10:00
+            end:   '2028-06-01T12:00:00',
+            title: 'Meeting'
+        },
+        {
+            start: '2028-06-01T10:00:00+00:00',  // UTC — displayed as 12:00 in +02:00
+            end:   '2028-06-01T12:00:00+00:00',
+            title: 'Call'
+        }
+    ]
+});
+```
 ### titleFormat
 - Type `object` or `function`
 - Default `{year: 'numeric', month: 'short', day: 'numeric'}`

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.6.1
+ * EventCalendar v5.7.0
  * https://github.com/vkurko/calendar
  */
 .ec {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.6.1
+ * EventCalendar v5.7.0
  * https://github.com/vkurko/calendar
  */
 import { getAbortSignal, getContext, mount, onMount, setContext, tick, unmount, untrack } from "svelte";
@@ -90,6 +90,9 @@ function length(array) {
 function empty(array) {
 	return !length(array);
 }
+function tzOffset(date = /* @__PURE__ */ new Date()) {
+	return -date.getTimezoneOffset();
+}
 function isArray(value) {
 	return Array.isArray(value);
 }
@@ -121,9 +124,8 @@ function undefinedOr(fn) {
 //#endregion
 //#region packages/core/src/lib/date.js
 var DAY_IN_SECONDS = 86400;
-function createDate(input = void 0) {
-	if (input !== void 0) return isDate(input) ? _fromLocalDate(input) : _fromISOString(input);
-	return _fromLocalDate(/* @__PURE__ */ new Date());
+function createDate(input = /* @__PURE__ */ new Date(), offset = void 0) {
+	return isDate(input) ? _fromLocalDate(input, offset) : _fromISOString(input, offset);
 }
 function createDuration(input) {
 	if (typeof input === "number") input = { seconds: input };
@@ -146,7 +148,9 @@ function createDuration(input) {
 	};
 }
 function cloneDate(date) {
-	return new Date(date.getTime());
+	let result = new Date(date.getTime());
+	setOffset(result, getOffset(date));
+	return result;
 }
 function addDuration(date, duration, x = 1) {
 	date.setUTCFullYear(date.getUTCFullYear() + x * duration.years);
@@ -227,9 +231,6 @@ function prevDate(date, duration, hiddenDays) {
 	_skipHiddenDays(date, hiddenDays, subtractDay);
 	return date;
 }
-function _skipHiddenDays(date, hiddenDays, dateFn) {
-	if (hiddenDays.length && hiddenDays.length < 7) while (hiddenDays.includes(date.getUTCDay())) dateFn(date);
-}
 /**
 * For a given date, get its week number
 *  - ISO @see https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
@@ -249,15 +250,49 @@ function createWeekNumberContent(week, weekNumberContent, date) {
 	}) : weekNumberContent;
 	return "W" + String(week).padStart(2, "0");
 }
+function parseOffset(str, match = {}) {
+	let parts = str.match(/([+-])(\d{2}):(\d{2})$/);
+	if (parts) {
+		assign(match, parts);
+		return +(parts[1] + "1") * (+parts[2] * 60 + +parts[3]);
+	}
+}
+/**
+* Apply timezone offset difference in minutes to a date
+*/
+function applyOffsetDiff(date, offsetDiff) {
+	if (offsetDiff) date.setUTCMinutes(date.getUTCMinutes() + offsetDiff);
+	return date;
+}
+var offsetSymbol = Symbol("ec");
+function setOffset(date, offset) {
+	date[offsetSymbol] = offset;
+	return date;
+}
+function getOffset(date) {
+	return date[offsetSymbol];
+}
 /**
 * Private functions
 */
-function _fromLocalDate(date) {
-	return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
+function _fromLocalDate(date, offset = void 0) {
+	let result = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
+	applyOffsetDiff(result, offset ? offset - tzOffset(result) : 0);
+	setOffset(result, offset ?? tzOffset(result));
+	return result;
 }
-function _fromISOString(str) {
-	const parts = str.match(/\d+/g);
-	return new Date(Date.UTC(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]), Number(parts[3] || 0), Number(parts[4] || 0), Number(parts[5] || 0)));
+function _fromISOString(str, offset = void 0) {
+	let match = {};
+	let inputOffset = parseOffset(str, match);
+	if (inputOffset !== void 0) str = str.substring(0, match.index);
+	let parts = str.match(/\d+/g);
+	let result = new Date(Date.UTC(+parts[0], +parts[1] - 1, +parts[2], +parts[3] || 0, +parts[4] || 0, +parts[5] || 0));
+	if (offset !== void 0 && inputOffset !== void 0) applyOffsetDiff(result, offset - inputOffset);
+	setOffset(result, offset ?? inputOffset);
+	return result;
+}
+function _skipHiddenDays(date, hiddenDays, dateFn) {
+	if (hiddenDays.length && hiddenDays.length < 7) while (hiddenDays.includes(date.getUTCDay())) dateFn(date);
 }
 //#endregion
 //#region packages/core/src/lib/payload.js
@@ -338,14 +373,14 @@ function toViewWithLocalDates(view) {
 //#endregion
 //#region packages/core/src/lib/events.js
 var eventId = 1;
-function createEvents(input) {
+function createEvents(input, offset = void 0) {
 	return input.map((event) => {
 		let result = {
 			id: "id" in event ? String(event.id) : `{generated-${eventId++}}`,
 			resourceIds: toArrayProp(event, "resourceId").map(String),
 			allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
-			start: createDate(event.start),
-			end: createDate(event.end),
+			start: createDate(event.start, offset),
+			end: createDate(event.end, offset),
 			title: event.title ?? "",
 			editable: event.editable,
 			startEditable: event.startEditable,
@@ -886,6 +921,7 @@ function createOptions(plugins) {
 			],
 			weekNumber: "ec-week-number"
 		},
+		timeZone: "local",
 		titleFormat: {
 			year: "numeric",
 			month: "short",
@@ -941,7 +977,7 @@ function optionsState(plugins, userOptions) {
 		let component = extractOption(opts, "component");
 		delete opts.view;
 		for (let key of keys(opts)) if (hasOwn(options, key)) {
-			if (!setters[key]) setters[key] = [];
+			setters[key] ??= [];
 			setters[key].push(specialOptions.includes(key) ? (value) => opts[key] = isFunction(value) ? value(defOpts[key]) : value : (value) => opts[key] = value);
 		} else delete opts[key];
 		viewOptions[view] = opts;
@@ -1014,27 +1050,27 @@ function switchView(mainState) {
 }
 function loadEvents(mainState, loadingInvoker) {
 	return () => {
-		let { activeRange, fetchedRange: { events: fetchedRange }, viewDates, options: { events, eventSources, lazyFetching } } = mainState;
+		let { activeRange, fetchedRange: { events: fetchedRange }, offset, viewDates, options: { events, eventSources, lazyFetching, timeZone } } = mainState;
 		untrack(() => {
-			load(eventSources.map((source) => isFunction(source.events) ? source.events : source), events, createEvents, (result) => mainState.events = arrayProxy(result), activeRange, fetchedRange, viewDates, true, lazyFetching, loadingInvoker);
+			load(eventSources.map((source) => isFunction(source.events) ? source.events : source), events, (input) => createEvents(input, offset), (result) => mainState.events = arrayProxy(result), timeZone, activeRange, fetchedRange, viewDates, true, lazyFetching, loadingInvoker);
 		});
 	};
 }
 function loadResources(mainState, loadingInvoker) {
 	return () => {
-		let { activeRange, fetchedRange: { resources: fetchedRange }, viewDates, options: { lazyFetching, refetchResourcesOnNavigate, resources } } = mainState;
+		let { activeRange, fetchedRange: { resources: fetchedRange }, viewDates, options: { lazyFetching, refetchResourcesOnNavigate, resources, timeZone } } = mainState;
 		untrack(() => {
-			load(isArray(resources) ? [] : [resources], resources, createResources, (result) => mainState.resources = arrayProxy(result), activeRange, fetchedRange, viewDates, refetchResourcesOnNavigate, lazyFetching, loadingInvoker);
+			load(isArray(resources) ? [] : [resources], resources, createResources, (result) => mainState.resources = arrayProxy(result), timeZone, activeRange, fetchedRange, viewDates, refetchResourcesOnNavigate, lazyFetching, loadingInvoker);
 		});
 	};
 }
-function load(sources, defaultResult, parseResult, applyResult, activeRange, fetchedRange, viewDates, refetchOnNavigate, lazyFetching, loading) {
+function load(sources, defaultResult, parseResult, applyResult, timeZone, activeRange, fetchedRange, viewDates, refetchOnNavigate, lazyFetching, loading) {
 	if (empty(viewDates)) return;
 	if (empty(sources)) {
 		applyResult(defaultResult);
 		return;
 	}
-	if ((refetchOnNavigate || !fetchedRange.start) && (!lazyFetching || !fetchedRange.start || fetchedRange.start > activeRange.start || fetchedRange.end < activeRange.end)) {
+	if ((refetchOnNavigate || !fetchedRange.start) && (!lazyFetching || !fetchedRange.start || fetchedRange.start > activeRange.start || fetchedRange.end < activeRange.end || fetchedRange.timeZone !== timeZone)) {
 		let result = [];
 		let failure = (e) => loading.stop();
 		let success = (data) => {
@@ -1051,7 +1087,8 @@ function load(sources, defaultResult, parseResult, applyResult, activeRange, fet
 					start: toLocalDate(activeRange.start),
 					end: toLocalDate(activeRange.end),
 					startStr,
-					endStr
+					endStr,
+					timeZone
 				} : {}, success, failure);
 				if (result !== void 0) Promise.resolve(result).then(success, failure);
 			} else {
@@ -1059,6 +1096,7 @@ function load(sources, defaultResult, parseResult, applyResult, activeRange, fet
 				if (refetchOnNavigate) {
 					params.start = startStr;
 					params.end = endStr;
+					if (timeZone !== "local") params.timeZone = timeZone;
 				}
 				params = new URLSearchParams(params);
 				let url = source.url, headers = {}, body;
@@ -1076,7 +1114,10 @@ function load(sources, defaultResult, parseResult, applyResult, activeRange, fet
 				}).then((response) => response.json()).then(success).catch(failure);
 			}
 		}
-		assign(fetchedRange, activeRange);
+		assign(fetchedRange, {
+			...activeRange,
+			timeZone
+		});
 	}
 }
 function createLoadingInvoker(mainState) {
@@ -1092,8 +1133,9 @@ function createLoadingInvoker(mainState) {
 }
 function setNowAndToday(mainState) {
 	return () => {
+		let { offset } = mainState;
 		let interval = setInterval(() => {
-			let now = createDate();
+			let now = createDate(void 0, offset);
 			let today = setMidnight(cloneDate(now));
 			mainState.now = now;
 			if (!datesEqual(mainState.today, today)) mainState.today = today;
@@ -1101,6 +1143,25 @@ function setNowAndToday(mainState) {
 		return () => clearInterval(interval);
 	};
 }
+function handleTimeZoneChange(mainState) {
+	return () => {
+		let { offset, options } = mainState;
+		untrack(() => {
+			for (let event of mainState.events) if (!event.allDay) for (let prop of ["start", "end"]) {
+				let dateOffset = getOffset(event[prop]);
+				if (dateOffset !== void 0) applyOffsetDiff(event[prop], offset - dateOffset);
+				setOffset(event[prop], offset);
+			}
+			let dateOffset = getOffset(options.date);
+			if (dateOffset !== void 0) {
+				let diff = createDate(void 0, offset).getUTCDay() - createDate(void 0, dateOffset).getUTCDay();
+				let date = addDay(cloneDate(options.date), diff);
+				mainState.setOption("date", date);
+			}
+			setOffset(options.date, offset);
+		});
+	};
+}
 function runDatesSet(mainState) {
 	return () => {
 		let { activeRange, options: { datesSet } } = mainState;
@@ -1194,6 +1255,16 @@ function filteredEvents(mainState) {
 		return result;
 	};
 }
+function offset(mainState) {
+	return () => {
+		let { options: { timeZone } } = mainState;
+		let offset;
+		untrack(() => {
+			offset = timeZone === "local" ? tzOffset() : timeZone === "UTC" ? 0 : parseOffset(timeZone) ?? tzOffset();
+		});
+		return offset;
+	};
+}
 function viewDates(mainState) {
 	return () => {
 		let { options, activeRange } = mainState;
@@ -1246,6 +1317,13 @@ var State = class {
 	set auxComponents(value) {
 		$.set(this.#auxComponents, value, true);
 	}
+	#offset;
+	get offset() {
+		return $.get(this.#offset);
+	}
+	set offset(value) {
+		$.set(this.#offset, value);
+	}
 	#currentRange;
 	get currentRange() {
 		return $.get(this.#currentRange);
@@ -1406,6 +1484,7 @@ var State = class {
 	constructor(plugins, options) {
 		[this.options, this.setOption, this.setViewOptions] = optionsState(plugins, options);
 		this.#auxComponents = $.state($.proxy([]));
+		this.#offset = $.derived(offset(this));
 		this.#currentRange = $.derived(currentRange(this));
 		this.#activeRange = $.derived(activeRange(this));
 		this.#fetchedRange = $.state($.proxy({
@@ -1415,7 +1494,7 @@ var State = class {
 		this.#events = $.state(arrayProxy(this.options.events));
 		this.#filteredEvents = $.derived(filteredEvents(this));
 		this.#mainEl = $.state();
-		this.#now = $.state($.proxy(createDate()));
+		this.#now = $.state($.proxy(createDate(void 0, this.offset)));
 		this.#resources = $.state(arrayProxy(isArray(this.options.resources) ? this.options.resources : []));
 		this.#today = $.state($.proxy(setMidnight(cloneDate(this.now))));
 		this.#intlEventTime = $.derived(intlRange(this, "eventTimeFormat"));
@@ -1438,6 +1517,7 @@ var State = class {
 	#initEffects() {
 		let loading = createLoadingInvoker(this);
 		$.user_pre_effect(switchView(this));
+		$.user_pre_effect(handleTimeZoneChange(this));
 		$.user_pre_effect(setNowAndToday(this));
 		$.user_effect(loadEvents(this, loading));
 		$.user_effect(loadResources(this, loading));
@@ -1654,7 +1734,7 @@ function Calendar($$anchor, $$props) {
 	let plugins = $.prop($$props, "plugins", 19, () => []), options = $.prop($$props, "options", 19, () => ({}));
 	let mainState = new State(plugins(), options());
 	setContext("state", mainState);
-	let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), view = $.derived(() => mainState.view), View = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), dateIncrement = $.derived(() => mainState.options.dateIncrement), duration = $.derived(() => mainState.options.duration), height = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), customScrollbars = $.derived(() => mainState.options.customScrollbars), theme = $.derived(() => mainState.options.theme);
+	let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), offset = $.derived(() => mainState.offset), view = $.derived(() => mainState.view), View = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), dateIncrement = $.derived(() => mainState.options.dateIncrement), duration = $.derived(() => mainState.options.duration), height = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), customScrollbars = $.derived(() => mainState.options.customScrollbars), theme = $.derived(() => mainState.options.theme);
 	let prevOptions = { ...options() };
 	$.user_pre_effect(() => {
 		for (let [name, value] of diff(options(), prevOptions)) untrack(() => {
@@ -1687,7 +1767,7 @@ function Calendar($$anchor, $$props) {
 		return null;
 	}
 	function addEvent(event) {
-		event = createEvents([event])[0];
+		event = createEvents([event], $.get(offset))[0];
 		$.get(events).push(event);
 		return toEventWithLocalDates(event);
 	}
@@ -1695,7 +1775,7 @@ function Calendar($$anchor, $$props) {
 		let id = String(event.id);
 		let idx = $.get(events).findIndex((event) => event.id === id);
 		if (idx >= 0) {
-			event = createEvents([event])[0];
+			event = createEvents([event], $.get(offset))[0];
 			$.get(events)[idx] = event;
 			return toEventWithLocalDates(event);
 		}
@@ -3877,11 +3957,11 @@ function slotLabelPeriodicity(mainState) {
 }
 function slots(mainState, viewState) {
 	return () => {
-		let { options: { slotDuration } } = mainState;
+		let { offset, options: { slotDuration } } = mainState;
 		let { intlSlotLabel, slotLabelPeriodicity, slotTimeLimits } = viewState;
 		let slots;
 		untrack(() => {
-			slots = createSlots(setMidnight(createDate()), slotDuration, slotLabelPeriodicity, slotTimeLimits, intlSlotLabel);
+			slots = createSlots(setMidnight(createDate(void 0, offset)), slotDuration, slotLabelPeriodicity, slotTimeLimits, intlSlotLabel);
 		});
 		return slots;
 	};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -32,6 +32,6 @@
     "#components": "./src/lib/components/index.js"
   },
   "dependencies": {
-    "svelte": "^5.55.2"
+    "svelte": "^5.55.4"
   }
 }

package/src/Calendar.svelte CHANGED Viewed

@@ -16,7 +16,7 @@
     setContext('state', mainState);
     let {
-        auxComponents, features, events, interaction, iClass, view, viewComponent: View,
+        auxComponents, features, events, interaction, iClass, offset, view, viewComponent: View,
         options: {date, dateIncrement, duration, height, hiddenDays, customScrollbars, theme}
     } = $derived(mainState);
@@ -67,7 +67,7 @@
     }
     export function addEvent(event) {
-        event = createEvents([event])[0];
+        event = createEvents([event], offset)[0];
         events.push(event);
         return toEventWithLocalDates(event);
     }
@@ -76,7 +76,7 @@
         let id = String(event.id);
         let idx = events.findIndex(event => event.id === id);
         if (idx >= 0) {
-            event = createEvents([event])[0];
+            event = createEvents([event], offset)[0];
             events[idx] = event;
             return toEventWithLocalDates(event);
         }

package/src/lib/date.js CHANGED Viewed

@@ -1,13 +1,9 @@
-import {isDate, isFunction} from './utils.js';
+import {assign, isDate, isFunction, tzOffset} from './utils.js';
 export const DAY_IN_SECONDS = 86400;
-export function createDate(input = undefined) {
-    if (input !== undefined) {
-        return isDate(input) ? _fromLocalDate(input) : _fromISOString(input);
-    }
-    return _fromLocalDate(new Date());
+export function createDate(input = new Date(), offset = undefined) {
+    return isDate(input) ? _fromLocalDate(input, offset) : _fromISOString(input, offset);
 }
 export function createDuration(input) {
@@ -38,7 +34,10 @@ export function createDuration(input) {
 }
 export function cloneDate(date) {
-    return new Date(date.getTime());
+    let result = new Date(date.getTime());
+    setOffset(result, getOffset(date));
+    return result;
 }
 export function addDuration(date, duration, x = 1) {
@@ -152,14 +151,6 @@ export function prevDate(date, duration, hiddenDays) {
     return date;
 }
-function _skipHiddenDays(date, hiddenDays, dateFn) {
-    if (hiddenDays.length && hiddenDays.length < 7) {
-        while (hiddenDays.includes(date.getUTCDay())) {
-            dateFn(date);
-        }
-    }
-}
 /**
  * For a given date, get its week number
  *  - ISO @see https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
@@ -192,12 +183,42 @@ export function createWeekNumberContent(week, weekNumberContent, date) {
     return 'W' + String(week).padStart(2, '0');
 }
+export function parseOffset(str, match = {}) {
+    let parts = str.match(/([+-])(\d{2}):(\d{2})$/);
+    if (parts) {
+        assign(match, parts);
+        return +(parts[1] + '1') * (+parts[2] * 60 + +parts[3]);
+    }
+    return undefined;
+}
+/**
+ * Apply timezone offset difference in minutes to a date
+ */
+export function applyOffsetDiff(date, offsetDiff) {
+    if (offsetDiff) {
+        date.setUTCMinutes(date.getUTCMinutes() + offsetDiff);
+    }
+    return date;
+}
+let offsetSymbol = Symbol('ec');
+export function setOffset(date, offset) {
+    date[offsetSymbol] = offset;
+    return date;
+}
+export function getOffset(date) {
+    return date[offsetSymbol];
+}
 /**
  * Private functions
  */
-function _fromLocalDate(date) {
-    return new Date(Date.UTC(
+function _fromLocalDate(date, offset = undefined) {
+    let result = new Date(Date.UTC(
         date.getFullYear(),
         date.getMonth(),
         date.getDate(),
@@ -205,16 +226,39 @@ function _fromLocalDate(date) {
         date.getMinutes(),
         date.getSeconds()
     ));
+    applyOffsetDiff(result, offset ? offset - tzOffset(result) : 0);
+    setOffset(result, offset ?? tzOffset(result));
+    return result;
 }
-function _fromISOString(str) {
-    const parts = str.match(/\d+/g);
-    return new Date(Date.UTC(
-        Number(parts[0]),
-        Number(parts[1]) - 1,
-        Number(parts[2]),
-        Number(parts[3] || 0),
-        Number(parts[4] || 0),
-        Number(parts[5] || 0)
+function _fromISOString(str, offset = undefined) {
+    let match = {};
+    let inputOffset = parseOffset(str, match);
+    if (inputOffset !== undefined) {
+        str = str.substring(0, match.index);
+    }
+    let parts = str.match(/\d+/g);
+    let result = new Date(Date.UTC(
+        +parts[0],
+        +parts[1] - 1,
+        +parts[2],
+        +parts[3] || 0,
+        +parts[4] || 0,
+        +parts[5] || 0
     ));
+    if (offset !== undefined && inputOffset !== undefined) {
+        applyOffsetDiff(result, offset - inputOffset);
+    }
+    setOffset(result, offset ?? inputOffset);
+    return result;
+}
+function _skipHiddenDays(date, hiddenDays, dateFn) {
+    if (hiddenDays.length && hiddenDays.length < 7) {
+        while (hiddenDays.includes(date.getUTCDay())) {
+            dateFn(date);
+        }
+    }
 }

package/src/lib/events.js CHANGED Viewed

@@ -6,14 +6,14 @@ import {assign, isArray, isFunction} from './utils.js';
 import {toViewWithLocalDates} from './view.js';
 let eventId = 1;
-export function createEvents(input) {
+export function createEvents(input, offset = undefined) {
     return input.map(event => {
         let result = {
             id: 'id' in event ? String(event.id) : `{generated-${eventId++}}`,
             resourceIds: toArrayProp(event, 'resourceId').map(String),
             allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
-            start: createDate(event.start),
-            end: createDate(event.end),
+            start: createDate(event.start, offset),
+            end: createDate(event.end, offset),
             title: event.title ?? '',
             editable: event.editable,
             startEditable: event.startEditable,

package/src/lib/utils.js CHANGED Viewed

@@ -42,6 +42,10 @@ export function empty(array) {
     return !length(array);
 }
+export function tzOffset(date = new Date()) {
+    return -date.getTimezoneOffset();
+}
 export function isArray(value) {
     return Array.isArray(value);
 }

package/src/plugins/time-grid/derived.js CHANGED Viewed

@@ -134,13 +134,19 @@ export function slotLabelPeriodicity(mainState) {
 export function slots(mainState, viewState) {
     return () => {
         // Dependencies
-        let {options: {slotDuration}} = mainState;
+        let {offset, options: {slotDuration}} = mainState;
         let {intlSlotLabel, slotLabelPeriodicity, slotTimeLimits} = viewState;
         let slots;
         untrack(() => {
-            slots = createSlots(setMidnight(createDate()), slotDuration, slotLabelPeriodicity, slotTimeLimits, intlSlotLabel);
+            slots = createSlots(
+                setMidnight(createDate(undefined, offset)),
+                slotDuration,
+                slotLabelPeriodicity,
+                slotTimeLimits,
+                intlSlotLabel
+            );
         });
         return slots;

package/src/storage/derived.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import {tick, untrack} from 'svelte';
 import {
     addDay, addDuration, cloneDate, createView, isFunction, prevClosestDay, setMidnight, subtractDay,
-    toEventWithLocalDates, toViewWithLocalDates
+    toEventWithLocalDates, toViewWithLocalDates, parseOffset, tzOffset, applyOffsetDiff
 } from '#lib';
 export function currentRange(mainState) {
@@ -85,6 +85,23 @@ export function filteredEvents(mainState) {
     };
 }
+export function offset(mainState) {
+    return () => {
+        // Dependencies
+        let {options: {timeZone}} = mainState;
+        let offset;
+        untrack(() => {
+            offset = timeZone === 'local' ? tzOffset() : (
+                timeZone === 'UTC' ? 0 : (parseOffset(timeZone) ?? tzOffset())
+            );
+        });
+        return offset;
+    };
+}
 export function viewDates(mainState) {
     return () => {
         // Dependencies

package/src/storage/effects.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import {getAbortSignal, tick, untrack} from 'svelte';
 import {
-    assign, cloneDate, createDate, createEvents, createResources, datesEqual, empty, isArray, isFunction, setMidnight,
-    toISOString, toLocalDate, toViewWithLocalDates
+    addDay,
+    applyOffsetDiff, assign, cloneDate, createDate, createEvents, createResources, datesEqual, empty, getOffset, isArray,
+    isFunction, setMidnight, setOffset, toISOString, toLocalDate, toViewWithLocalDates
 } from '#lib';
 import {arrayProxy} from './proxy.svelte.js';
@@ -22,15 +23,16 @@ export function switchView(mainState) {
 export function loadEvents(mainState, loadingInvoker) {
     return () => {
         // Dependencies
-        let {activeRange, fetchedRange: {events: fetchedRange}, viewDates,
-            options: {events, eventSources, lazyFetching}} = mainState;
+        let {activeRange, fetchedRange: {events: fetchedRange}, offset, viewDates,
+            options: {events, eventSources, lazyFetching, timeZone}} = mainState;
         untrack(() => {
             load(
                 eventSources.map(source => isFunction(source.events) ? source.events : source),
                 events,
-                createEvents,
+                input => createEvents(input, offset),
                 result => mainState.events = arrayProxy(result),
+                timeZone,
                 activeRange,
                 fetchedRange,
                 viewDates,
@@ -46,7 +48,7 @@ export function loadResources(mainState, loadingInvoker) {
     return () => {
         // Dependencies
         let {activeRange, fetchedRange: {resources: fetchedRange}, viewDates,
-            options: {lazyFetching, refetchResourcesOnNavigate, resources}} = mainState;
+            options: {lazyFetching, refetchResourcesOnNavigate, resources, timeZone}} = mainState;
         untrack(() => {
             load(
@@ -54,6 +56,7 @@ export function loadResources(mainState, loadingInvoker) {
                 resources,
                 createResources,
                 result => mainState.resources = arrayProxy(result),
+                timeZone,
                 activeRange,
                 fetchedRange,
                 viewDates,
@@ -65,7 +68,19 @@ export function loadResources(mainState, loadingInvoker) {
     };
 }
-function load(sources, defaultResult, parseResult, applyResult, activeRange, fetchedRange, viewDates, refetchOnNavigate, lazyFetching, loading) {
+function load(
+    sources,
+    defaultResult,
+    parseResult,
+    applyResult,
+    timeZone,
+    activeRange,
+    fetchedRange,
+    viewDates,
+    refetchOnNavigate,
+    lazyFetching,
+    loading
+) {
     if (empty(viewDates)) {
         return;
     }
@@ -80,7 +95,8 @@ function load(sources, defaultResult, parseResult, applyResult, activeRange, fet
             !lazyFetching ||
             !fetchedRange.start ||
             fetchedRange.start > activeRange.start ||
-            fetchedRange.end < activeRange.end
+            fetchedRange.end < activeRange.end ||
+            fetchedRange.timeZone !== timeZone
         )
     ) {
         let result = [];
@@ -103,7 +119,8 @@ function load(sources, defaultResult, parseResult, applyResult, activeRange, fet
                     start: toLocalDate(activeRange.start),
                     end: toLocalDate(activeRange.end),
                     startStr,
-                    endStr
+                    endStr,
+                    timeZone
                 } : {}, success, failure);
                 if (result !== undefined) {
                     Promise.resolve(result).then(success, failure);
@@ -115,6 +132,9 @@ function load(sources, defaultResult, parseResult, applyResult, activeRange, fet
                 if (refetchOnNavigate) {
                     params.start = startStr;
                     params.end = endStr;
+                    if (timeZone !== 'local') {
+                        params.timeZone = timeZone;
+                    }
                 }
                 params = new URLSearchParams(params);
                 // Prepare fetch
@@ -135,7 +155,7 @@ function load(sources, defaultResult, parseResult, applyResult, activeRange, fet
             }
         }
         // Save current range for future requests
-        assign(fetchedRange, activeRange);
+        assign(fetchedRange, {...activeRange, timeZone});
     }
 }
@@ -155,9 +175,12 @@ export function createLoadingInvoker(mainState) {
 export function setNowAndToday(mainState) {
     return () => {
+        // Dependencies
+        let {offset} = mainState;
         // Now and today
         let interval = setInterval(() => {
-            let now = createDate();
+            let now = createDate(undefined, offset);
             let today = setMidnight(cloneDate(now));
             mainState.now = now;
             if (!datesEqual(mainState.today, today)) {
@@ -169,6 +192,38 @@ export function setNowAndToday(mainState) {
     }
 }
+export function handleTimeZoneChange(mainState) {
+    return () => {
+        // Dependencies
+        let {offset, options} = mainState;
+        untrack(() => {
+            // Update events
+            for (let event of mainState.events) {
+                if (!event.allDay) {
+                    for (let prop of ['start', 'end']) {
+                        let dateOffset = getOffset(event[prop]);
+                        // Dates parsed from strings with no timezone info have dateOffset === undefined;
+                        // they are treated as floating and only get branded with the new offset, not shifted
+                        if (dateOffset !== undefined) {
+                            applyOffsetDiff(event[prop], offset - dateOffset);
+                        }
+                        setOffset(event[prop], offset);
+                    }
+                }
+            }
+            // Update date option
+            let dateOffset = getOffset(options.date);
+            if (dateOffset !== undefined) {
+                let diff = createDate(undefined, offset).getUTCDay() - createDate(undefined, dateOffset).getUTCDay();
+                let date = addDay(cloneDate(options.date), diff);
+                mainState.setOption('date', date);
+            }
+            setOffset(options.date, offset);
+        });
+    }
+}
 export function runDatesSet(mainState) {
     return () => {
         // Dependencies

package/src/storage/options.js CHANGED Viewed

@@ -94,6 +94,7 @@ function createOptions(plugins) {
             weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'],
             weekNumber: 'ec-week-number'
         },
+        timeZone: 'local',
         titleFormat: {
             year: 'numeric',
             month: 'short',
@@ -173,9 +174,7 @@ export function optionsState(plugins, userOptions) {
         // Set up option setters and delete unknown options
         for (let key of keys(opts)) {
             if (hasOwn(options, key)) {
-                if (!setters[key]) {
-                    setters[key] = [];
-                }
+                setters[key] ??= [];
                 setters[key].push(
                     specialOptions.includes(key)
                         ? value => opts[key] = isFunction(value) ? value(defOpts[key]) : value

package/src/storage/state.svelte.js CHANGED Viewed

@@ -2,10 +2,13 @@ import {SvelteMap} from 'svelte/reactivity';
 import {cloneDate, createDate, identity, intl, intlRange, isArray, setMidnight} from '#lib';
 import {optionsState} from './options.js';
 import {
-    createLoadingInvoker, loadEvents, loadResources, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday,
+    createLoadingInvoker, handleTimeZoneChange, loadEvents, loadResources, runDatesSet, runEventAllUpdated,
+    runViewDidMount, setNowAndToday,
     switchView
 } from './effects.js';
-import {activeRange, currentRange, filteredEvents, view, viewDates, viewTitle} from './derived.js';
+import {
+    activeRange, currentRange, filteredEvents, offset, view, viewDates, viewTitle
+} from './derived.js';
 import {arrayProxy} from './proxy.svelte.js';
 export default class State {
@@ -20,13 +23,14 @@ export default class State {
         // Create other states
         this.auxComponents = $state([]);
+        this.offset = $derived.by(offset(this));
         this.currentRange = $derived.by(currentRange(this));
         this.activeRange = $derived.by(activeRange(this));
         this.fetchedRange = $state({events: {}, resources: {}});
         this.events = $state.raw(arrayProxy(this.options.events));
         this.filteredEvents = $derived.by(filteredEvents(this));
         this.mainEl = $state();
-        this.now = $state(createDate());
+        this.now = $state(createDate(undefined, this.offset));
         this.resources = $state.raw(arrayProxy(isArray(this.options.resources) ? this.options.resources : []));
         this.today = $state(setMidnight(cloneDate(this.now)));
         this.intlEventTime = $derived.by(intlRange(this, 'eventTimeFormat'));
@@ -56,6 +60,7 @@ export default class State {
     #initEffects() {
         let loading = createLoadingInvoker(this);
         $effect.pre(switchView(this));
+        $effect.pre(handleTimeZoneChange(this));
         $effect.pre(setNowAndToday(this));
         $effect(loadEvents(this, loading));
         $effect(loadResources(this, loading));