npm - @lemonadejs/calendar - Versions diffs - 1.1.4 → 3.0.1 - Mend

@lemonadejs/calendar 1.1.4 → 3.0.1

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 (5) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,80 @@
+# LemonadeJS Calendar
+[Official website and documentation is here](https://lemonadejs.net/components/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.
+## Features
+-   Lightweight: The JavaScript Calendar is only about 2 KBytes;
+-   Integration: It can be used as a standalone library or integrated with any modern framework;
+## Getting Started
+You can install using NPM or using directly from a CDN.
+### npm Installation
+To install it in your project using npm, run the following command:
+```bash
+$ npm install @lemonadejs/calendar
+```
+### CDN
+To use calendar via a CDN, include the following script tags in your HTML file:
+```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/calendar/dist/style.min.css" />
+```
+### Usage
+Quick example with Lemonade
+```javascript
+import Calendar from "@lemonadejs/calendar";
+import "@lemonadejs/calendar/dist/style.css"
+export default function App() {
+    const self = this;
+    return `<Calendar />`;
+}
+```
+### Configuration
+You can configure things such as calendar starting date, calendar events, and customize functions.
+#### Calendar Properties
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| value | date | The value currently attached to the calendar. |
+| range | array | Defines a restricted range of selectable dates within the calendar. Example: ['2023-06-20', '2023-06-25']. |
+| closed | boolean | Control when the calendar modal is open or closed. |
+| time | boolean | Enables time selection into the calendar. |
+### Calendar Events
+| Event | Type | Description |
+| -------- | ---- | ----------- |
+| onopen? | () => void | Called when modal opens. |
+| onclose? | () => void | Called when modal closes. |
+| onupdate? | (instance.value) => void | Called when value updates. |
+| onchange? | (instance.value) => void | Called when some state inside the component changes. |
+## License
+The [LemonadeJS](https://lemonadejs.net) Calendar is released under the MIT.
+## Other Tools
+-   [jSuites](https://jsuites.net/v4/)
+-   [Jspreadsheet](https://jspreadsheet.com)

package/dist/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<html>
+<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script src="./index.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/style.min.css" />
+<div id='root'></div>
+<script>
+console.log(Calendar)
+Calendar(document.getElementById('root'), {});
+</script>
+</html>

package/dist/index.js CHANGED Viewed

@@ -1,50 +1,702 @@
-;(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    global.Calendar = factory();
-}(this, (function () {
-    // Load LemonadeJS
-    if (typeof(lemonade) == 'undefined') {
-        if (typeof(require) === 'function') {
-            var lemonade = require('lemonadejs');
-        } else if (window.lemonade) {
-            var lemonade = window.lemonade;
-        }
-    }
-    // Load LemonadeJS
-    if (typeof(jSuites) == 'undefined') {
-        if (typeof(require) === 'function') {
-            var jSuites = require('jsuites');
-        } else if (window.jSuites) {
-            var jSuites = window.jSuites;
-        }
-    }
-    return function() {
-        var self = this;
-        self.onchange = function(prop) {
-            if (self.instance && prop === 'value') {
-                self.instance.setValue(self.value);
-            }
-        }
-        self.create = function(o) {
-            if (this.time || this.time == 'true') {
-                this.time = true;
-            }
-            self.instance = jSuites.calendar(o, this);
-        }
-        if (self.type == 'input') {
-            var template = `<input type="text" @ready="self.create(this)" name="{{self.name}}" value="{{self.value}}" />`;
-        } else {
-            var template = `<div @ready="self.create(this)" name="{{self.name}}"  value="{{self.value}}"></div>`;
-        }
-        return lemonade.element(template, self);
-    }
+/**
+ * render: ()
+ * valid-ranges: []
+ * disabled
+ * dateToNum UTC
+ * navigation with icons Enter key
+ */
+if (! lemonade && typeof (require) === 'function') {
+    var lemonade = require('lemonadejs');
+}
+if (! Modal && typeof (require) === 'function') {
+    var Modal = require('../../modal/dist/index');
+}
+; (function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    global.Calendar = factory();
+}(this, (function () {
+    // Weekdays
+    const Weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    // Months
+    const Months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    // Excel like dates
+    const excelInitialTime = Date.UTC(1900, 0, 0);
+    const excelLeapYearBug = Date.UTC(1900, 1, 29);
+    const millisecondsPerDay = 86400000;
+    /**
+     * Date to number
+     */
+    const dateToNum = function (jsDate) {
+        if (typeof(jsDate) === 'string') {
+            jsDate = new Date(jsDate + '  GMT+0');
+        }
+        let jsDateInMilliseconds = jsDate.getTime();
+        if (jsDateInMilliseconds >= excelLeapYearBug) {
+            jsDateInMilliseconds += millisecondsPerDay;
+        }
+        jsDateInMilliseconds -= excelInitialTime;
+        return jsDateInMilliseconds / millisecondsPerDay;
+    }
+    const numToDate = function (excelSerialNumber) {
+        let jsDateInMilliseconds = excelInitialTime + excelSerialNumber * millisecondsPerDay;
+        if (jsDateInMilliseconds >= excelLeapYearBug) {
+            jsDateInMilliseconds -= millisecondsPerDay;
+        }
+        const d = new Date(jsDateInMilliseconds);
+        return [
+            d.getUTCFullYear(),
+            Two(d.getUTCMonth() + 1),
+            Two(d.getUTCDate()),
+            Two(d.getUTCHours()),
+            Two(d.getUTCMinutes()),
+            Two(d.getUTCSeconds()),
+        ];
+    }
+    /**
+     * Create a data calendar object based on the view
+     */
+    const views = {
+        years: function(date) {
+            let year = date.getFullYear();
+            let result = [];
+            let start = year % 16;
+            let complement = 16 - start;
+            for (let i = year-start; i < year+complement; i++) {
+                let item = {
+                    title: i,
+                    value: i
+                };
+                result.push(item);
+                // Select cursor
+                if (this.cursor.y === i) {
+                    // Select item
+                    item.selected = true;
+                    // Cursor
+                    this.cursor.index = result.length - 1;
+                }
+            }
+            return result;
+        },
+        months: function(date) {
+            let year = date.getFullYear();
+            let result = [];
+            for (let i = 0; i < 12; i++) {
+                let item = {
+                    title: Months[i].substring(0,3),
+                    value: i
+                }
+                // Add the item to the data
+                result.push(item);
+                // Select cursor
+                if (this.cursor.y === year && this.cursor.m === i) {
+                    // Select item
+                    item.selected = true;
+                    // Cursor
+                    this.cursor.index = result.length - 1;
+                }
+            }
+            return result;
+        },
+        days: function(date) {
+            let year = date.getFullYear();
+            let month = date.getMonth();
+            let data = filterData.call(this, year, month);
+            // First day
+            let tmp = new Date(year, month, 1, 0, 0, 0);
+            let firstDay = tmp.getDay();
+            let result = [];
+            for (let i = 1-firstDay; i <= 42-firstDay; i++) {
+                // Get the day
+                tmp = new Date(year, month, i, 0, 0, 0);
+                // Day
+                let day = tmp.getDate();
+                // Create the item
+                let item = {
+                    title: day,
+                    value: i,
+                    number: dateToNum(tmp.toString())
+                }
+                // Add the item to the date
+                result.push(item);
+                // Check selections
+                if (tmp.getMonth() !== month) {
+                    // Days are not in the current month
+                    item.grey = true;
+                } else {
+                    // Check for data
+                    let d = [ year, Two(month+1), Two(day)].join('-');
+                    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;
+                    }
+                }
+                // Select range
+                if (this.type === 'range' && this.range) {
+                    // Mark the start and end points
+                    if (this.range[0] === item.number) {
+                        item.range = true;
+                        item.start = true;
+                    }
+                    if (this.range[1] === item.number) {
+                        item.range = true;
+                        item.end = true;
+                    }
+                    // Re-recreate teh range
+                    if (this.range[0] && this.range[1]) {
+                        if (this.range[0] <= item.number && this.range[1] >= item.number) {
+                            item.range = true;
+                        }
+                    }
+                }
+            }
+            return result;
+        },
+        hours: function() {
+            let result = [];
+            for (let i = 0; i < 24; i++) {
+                let item = {
+                    title: Two(i),
+                    value: i
+                };
+                result.push(item);
+            }
+            return result;
+        },
+        minutes: function() {
+            let result = [];
+            for (let i = 0; i < 60; i=i+5) {
+                let item = {
+                    title: Two(i),
+                    value: i
+                };
+                result.push(item);
+            }
+            return result;
+        }
+    }
+    const filterData = function(year, month) {
+        // Data for the month
+        let data = {};
+        if (Array.isArray(this.data)) {
+            this.data.map(function (v) {
+                let d = year + '-' + Two(month + 1);
+                if (v.date.substring(0, 7) === d) {
+                    if (!data[v.date]) {
+                        data[v.date] = [];
+                    }
+                    data[v.date].push(v);
+                }
+            });
+        }
+        return data;
+    }
+    // Get the short weekdays name
+    const getWeekdays = function() {
+        return Weekdays.map(w => {
+            return { title: w.substring(0, 1) };
+        })
+    }
+    // Define the hump based on the view
+    const getJump = function(e) {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            return this.view === 'days' ? 7 : 4;
+        }
+        return 1;
+    }
+    // Get the position of the data based on the view
+    const getPosition = function() {
+        let position = 2;
+        if (this.view === 'years') {
+            position = 0;
+        } else if (this.view === 'months') {
+            position = 1;
+        }
+        return position;
+    }
+    // Transform in two digits
+    const Two = function(value) {
+        value = '' + value;
+        if (value.length == 1) {
+            value = '0' + value;
+        }
+        return value;
+    }
+    const Calendar = function() {
+        let self = this;
+        // Weekdays
+        self.weekdays = getWeekdays();
+        // Cursor
+        self.cursor = {};
+        // Calendar date
+        let date = new Date();
+        // Range
+        self.range = null;
+        /**
+         * Update the internal date
+         * @param {Date|string|number[]} d instance of Date
+         *
+         */
+        const setDate = function(d) {
+            if (Array.isArray(d)) {
+                d = new Date(Date.UTC(...d));
+            } else if (typeof(d) === 'string') {
+                d = new Date(d);
+            }
+            // Update internal date
+            date = d;
+            // Update the headers of the calendar
+            let value = d.toISOString().substring(0,10).split('-');
+            // Update the month label
+            self.month = Months[parseInt(value[1])-1];
+            // Update the year label
+            self.year = parseInt(value[0]);
+            // Load data
+            if (! self.view) {
+                // Start on the days view will start the data
+                self.view = 'days';
+            } else {
+                // Reload the data for the same view
+                self.options = views[self.view].call(self, date);
+            }
+        }
+        /**
+         * Set the internal cursor
+         * @param {object} s
+         */
+        const setCursor = function(s) {
+            // Remove selection from the current object
+            let item = self.options[self.cursor.index];
+            if (typeof(item) !== 'undefined') {
+                item.selected = false;
+            }
+            // Update the date based on the click
+            let v = updateDate(s.value, getPosition.call(self));
+            let d = new Date(Date.UTC(...v));
+            // Update cursor controller
+            self.cursor = {
+                y: d.getFullYear(),
+                m: d.getMonth(),
+                d: d.getDate(),
+            };
+            // Update cursor based on the object position
+            if (s) {
+                // Update selected property
+                s.selected = true;
+                // New cursor
+                self.cursor.index = self.options.indexOf(s);
+            }
+            return d;
+        }
+        /**
+         * Update the current date
+         * @param {number} v new value for year, month or day
+         * @param {number} position (0,1,2 - year,month,day)
+         * @returns {number[]}
+         */
+        const updateDate = function(v, position) {
+            // Current internal date
+            let value = [date.getFullYear(), date.getMonth(), date.getDate(),0,0,0];
+            // Update internal date
+            value[position] = v;
+            // Return new value
+            return value;
+        }
+        /**
+         * This method move the data from the view up or down
+         * @param direction
+         */
+        const move = function(direction) {
+            let value;
+            // Update the new internal date
+            if (self.view === 'days') {
+                // Select the new internal date
+                value = updateDate(date.getMonth()+direction, 1);
+            } else if (self.view === 'months') {
+                // Select the new internal date
+                value = updateDate(date.getFullYear()+direction, 0);
+            } else if (self.view === 'years') {
+                // Select the new internal date
+                value = updateDate(date.getFullYear()+(direction*16), 0);
+            }
+            // Update view
+            if (value) {
+                setDate(value);
+            }
+        }
+        /**
+         * Keyboard handler
+         * @param {number} direction of the action
+         * @param {object} e keyboard event
+         */
+        const moveCursor = function(direction, e) {
+            direction = direction * getJump.call(self, e);
+            // Remove the selected from the current selection
+            let s = self.options[self.cursor.index];
+            // If the selection is going outside the viewport
+            if (typeof(s) === 'undefined' || ! s.selected) {
+                // Go back to the view
+                setDate([ self.cursor.y, self.cursor.m, self.cursor.d ]);
+            }
+            // Jump to the index
+            let index = self.cursor.index + direction;
+            // See if the new position is in the viewport
+            if (typeof(self.options[index]) === 'undefined') {
+                // Adjust the index for next collection of data
+                if (self.view === 'days') {
+                    if (index < 0) {
+                        index = 42 + index;
+                    } else {
+                        index = index - 42;
+                    }
+                } else if (self.view === 'years') {
+                    if (index < 0) {
+                        index = 4 + index;
+                    } else {
+                        index = index - 4;
+                    }
+                } else if (self.view === 'months') {
+                    if (index < 0) {
+                        index = 12 + index;
+                    } else {
+                        index = index - 12;
+                    }
+                }
+                // Move the data up or down
+                move(direction > 0 ? 1 : -1);
+            }
+            // Update the date based on the click
+            setCursor(self.options[index]);
+            // Update ranges
+            updateRange(self.options[index])
+        }
+        /**
+         * Handler blur
+         * @param e
+         */
+        const blur = function(e) {
+            if (self.modal) {
+                if (!(e.relatedTarget && self.modal.el.contains(e.relatedTarget))) {
+                    if (self.modal.closed === false) {
+                       // self.modal.closed = true
+                    }
+                }
+            }
+        }
+        /**
+         * Set the limits of a range
+         * @param s
+         */
+        const setRange = function(s) {
+            if (self.view === 'days' && self.type === 'range') {
+                let d = self.getValue();
+                // Date to number
+                let number = dateToNum(d);
+                // Start a new range
+                if (self.range && (self.range[0] > number || self.range[1])) {
+                    destroyRange();
+                }
+                // Range
+                s.range = true;
+                // Update range
+                if (! self.range) {
+                    s.start = true;
+                    self.range = [number, null];
+                } else {
+                    s.end = true;
+                    self.range[1] = number;
+                }
+            }
+        }
+        /**
+         * Update the visible range
+         * @param s
+         */
+        const updateRange = function(s) {
+            if (self.type === 'range' && self.view === 'days' && self.range) {
+                // Creating a range
+                if (self.range[0] && ! self.range[1]) {
+                    let number = s.number;
+                    if (number) {
+                        // Update range properties
+                        for (let i = 0; i < self.options.length; i++) {
+                            // Item number
+                            let v = self.options[i].number;
+                            // Update property condition
+                            self.options[i].range = v >= self.range[0] && v <= number;
+                        }
+                    }
+                }
+            }
+        }
+        /**
+         * Destroy the range
+         */
+        const destroyRange = function() {
+            for (let i = 0; i < self.options.length; i++) {
+                self.options[i].range = false;
+                self.options[i].start = false;
+                self.options[i].end = false;
+            }
+            self.range = null;
+        }
+        /**
+         * Select an item with the enter or mouse
+         * @param {object} item - selected cell
+         */
+        self.select = function(item) {
+            // Update cursor generic
+            let value = setCursor(item);
+            // Update range
+            setRange(item);
+            // Based where was the click
+            if (! (self.view === 'days' && ! item.grey)) {
+                // Update the internal date
+                setDate(value);
+            }
+            // Go back to the view of days
+            if (self.view !== 'days') {
+                self.view = 'days';
+            }
+        }
+        /**
+         * Next handler
+         * @param {object} e mouse event
+         */
+        self.next = function(e) {
+            if (! e) {
+                // Icon click
+                move(1);
+            } else {
+                // Keyboard handler
+                moveCursor(1, e);
+            }
+        }
+        /**
+         * Next handler
+         * @param {object} e mouse event
+         */
+        self.prev = function(e) {
+            if (! e) {
+                // Icon click
+                move(-1);
+            } else {
+                // Keyboard handler
+                moveCursor(-1, e);
+            }
+        }
+        /**
+         * Open the modal
+         */
+        self.open = function() {
+            if (self.modal) {
+                self.modal.closed = false;
+                // Set the focus
+                self.content.focus();
+            }
+        }
+        /**
+         * Close the modal
+         */
+        self.close = function() {
+            if (self.modal && self.modal.closed === false) {
+                self.modal.closed = true;
+            }
+        }
+        /**
+         * Get value from cursor
+         * @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);
+        }
+        self.onchange = function(prop) {
+            if (prop === 'view') {
+                if (typeof(views[self.view]) === 'function') {
+                    // When change the view update the data
+                    self.options = views[self.view].call(self, date);
+                }
+            } else if (prop === 'value') {
+                if (typeof(self.onupdate) === 'function') {
+                    self.onupdate.call(self, self.value);
+                }
+            } else if (prop === 'options') {
+                self.content.focus();
+            }
+        }
+        self.onload = function() {
+            let d;
+            if (self.value) {
+                d = new Date(self.value);
+            } else {
+                d = new Date();
+            }
+            // Update my index
+            self.cursor = {
+                y: d.getFullYear(),
+                m: d.getMonth(),
+                d: d.getDate(),
+            };
+            // 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 = {
+                    width: 300,
+                    closed: true,
+                    'auto-close': true,
+                };
+                // Generate modal
+                Modal(self.el, self.modal);
+            }
+            // Create input controls
+            if (self.input) {
+                self.input.classList.add('lm-calendar-input');
+                self.input.addEventListener('focus', self.open);
+                self.input.addEventListener('click', self.open);
+                self.input.addEventListener('blur', blur);
+            }
+            /**
+             * Handler keyboard
+             * @param e
+             */
+            self.content.addEventListener('keydown', function(e){
+                if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+                    self.prev(e);
+                } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+                    self.next(e);
+                } else if (e.key === 'Enter') {
+                    // Select
+                    self.select(self.options[self.cursor.index]);
+                    // If is range do something different
+                    if (self.type !== 'range') {
+                        self.value = self.getValue();
+                        self.close();
+                    }
+                }
+            });
+            /**
+             * Mouse wheel handler
+             */
+            self.content.addEventListener('wheel', function(e){
+                if (e.deltaY < 0) {
+                    self.prev();
+                } else {
+                    self.next();
+                }
+            });
+            /**
+             * Range handler
+             * @param e
+             */
+            self.content.addEventListener('mouseover', function(e){
+                if (e.target.lemon) {
+                    updateRange(e.target.lemon.self);
+                }
+            });
+        }
+        return `<div class="lm-calendar">
+                <div class="lm-calendar-options">
+                <button onclick="self.value = ''; self.close();">Reset</button>
+                <button onclick="self.value = self.getValue(); self.close();">Done</button>
+            </div>
+            <div class="lm-calendar-container" data-view="{{self.view}}">
+                <div class="lm-calendar-header">
+                    <div>
+                        <div class="lm-calendar-labels"><div onclick="self.view = 'months'">{{self.month}}</div> <div onclick="self.view = 'years'">{{self.year}}</div></div>
+                        <div class="lm-calendar-navigation"><i class="material-icons ripple" onclick="self.prev()" tabindex="0">arrow_drop_up</i> <i class="material-icons ripple" onclick="self.next()" tabindex="0">arrow_drop_down</i></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)">{{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.value = self.getValue(); self.close();" class="ripple"></div>
+                </div>
+            </div>
+        </div>`
+    }
+    lemonade.setComponents({ Calendar: Calendar });
+    return function (root, options) {
+        if (typeof (root) === 'object') {
+            lemonade.render(Calendar, root, options)
+            return options;
+        } else {
+            return Calendar.call(this, root)
+        }
+    }
 })));

package/dist/style.css ADDED Viewed

@@ -0,0 +1,229 @@
+.lm-calendar .lm-modal {
+    min-width: initial;
+    min-height: initial;
+}
+.lm-calendar-options {
+    display: none;
+}
+.lm-modal .lm-calendar-options {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #ddd;
+}
+.lm-modal .lm-calendar-options button {
+    border: 0;
+    background-color: transparent;
+    text-transform: uppercase;
+    cursor: pointer;
+    padding: 15px;
+}
+.lm-calendar-header {
+    display: flex;
+    flex-direction: column;
+}
+.lm-calendar-header > div:first-child {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    flex: 1;
+    user-select: none;
+}
+.lm-calendar-header .lm-calendar-labels {
+    font-size: 1.4em;
+    display: flex;
+    flex: 1;
+    cursor: pointer;
+    padding-left: 5px;
+}
+.lm-calendar-header .lm-calendar-labels > div {
+    margin: 2px;
+}
+.lm-calendar-navigation {
+    cursor: pointer;
+}
+.lm-calendar-navigation i {
+    padding: 5px;
+    border-radius: 24px;
+}
+.lm-calendar-navigation i:hover {
+    background-color: #eee;
+}
+.lm-calendar-weekdays {
+    display: none;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 2px;
+    padding: 0 10px 0 10px;
+    font-size: 0.8em;
+}
+.lm-calendar-container[data-view="days"] .lm-calendar-weekdays {
+    display: grid;
+}
+.lm-calendar-weekdays > div {
+    display: inline-block;
+    padding: 10px;
+    box-sizing: border-box;
+    text-align: center;
+    font-weight: bold;
+}
+.lm-calendar-content {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 0;
+    padding: 8px;
+    font-size: 0.8em;
+    outline: none;
+}
+.lm-calendar-content > div {
+    box-sizing: border-box;
+    text-align: center;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 100px;
+    background-origin: padding-box;
+}
+.lm-calendar-container[data-view="months"] .lm-calendar-content {
+    grid-template-columns: repeat(4, 1fr);
+}
+.lm-calendar-container[data-view="years"] .lm-calendar-content {
+    grid-template-columns: repeat(4, 1fr);
+}
+.lm-calendar-content > div[data-grey="true"] {
+    color: #ccc;
+}
+.lm-calendar-content > div[data-bold="true"] {
+    font-weight: bold;
+}
+.lm-calendar-content > div[data-event="true"]::before {
+    content: '';
+    position: absolute;
+    margin-top: 22px;
+    width: 3px;
+    height: 3px;
+    border-radius: 3px;
+    background-color: red;
+}
+.lm-calendar-content > div[data-selected="true"] {
+    font-weight: bold;
+    background-color: #eee;
+}
+.lm-calendar-content:focus > div[data-selected="true"] {
+    outline: 2px solid black;
+    outline-offset: -2px;
+}
+.lm-calendar-content > div:hover {
+    background-color: #eee;
+}
+.lm-calendar-content > div[data-range="true"] {
+    position: relative;
+}
+.lm-calendar-content > div[data-start="true"],
+.lm-calendar-content > div[data-end="true"] {
+    background-color: #78D350;
+}
+.lm-calendar-content > div[data-range="true"]::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 8px;
+    bottom: 8px;
+    background-color: #78D35050;
+}
+.lm-calendar-content > div[data-start="true"]::before {
+    left: 32px;
+}
+.lm-calendar-content > div[data-end="true"]::before {
+    right: 32px;
+}
+.lm-calendar-footer > div {
+    flex: 1;
+}
+.lm-calendar-footer {
+    display: flex;
+    margin: 0 10px 0 10px;
+    padding: 8px 0 8px 0;
+    line-height: 34px;
+    border-top: 1px solid #eee;
+}
+.lm-calendar-footer select {
+    border: 0;
+    background-color: transparent;
+    padding: 6px;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    margin: 2px;
+    border-radius: 32px;
+    font-size: 1.1em;
+}
+.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;
+}
+.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;
+}
+.ripple {
+    background-position: center;
+    transition: background 0.8s;
+}
+.ripple:hover {
+    background: #E0E0E0 radial-gradient(circle, transparent 1%, #E0E0E0 1%) center/15000%;
+}
+.ripple:active {
+    background-color: #E0E0E0;
+    background-size: 100%;
+    transition: background 0s;
+}

package/package.json CHANGED Viewed

@@ -1,22 +1,24 @@
-{
-    "name": "@lemonadejs/calendar",
-    "title": "LemonadeJS calendar",
-    "description": "LemonadeJS calendar integration.",
-    "author": {
-        "name": "Contact <contact@lemonadejs.net>",
-        "url": "https://lemonadejs.net"
-    },
-    "keywords": [
-        "javascript calendar",
-        "lemonadejs plugins",
-        "js",
-        "library",
-        "javascript plugins"
-    ],
-    "dependencies": {
-        "lemonadejs": "^2.6.3",
-        "jsuites": "^4.15.1"
-    },
-    "main": "dist/index.js",
-    "version": "1.1.4"
-}
+{
+    "name": "@lemonadejs/calendar",
+    "title": "LemonadeJS calendar",
+    "description": "LemonadeJS Calendar Component.",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript calendar",
+        "lemonadejs plugins",
+        "js",
+        "library",
+        "javascript plugins"
+    ],
+    "scripts": {
+        "build": "webpack --config webpack.config.js"
+    },
+    "dependencies": {
+        "lemonadejs": "^3.3.2"
+    },
+    "main": "dist/index.js",
+    "version": "3.0.1"
+}