v4.5.0

francis-j · vkurko · commit bb60983f3d7f · 2025-06-27T16:18:11.000+03:00
viewDidMount input parameter has been adjusted to match documentation
Fixed event styles not being applied
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # EventCalendar changelog
 
+## 4.5.0
+June 27, 2025
+* `viewDidMount` input parameter has been adjusted to match documentation ([522](https://github.com/vkurko/calendar/issues/522))
+* Fixed event styles not being applied ([520](https://github.com/vkurko/calendar/issues/520), [521](https://github.com/vkurko/calendar/pull/521))
+
 ## 4.4.2
 June 26, 2025
 * Fixed an issue with `updateEvent()` producing an error ([516](https://github.com/vkurko/calendar/issues/516))
diff --git a/README.md b/README.md
@@ -11,6 +11,21 @@ Full-sized drag & drop JavaScript event calendar with resource & timeline views:
 
 Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar options.
 
+### Featured sponsors
+
+<table>
+<tr>
+<td>
+
+[![@steveb85](https://avatars.githubusercontent.com/u/50031994?s=52&v=4)](https://github.com/steveb85)
+</td>
+<td>
+
+:heavy_plus_sign: [Get on the list](https://github.com/sponsors/vkurko)
+</td>
+</tr>
+</table>
+
 ## Table of contents
 - [Usage](#usage)
   - [JavaScript module](#javascript-module)
@@ -228,8 +243,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@4.4.2/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.4.2/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.js"></script>
 ```
 
 <details>
diff --git a/docs/index.html b/docs/index.html
@@ -12,8 +12,8 @@
     <link rel="manifest" href="site.webmanifest">
     <link rel="stylesheet" href="global.css?20231021">
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.4.2/dist/event-calendar.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.4.2/dist/event-calendar.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.js"></script>
 
     <style>
         .ec-timeline .ec-time, .ec-timeline .ec-line {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "event-calendar",
   "private": true,
-  "version": "4.4.2",
+  "version": "4.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/packages/build/README.md b/packages/build/README.md
@@ -228,8 +228,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@4.4.2/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.4.2/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.js"></script>
 ```
 
 <details>
diff --git a/packages/build/package.json b/packages/build/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/build",
-  "version": "4.4.2",
+  "version": "4.5.0",
   "title": "Event Calendar",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -228,8 +228,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@4.4.2/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.4.2/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.js"></script>
 ```
 
 <details>
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "4.4.2",
+  "version": "4.5.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
diff --git a/packages/core/src/lib/components/BaseEvent.svelte b/packages/core/src/lib/components/BaseEvent.svelte
@@ -27,7 +27,7 @@
     let txtColor = $derived(event.textColor ?? resourceTextColor(event, $resources) ?? $eventTextColor);
     let style = $derived(entries(styles(
         {'background-color': bgColor, 'color': txtColor}
-    )).map(entry => `${entry[0]}:${entry[1]}`).join(';'));
+    )).map(entry => `${entry[0]}:${entry[1]}`).concat(event.styles).join(';'));
 
     // Class
     let classNames = $derived(classes([
diff --git a/packages/core/src/storage/state.js b/packages/core/src/storage/state.js
@@ -2,7 +2,7 @@ import {get, writable} from 'svelte/store';
 import {tick} from 'svelte';
 import {createOptions, createParsers} from './options.js';
 import {activeRange, currentRange, dayGrid, events, now, today, view as view2, viewDates, viewTitle, filteredEvents} from './stores.js';
-import {identity, intl, intlRange, isFunction, keys} from '#lib';
+import {identity, intl, intlRange, isFunction, keys, toViewWithLocalDates} from '#lib';
 
 export default class {
     constructor(plugins, input) {
@@ -111,7 +111,9 @@ export default class {
                     // switch view component
                     this._viewComponent.set(component);
                     if (isFunction(opts.viewDidMount)) {
-                        tick().then(() => opts.viewDidMount(get(this._view)));
+                        tick().then(() => opts.viewDidMount({
+                            view: toViewWithLocalDates(get(this._view))
+                        }));
                     }
                     // update store values
                     for (let key of keys(opts)) {

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "event-calendar",`
`3`	`3`	`"private": true,`
`4`		`- "version": "4.4.2",`
	`4`	`+ "version": "4.5.0",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@event-calendar/build",`
`3`		`- "version": "4.4.2",`
	`3`	`+ "version": "4.5.0",`
`4`	`4`	`"title": "Event Calendar",`
`5`	`5`	`"description": "Full-sized drag & drop event calendar with resource & timeline views",`
`6`	`6`	`"keywords": [`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@event-calendar/core",`
`3`		`- "version": "4.4.2",`
	`3`	`+ "version": "4.5.0",`
`4`	`4`	`"title": "Event Calendar Core package",`
`5`	`5`	`"description": "Full-sized drag & drop event calendar with resource & timeline views",`
`6`	`6`	`"keywords": [`