@lemonadejs/calendar 3.2.0 → 3.3.0

package/README.md

@@ -1,15 +1,17 @@
-# LemonadeJS Calendar
+# JavaScript Calendar
 
-[Official website and documentation is here](https://lemonadejs.net/components/calendar)
+[Official website and documentation is here](https://lemonadejs.net/docs/plugins/calendar)
 
 Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
 
-The LemonadeJS Calendar Component is a lightweight and agile calendar solution that empowers developers with efficient date management capabilities. With seamless navigation between months and years, intuitive day selection, and the ability to attach values and events, this highly customizable component provides a versatile foundation for scheduling applications, booking systems, and more. Its optimized codebase ensures fast performance, while its responsive design guarantees a consistent user experience across devices. Streamline your date management with the LemonadeJS Calendar Component and unlock enhanced productivity for your users.
+# JavaScript Calendar
 
-## Features
+Leverage the power of the LemonadeJS Calendar, a lightweight and versatile JavaScript component compatible with React, VueJS, and Angular. Designed to enhance web applications, it offers an embeddable calendar for easy date, time, and range selections. Key features include:
 
--   Lightweight: The JavaScript Calendar is only about 2 KBytes;
--   Integration: It can be used as a standalone library or integrated with any modern framework;
+- Intuitive keyboard navigation.
+- A reactive and responsive design for seamless device adaptation.
+- Flexible range selection for various applications.
+- Customizable options to match your project needs.
 
 ## Getting Started
 
@@ -25,26 +27,34 @@ $ npm install @lemonadejs/calendar
 
 ### CDN
 
-To use calendar via a CDN, include the following script tags in your HTML file:
+For immediate use without NPM, include these script tags in your HTML for access to the calendar and its dependencies:
 
 ```html
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/style.min.css" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
+<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/index.min.js"></script>
 ```
 
 ### Usage
 
-Quick example with Lemonade
+Quick example with ReactJS.
 
 ```javascript
-import Calendar from "@lemonadejs/calendar";
-import "@lemonadejs/calendar/dist/style.css"
+import React, { useRef } from 'react';
+import Calendar from '@lemonadejs/calendar/dist/react';
+
+import "@lemonadejs/calendar/dist/style.css";
+import "@lemonadejs/modal/dist/style.css";
 
 export default function App() {
-    const self = this;
+    const calendarRef = useRef();
 
-    return `<Calendar type="inline" />`;
+    return (<>
+        <Calendar type={'inline'} ref={calendarRef} value={new Date()} />
+    </>);
 }
 ```
 
@@ -54,25 +64,25 @@ You can configure things such as calendar starting date, calendar events, and cu
 
 #### Calendar Properties
 
-| Property | Type | Description |
-| -------- | ---- | ----------- |
-| value | date | The value currently attached to the calendar. |
-| range | Boolean | Activates the range mode in the calendar, enabling users to select two dates and represent the range between them as a value. |
-| type | string | Specifies the parameters for controlling the rendering behavior of the calendar. |
-| numeric | boolean | Enables the use of numeric dates, treating them as serial numbers. |
-| input? | HTML element | An optional reference to control the calendar opening. The value is automatically bound when using this property. |
+| Attribute | Type             | Description                                                                                                       |
+| --------- |------------------|-------------------------------------------------------------------------------------------------------------------|
+| type?     | string           | Determines the rendering type for the calendar. Options: 'inline', 'default'.                                     |
+| range?    | boolean          | Enables the range mode for date selection.                                                                        |
+| value?    | number or string | Represents the currently selected date.                                                                           |
+| numeric?  | boolean          | Enables the use of numeric dates, treating them as serial numbers.                                                |
+| input?    | HTML element     | An optional reference to control the calendar opening. The value is automatically bound when using this property. |
 
 ### Calendar Events
 
-| Event | Type | Description |
-| -------- | ---- | ----------- |
-| onupdate?: (self, value) => void | Called when a new date is selected. |
+| Event                            | Description                         |
+|----------------------------------|-------------------------------------|
+| onchange?: (self, value) => void | Called when a new date is selected. |
 
 ## License
 
-The [LemonadeJS](https://lemonadejs.net) Calendar is released under the MIT.
+The LemonadeJS [Reactive JavaScript Calendar](https://lemonadejs.net) is released under the MIT.
 
 ## Other Tools
 
--   [jSuites](https://jsuites.net/v4/)
--   [Jspreadsheet](https://jspreadsheet.com)
+-   [jSuites Plugins - JavaScript Calendar](https://jsuites.net/docs/javascript-calendar)
+-   [Jspreadsheet - JavaScript Spreadsheet](https://jspreadsheet.com/)

package/dist/index.d.ts

@@ -8,14 +8,14 @@ declare function Calendar(el: HTMLElement, options?: Calendar.Options): Calendar
 
 declare namespace Calendar {
     interface Options {
-        /** Range picker */
-        range?: boolean;
         /** Calendar type */
         type?: 'default' | 'inline';
-        /** Calendar value will be a excel-like number or a ISO string. Default false */
-        numeric?: boolean;
+        /** Range picker */
+        range?: boolean;
         /** Value */
         value?: number | string;
+        /** Calendar value will be a excel-like number or a ISO string. Default false */
+        numeric?: boolean;
         /** Bind the calendar to na HTML input element */
         input?: HTMLElement;
         /** Onchange event */
@@ -25,14 +25,16 @@ declare namespace Calendar {
     }
 
     interface Instance {
-        /** Range picker */
-        range?: boolean;
         /** Calendar type */
         type?: 'default' | 'inline';
-        /** Calendar value will be a excel-like number or a ISO string. Default false */
-        numeric?: boolean;
+        /** Range picker */
+        range?: boolean;
         /** Value */
         value?: number | string;
+        /** Calendar value will be a excel-like number or a ISO string. Default false */
+        numeric?: boolean;
+        /** Bind the calendar to na HTML input element */
+        input?: HTMLElement;
     }
 }
 

package/dist/index.js

@@ -78,6 +78,13 @@ if (! Modal && typeof (require) === 'function') {
         }
     }
 
+    const isNumber = function (num) {
+        if (typeof(num) === 'string') {
+            num = num.trim();
+        }
+        return !isNaN(num) && num !== null && num !== '';
+    }
+
     const arrayToStringDate = function(arr) {
         return [arr[0],Two(arr[1]),Two(arr[2])].join('-');
     }
@@ -162,15 +169,16 @@ if (! Modal && typeof (require) === 'function') {
                     if (data && data[d]) {
                         item.data = data[d];
                     }
-                    // Select cursor
-                    if (this.cursor.y === year && this.cursor.m === month && this.cursor.d === day) {
-                        // Select item
-                        item.selected = true;
-                        // Cursor
-                        this.cursor.index = result.length - 1;
-                    }
                 }
-
+                // Month
+                let m = tmp.getMonth();
+                // Select cursor
+                if (this.cursor.y === year && this.cursor.m === m && this.cursor.d === day) {
+                    // Select item
+                    item.selected = true;
+                    // Cursor
+                    this.cursor.index = result.length - 1;
+                }
                 // Select range
                 if (this.range && this.rangeValues) {
                     // Mark the start and end points
@@ -315,6 +323,13 @@ if (! Modal && typeof (require) === 'function') {
             }
         }
 
+        const getDate = function() {
+            let v = [ self.cursor.y, self.cursor.m, self.cursor.d ];
+            let d = new Date(Date.UTC(...v));
+            // Update the headers of the calendar
+            return d.toISOString().substring(0, 10);
+        }
+
         /**
          * Set the internal cursor
          * @param {object} s
@@ -341,6 +356,11 @@ if (! Modal && typeof (require) === 'function') {
                 // New cursor
                 self.cursor.index = self.options.indexOf(s);
             }
+
+            if (typeof (self.onupdate) === 'function') {
+                self.onupdate(self, renderValue());
+            }
+
             return d;
         }
 
@@ -456,11 +476,11 @@ if (! Modal && typeof (require) === 'function') {
          */
         const setRange = function(s) {
             if (self.view === 'days' && self.range) {
-                let d = self.getValue();
+                let d = getDate();
                 // Date to number
                 let number = dateToNum(d);
                 // Start a new range
-                if (self.rangeValues && (self.rangeValues[0] > number || self.rangeValues[1])) {
+                if (self.rangeValues && (self.rangeValues[0] >= number || self.rangeValues[1])) {
                     destroyRange();
                 }
                 // Range
@@ -491,7 +511,7 @@ if (! Modal && typeof (require) === 'function') {
                             // Item number
                             let v = self.options[i].number;
                             // Update property condition
-                            self.options[i].range = v > self.rangeValues[0] && v <= number;
+                            self.options[i].range = v >= self.rangeValues[0] && v <= number;
                         }
                     }
                 }
@@ -510,31 +530,58 @@ if (! Modal && typeof (require) === 'function') {
             self.rangeValues = null;
         }
 
-        const setValue = function(reset) {
+        const renderValue = function() {
+            let value = null;
+            if (self.range) {
+                if (self.rangeValues) {
+                    if (self.numeric) {
+                        value = self.rangeValues;
+                    } else {
+                        value = [
+                            numToDate(self.rangeValues[0], true),
+                            numToDate(self.rangeValues[1], true)
+                        ];
+                    }
+                }
+            } else {
+                value = getDate();
+                if (self.numeric) {
+                    value = dateToNum(value);
+                }
+            }
+            return value;
+        }
+
+        const updateValue = function(v) {
+            let d;
+            if (v) {
+                v = isNumber(v) ? numToDate(v, true) : v;
+                d = new Date(v);
+            }
+            // if no date is defined
+            if (! isValidDate(d)) {
+                d = new Date();
+            }
+            // Update my index
+            self.cursor = {
+                y: d.getFullYear(),
+                m: d.getMonth(),
+                d: d.getDate(),
+            };
+            // Update the internal calendar date
+            setDate(d);
+        }
+
+        const applyValue = function(reset) {
             if (reset) {
                 self.value = '';
-                self.input.value = '';
                 destroyRange();
             } else {
-                if (self.range) {
-                    self.value = self.rangeValues[0];
-                    if (self.input) {
-                        if (self.numeric) {
-                            self.input.value = self.rangeValues;
-                        } else {
-                            self.input.value = [numToDate(self.rangeValues[0], true), numToDate(self.rangeValues[1], true)];
-                        }
-                    }
-                } else {
-                    self.value = self.getValue();
-                    if (self.input) {
-                        if (self.numeric) {
-                            self.input.value = dateToNum(self.value);
-                        } else {
-                            self.input.value = self.value;
-                        }
-                    }
-                }
+                // Set the internal value
+                self.value = renderValue();
+            }
+            if (self.input) {
+                self.input.value = self.value;
             }
         }
 
@@ -549,12 +596,10 @@ if (! Modal && typeof (require) === 'function') {
             // Update range
             setRange(item);
             // Based where was the click
-            if (! (self.view === 'days' && ! item.grey)) {
+            if (self.view !== 'days') {
                 // Update the internal date
                 setDate(value);
-            }
-            // Go back to the view of days
-            if (self.view !== 'days') {
+                // Change back to right view
                 self.view = 'days';
             }
         }
@@ -564,7 +609,7 @@ if (! Modal && typeof (require) === 'function') {
          * @param {object?} e mouse event
          */
         self.next = function(e) {
-            if (! e || e.type === 'click') {
+            if (! e || e.type === 'mousedown') {
                 // Icon click
                 move(1);
             } else {
@@ -578,7 +623,7 @@ if (! Modal && typeof (require) === 'function') {
          * @param {object?} e mouse event
          */
         self.prev = function(e) {
-            if (! e || e.type === 'click') {
+            if (! e || e.type === 'mousedown') {
                 // Icon click
                 move(-1);
             } else {
@@ -612,12 +657,12 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         self.reset = function() {
-            setValue(true);
+            applyValue(true);
             self.close();
         }
 
         self.update = function() {
-            setValue();
+            applyValue();
             self.close();
         }
 
@@ -636,10 +681,20 @@ if (! Modal && typeof (require) === 'function') {
          * @returns {string}
          */
         self.getValue = function() {
-            let v = [ self.cursor.y, self.cursor.m, self.cursor.d ];
-            let d = new Date(Date.UTC(...v));
-            // Update the headers of the calendar
-            return d.toISOString().substring(0,10);
+            return self.value;
+        }
+
+        self.setValue = function(v) {
+            // Destroy range
+            destroyRange();
+            // Update the internal controllers
+            updateValue(v);
+            // Update value
+            self.value = v;
+            // Update input
+            if (self.input) {
+                self.input.value = self.value;
+            }
         }
 
         self.onchange = function(prop) {
@@ -649,11 +704,10 @@ if (! Modal && typeof (require) === 'function') {
                     self.options = views[self.view].call(self, date);
                 }
             } else if (prop === 'value') {
-                // TODO: onchange only when the component value really changes
-                if (typeof(onchange) === 'function') {
+                if (typeof (onchange) === 'function') {
                     onchange(self, self.value);
                 }
-                if (typeof(self.onupdate) === 'function') {
+                if (typeof (self.onupdate) === 'function') {
                     self.onupdate(self, self.value);
                 }
             } else if (prop === 'options') {
@@ -662,27 +716,12 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         self.onload = function() {
-            let d;
-            if (self.value) {
-                d = new Date(self.value);
-            }
-            // if no date is defined
-            if (! isValidDate(d)) {
-                d = new Date();
-            }
-            // Update my index
-            self.cursor = {
-                y: d.getFullYear(),
-                m: d.getMonth(),
-                d: d.getDate(),
-            };
+            // Update the internal date values
+            updateValue(self.value);
             // Populate components
             self.hours = views.hours();
             self.minutes = views.minutes();
 
-            // Update the internal calendar date
-            setDate(d);
-
             if (self.type !== "inline") {
                 // Create modal instance
                 self.modal = {
@@ -690,8 +729,8 @@ if (! Modal && typeof (require) === 'function') {
                     closed: true,
                     focus: false,
                     position: 'absolute',
-                    'auto-adjust': true,
                     'auto-close': false,
+                    'auto-adjust': true,
                 };
                 // Generate modal
                 Modal(self.el, self.modal);
@@ -717,19 +756,28 @@ if (! Modal && typeof (require) === 'function') {
              * @param {object} e - event
              */
             self.content.addEventListener('keydown', function(e){
+                let prevent = false;
                 if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
                     self.prev(e);
+                    prevent = true;
                 } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
                     self.next(e);
+                    prevent = true;
                 } else if (e.key === 'Enter') {
                     // Current view
                     let view = self.view;
                     // Select
                     self.select(e, self.options[self.cursor.index]);
-                    // If is range do something diferent
+                    // If is range do something different
                     if (view === 'days' && ! self.range) {
                         self.update();
                     }
+                    prevent = true;
+                }
+
+                if (prevent) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
                 }
             });
 
@@ -763,7 +811,7 @@ if (! Modal && typeof (require) === 'function') {
             });
         }
 
-        return `<div class="lm-calendar">
+        return `<div class="lm-calendar" :value="self.value">
                 <div class="lm-calendar-options">
                 <button onclick="self.reset">Reset</button>
                 <button onclick="self.update">Done</button>
@@ -771,17 +819,17 @@ if (! Modal && typeof (require) === 'function') {
             <div class="lm-calendar-container" data-view="{{self.view}}">
                 <div class="lm-calendar-header">
                     <div>
-                        <div class="lm-calendar-labels"><button onclick="self.setView" data-view="months">{{self.month}}</button> <button onclick="self.setView" data-view="years">{{self.year}}</button></div> 
-                        <div class="lm-calendar-navigation"><button type="button" class="material-icons ripple" onclick="self.prev" tabindex="0">arrow_drop_up</button> <button type="button" class="material-icons ripple" onclick="self.next" tabindex="0">arrow_drop_down</button></div>
+                        <div class="lm-calendar-labels"><button onmousedown="self.setView" data-view="months">{{self.month}}</button> <button onmousedown="self.setView" data-view="years">{{self.year}}</button></div> 
+                        <div class="lm-calendar-navigation"><button type="button" class="material-icons lm-ripple" onmousedown="self.prev" tabindex="0">arrow_drop_up</button> <button type="button" class="material-icons lm-ripple" onmousedown="self.next" tabindex="0">arrow_drop_down</button></div>
                     </div>
                     <div class="lm-calendar-weekdays" :loop="self.weekdays"><div>{{self.title}}</div></div>
                 </div>
                 <div class="lm-calendar-content" :loop="self.options" tabindex="0" :ref="self.content">
-                    <div data-start="{{self.start}}" data-end="{{self.end}}" data-range="{{self.range}}" data-event="{{self.data}}" data-grey="{{self.grey}}" data-bold="{{self.bold}}" data-selected="{{self.selected}}" onclick="self.parent.select">{{self.title}}</div>
+                    <div data-start="{{self.start}}" data-end="{{self.end}}" data-range="{{self.range}}" data-event="{{self.data}}" data-grey="{{self.grey}}" data-bold="{{self.bold}}" data-selected="{{self.selected}}" onmousedown="self.parent.select">{{self.title}}</div>
                 </div>
                 <div class="lm-calendar-footer">
                     <div><select :loop="self.hours"><option value="{{self.value}}">{{self.title}}</option></select>:<select :loop="self.minutes"><option value="{{self.value}}">{{self.title}}</option></select></div>
-                    <div><input type="button" value="Update" onclick="self.update" class="ripple"></div>
+                    <div><input type="button" value="Update" onclick="self.update" class="lm-ripple"></div>
                 </div>
             </div>
         </div>`

package/dist/style.css

@@ -1,3 +1,12 @@
+.lm-calendar {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+
 .lm-calendar .lm-modal {
     min-width: initial;
     min-height: initial;
@@ -43,16 +52,15 @@
 }
 
 .lm-calendar-header .lm-calendar-labels > button {
-    font-size: 1.2em;
+    font-size: 1.3em;
     border: 0;
-    padding: 2px;
-    margin: 2px;
+    padding: 4px;
     background-color: #fff;
 }
 
 .lm-calendar-navigation button {
     cursor: pointer;
-    padding: 5px;
+    padding: 8px;
     border: 0;
     border-radius: 24px;
 }
@@ -150,6 +158,7 @@
 .lm-calendar-content > div[data-start="true"],
 .lm-calendar-content > div[data-end="true"] {
     background-color: #78D350;
+    color: initial;
 }
 
 .lm-calendar-content > div[data-range="true"]::before {
@@ -191,20 +200,16 @@
     margin: 2px;
     border-radius: 32px;
     font-size: 1.1em;
+    width: initial;
 }
 
 .lm-calendar-footer select:focus {
     background-color: #eee;
 }
 
-.lm-calendar-footer select:hover {
-    background-color: #eee;
-}
-
 .lm-calendar-footer input {
     border: transparent;
     padding: 8px;
-    background-color: #eee;
     width: 100%;
     cursor: pointer;
 }
@@ -212,20 +217,57 @@
 .lm-calendar-input {
     padding-right: 24px !important;
     box-sizing: border-box;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>') top 50% right 0 no-repeat, content-box;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" fill="gray" /></svg>') top 50% right 1px no-repeat;
 }
 
-.ripple {
+.lm-ripple {
     background-position: center;
     transition: background 0.8s;
 }
 
-.ripple:hover {
+.lm-ripple:hover {
     background: #E0E0E0 radial-gradient(circle, transparent 1%, #E0E0E0 1%) center/15000%;
 }
 
-.ripple:active {
+.lm-ripple:active {
     background-color: #E0E0E0;
     background-size: 100%;
     transition: background 0s;
-}
+}
+
+.lm-dark-mode .lm-ripple:hover {
+    background-color: #888;
+}
+
+.lm-dark-mode .lm-ripple:active {
+    background-color: #888;
+}
+
+.lm-dark-mode .lm-calendar-weekdays {
+    color: #aaa;
+}
+
+.lm-dark-mode .lm-calendar-labels > button {
+    background-color: initial;
+}
+
+.lm-dark-mode .lm-calendar-content > div[data-selected="true"] {
+    background-color: #444;
+}
+
+.lm-dark-mode .lm-calendar-content:focus > div[data-selected="true"] {
+    outline-color: white;
+}
+
+.lm-dark-mode .lm-calendar-content > div[data-grey="true"] {
+    color: #777;
+}
+
+.lm-dark-mode .lm-calendar-content > div:hover {
+    color: white;
+    background-color: #333;
+}
+
+.lm-dark-mode .lm-calendar-footer select:focus {
+    background-color: #3a3a45;
+}

package/package.json

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^4.1.1",
-        "@lemonadejs/modal": "^2.7.1"
+        "lemonadejs": "^4.2.1",
+        "@lemonadejs/modal": "^2.8.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.2.0"
+    "version": "3.3.0"
 }