v2.1.0

Improved CSS class switching on view change
vkurko · Aug 22, 2023 · ae13583 · ae13583
1 parent 8787fa1
commit ae13583
Show file tree

Hide file tree

Showing 37 changed files with 374 additions and 261 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Event Calendar changelog
 
+## 2.1.0
+August 22, 2023
+
+* Improved CSS class switching on view change ([155](https://github.com/vkurko/calendar/pull/155))
+
 ## 2.0.0
 August 17, 2023
 

diff --git a/README.md b/README.md
@@ -195,8 +195,8 @@ import '@event-calendar/core/index.css';
 ### Pre-built browser ready bundle
 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@2.0.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.js"></script>
 ```
 
 <details>
@@ -287,15 +287,15 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
 - Type `object` or `function`
 - Default `{close: 'Close', dayGridMonth: 'month', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
 > Views override the default value as follows:
-> - dayGridMonth `function (text) { return {...text, next: 'Next month', prev: 'Previous month'}; }`
-> - listDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - listMonth `function (text) { return {...text, next: 'Next month', prev: 'Previous month'}; }`
-> - listWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
-> - listYear `function (text) { return {...text, next: 'Next year', prev: 'Previous year'}; }`
-> - resourceTimeGridDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - resourceTimeGridWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
-> - timeGridDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - timeGridWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
+> - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
+> - listDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - listMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
+> - listWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+> - listYear `text => ({...text, next: 'Next year', prev: 'Previous year'})`
+> - resourceTimeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - resourceTimeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+> - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
 
 
 Text that is displayed in buttons of the header toolbar.
@@ -1304,7 +1304,7 @@ Determines whether the events on the calendar can be dragged.
 
 Defines the time-text that is displayed on each event.
 
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
 
 ```js
 function (start, end) {
@@ -1906,7 +1906,17 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
 
 ### theme
 - Type `object` or `function`
-- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', list: 'ec-list', month: 'ec-month', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', week: 'ec-week', withScroll: 'ec-with-scroll'}`
+- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', view: '', withScroll: 'ec-with-scroll'}`
+> Views override the default value as follows:
+> - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
+> - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
+> - listMonth `theme => ({...theme, view: 'ec-list ec-month-view'})`
+> - listWeek `theme => ({...theme, view: 'ec-list ec-week-view'})`
+> - listYear `theme => ({...theme, view: 'ec-list ec-year-view'})`
+> - resourceTimeGridDay `theme => ({...theme, view: 'ec-time-grid ec-resource-day-view'})`
+> - resourceTimeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-resource-week-view'})`
+> - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
+> - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
 
 Defines the CSS classes that the Event Calendar uses to generate HTML markup.
 

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">
 
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.css">
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.js"></script>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.css">
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.js"></script>
  <!-- Yandex.Metrika counter -->
  <script type="text/javascript" >
  (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "event-calendar",
- "version": "2.0.0",
+ "version": "2.1.0",
  "scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w",
@@ -13,13 +13,13 @@
  "@babel/plugin-transform-runtime": "^7.22.9",
  "@babel/preset-env": "^7.22.9",
  "@babel/runtime-corejs3": "^7.22.6",
- "@event-calendar/build": "~2.0.0",
- "@event-calendar/core": "~2.0.0",
- "@event-calendar/day-grid": "~2.0.0",
- "@event-calendar/interaction": "~2.0.0",
- "@event-calendar/list": "~2.0.0",
- "@event-calendar/resource-time-grid": "~2.0.0",
- "@event-calendar/time-grid": "~2.0.0",
+ "@event-calendar/build": "~2.1.0",
+ "@event-calendar/core": "~2.1.0",
+ "@event-calendar/day-grid": "~2.1.0",
+ "@event-calendar/interaction": "~2.1.0",
+ "@event-calendar/list": "~2.1.0",
+ "@event-calendar/resource-time-grid": "~2.1.0",
+ "@event-calendar/time-grid": "~2.1.0",
  "@rollup/plugin-babel": "^6.0.3",
  "@rollup/plugin-commonjs": "^25.0.3",
  "@rollup/plugin-node-resolve": "^15.1.0",

diff --git a/packages/build/README.md b/packages/build/README.md
@@ -195,8 +195,8 @@ import '@event-calendar/core/index.css';
 ### Pre-built browser ready bundle
 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@2.0.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.js"></script>
 ```
 
 <details>
@@ -287,15 +287,15 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
 - Type `object` or `function`
 - Default `{close: 'Close', dayGridMonth: 'month', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
 > Views override the default value as follows:
-> - dayGridMonth `function (text) { return {...text, next: 'Next month', prev: 'Previous month'}; }`
-> - listDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - listMonth `function (text) { return {...text, next: 'Next month', prev: 'Previous month'}; }`
-> - listWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
-> - listYear `function (text) { return {...text, next: 'Next year', prev: 'Previous year'}; }`
-> - resourceTimeGridDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - resourceTimeGridWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
-> - timeGridDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - timeGridWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
+> - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
+> - listDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - listMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
+> - listWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+> - listYear `text => ({...text, next: 'Next year', prev: 'Previous year'})`
+> - resourceTimeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - resourceTimeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+> - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
 
 
 Text that is displayed in buttons of the header toolbar.
@@ -1304,7 +1304,7 @@ Determines whether the events on the calendar can be dragged.
 
 Defines the time-text that is displayed on each event.
 
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
 
 ```js
 function (start, end) {
@@ -1906,7 +1906,17 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
 
 ### theme
 - Type `object` or `function`
-- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', list: 'ec-list', month: 'ec-month', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', week: 'ec-week', withScroll: 'ec-with-scroll'}`
+- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', view: '', withScroll: 'ec-with-scroll'}`
+> Views override the default value as follows:
+> - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
+> - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
+> - listMonth `theme => ({...theme, view: 'ec-list ec-month-view'})`
+> - listWeek `theme => ({...theme, view: 'ec-list ec-week-view'})`
+> - listYear `theme => ({...theme, view: 'ec-list ec-year-view'})`
+> - resourceTimeGridDay `theme => ({...theme, view: 'ec-time-grid ec-resource-day-view'})`
+> - resourceTimeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-resource-week-view'})`
+> - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
+> - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
 
 Defines the CSS classes that the Event Calendar uses to generate HTML markup.