v3.10.0

Added validRange option
vkurko · Feb 4, 2025 · a1d10ba · a1d10ba
1 parent b5de30d
commit a1d10ba
Show file tree

Hide file tree

Showing 43 changed files with 751 additions and 348 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Event Calendar changelog
 
+## 3.10.0
+February 4, 2025
+
+* Added `validRange` option ([141](https://github.com/vkurko/calendar/issues/141))
+
 ## 3.9.0
 January 27, 2025
 

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
 
 Full-sized drag & drop JavaScript event calendar with resource & timeline views:
 
-* Lightweight (37kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (38kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
 * Zero-dependency (pre-built bundle)
 * Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
 
@@ -104,6 +104,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [unselect](#unselect)
   - [unselectAuto](#unselectauto)
   - [unselectCancel](#unselectcancel)
+  - [validRange](#validrange)
   - [view](#view)
   - [viewDidMount](#viewdidmount)
   - [views](#views)
@@ -206,8 +207,8 @@ Or in your Svelte component, use the calendar like this:
 ### 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@3.9.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.9.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.10.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.10.0/event-calendar.min.js"></script>
 ```
 
 <details>
@@ -2230,6 +2231,38 @@ A CSS selector that specifies elements that will ignore the [unselectAuto](#unse
 
 Clicking on elements that match this CSS selector will prevent the current selection from being cleared (because of the [unselectAuto](#unselectauto) option).
 
+### validRange
+- Type `object`
+- Default `undefined`
+
+If set, the calendar will allow navigation only within the specified date range. Navigation buttons will be grayed out to prevent the user from navigating to an invalid range.
+
+The range should be an object with the following properties:
+<table>
+<tr>
+<td>
+
+`start`
+</td>
+<td>
+
+`string` or `Date` This should be either an ISO8601 date string like `'2025-12-31'`, or a JavaScript Date object holding the range start date
+</td>
+</tr>
+<tr>
+<td>
+
+`end`
+</td>
+<td>
+
+`string` or `Date` This should be either an ISO8601 date string like `'2025-12-31'`, or a JavaScript Date object holding the range end date
+</td>
+</tr>
+</table>
+
+It is not necessary to specify both properties. The range may have only `start` and no `end`, or vice versa.
+
 ### view
 - Type `string`
 - Default `'resourceTimeGridWeek'`

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@3.9.0/event-calendar.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.9.0/event-calendar.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.10.0/event-calendar.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.10.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": "3.9.0",
+  "version": "3.10.0",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -13,14 +13,14 @@
     "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
     "@babel/runtime-corejs3": "^7.26.0",
-    "@event-calendar/build": "~3.9.0",
-    "@event-calendar/core": "~3.9.0",
-    "@event-calendar/day-grid": "~3.9.0",
-    "@event-calendar/interaction": "~3.9.0",
-    "@event-calendar/list": "~3.9.0",
-    "@event-calendar/resource-time-grid": "~3.9.0",
-    "@event-calendar/resource-timeline": "~3.9.0",
-    "@event-calendar/time-grid": "~3.9.0",
+    "@event-calendar/build": "~3.10.0",
+    "@event-calendar/core": "~3.10.0",
+    "@event-calendar/day-grid": "~3.10.0",
+    "@event-calendar/interaction": "~3.10.0",
+    "@event-calendar/list": "~3.10.0",
+    "@event-calendar/resource-time-grid": "~3.10.0",
+    "@event-calendar/resource-timeline": "~3.10.0",
+    "@event-calendar/time-grid": "~3.10.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",

diff --git a/packages/build/README.md b/packages/build/README.md
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
 
 Full-sized drag & drop JavaScript event calendar with resource & timeline views:
 
-* Lightweight (37kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (38kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
 * Zero-dependency (pre-built bundle)
 * Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
 
@@ -104,6 +104,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [unselect](#unselect)
   - [unselectAuto](#unselectauto)
   - [unselectCancel](#unselectcancel)
+  - [validRange](#validrange)
   - [view](#view)
   - [viewDidMount](#viewdidmount)
   - [views](#views)
@@ -206,8 +207,8 @@ Or in your Svelte component, use the calendar like this:
 ### 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@3.9.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.9.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.10.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.10.0/event-calendar.min.js"></script>
 ```
 
 <details>
@@ -2230,6 +2231,38 @@ A CSS selector that specifies elements that will ignore the [unselectAuto](#unse
 
 Clicking on elements that match this CSS selector will prevent the current selection from being cleared (because of the [unselectAuto](#unselectauto) option).
 
+### validRange
+- Type `object`
+- Default `undefined`
+
+If set, the calendar will allow navigation only within the specified date range. Navigation buttons will be grayed out to prevent the user from navigating to an invalid range.
+
+The range should be an object with the following properties:
+<table>
+<tr>
+<td>
+
+`start`
+</td>
+<td>
+
+`string` or `Date` This should be either an ISO8601 date string like `'2025-12-31'`, or a JavaScript Date object holding the range start date
+</td>
+</tr>
+<tr>
+<td>
+
+`end`
+</td>
+<td>
+
+`string` or `Date` This should be either an ISO8601 date string like `'2025-12-31'`, or a JavaScript Date object holding the range end date
+</td>
+</tr>
+</table>
+
+It is not necessary to specify both properties. The range may have only `start` and no `end`, or vice versa.
+
 ### view
 - Type `string`
 - Default `'resourceTimeGridWeek'`

diff --git a/packages/build/package.json b/packages/build/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/build",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "title": "Event Calendar",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -20,11 +20,11 @@
   "jsdelivr": "event-calendar.min.js",
   "style": "event-calendar.min.css",
   "devDependencies": {
-    "@event-calendar/day-grid": "~3.9.0",
-    "@event-calendar/interaction": "~3.9.0",
-    "@event-calendar/list": "~3.9.0",
-    "@event-calendar/time-grid": "~3.9.0",
-    "@event-calendar/resource-time-grid": "~3.9.0",
-    "@event-calendar/resource-timeline": "~3.9.0"
+    "@event-calendar/day-grid": "~3.10.0",
+    "@event-calendar/interaction": "~3.10.0",
+    "@event-calendar/list": "~3.10.0",
+    "@event-calendar/time-grid": "~3.10.0",
+    "@event-calendar/resource-time-grid": "~3.10.0",
+    "@event-calendar/resource-timeline": "~3.10.0"
   }
 }