@lemonadejs/calendar 2.0.0 → 3.0.3

package/README.md

@@ -0,0 +1,81 @@
+# 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. |
+| type | string | |
+
+### 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.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+interface Calendar {
+    (): any
+    [key: string]: any
+}
+
+interface options {
+    range?: boolean;
+    type?: 'default' | 'inline';
+    value?: number | string;
+    numeric?: boolean;
+    input?: HTMLElement;
+}
+
+interface instance {
+
+}
+
+export declare function Calendar(el: HTMLElement, options?: options): instance;

package/dist/index.js

@@ -1,50 +1,791 @@
-;(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') {
-            const lemonade = require('lemonadejs');
-        } else if (window.lemonade) {
-            const lemonade = window.lemonade;
-        }
-    }
-
-    // Load LemonadeJS
-    if (typeof(jSuites) == 'undefined') {
-        if (typeof(require) === 'function') {
-            const jSuites = require('jsuites');
-        } else if (window.jSuites) {
-            const jSuites = window.jSuites;
-        }
-    }
-
-    return function() {
-        const 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') {
-            const template = `<input type="text" @ready="self.create(this)" name="{{self.name}}" value="{{self.value}}" />`;
-        } else {
-            const 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('@lemonadejs/modal');
+}
+
+; (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;
+
+    function isValidDate(d) {
+        return d instanceof Date && !isNaN(d.getTime());
+    }
+
+    /**
+     * 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, asString) {
+        if (! excelSerialNumber) {
+            return '';
+        }
+
+        let jsDateInMilliseconds = excelInitialTime + excelSerialNumber * millisecondsPerDay;
+        if (jsDateInMilliseconds >= excelLeapYearBug) {
+            jsDateInMilliseconds -= millisecondsPerDay;
+        }
+
+        const d = new Date(jsDateInMilliseconds);
+
+        let arr = [
+            d.getUTCFullYear(),
+            Two(d.getUTCMonth() + 1),
+            Two(d.getUTCDate()),
+            Two(d.getUTCHours()),
+            Two(d.getUTCMinutes()),
+            Two(d.getUTCSeconds()),
+        ];
+
+        if (asString) {
+            return arrayToStringDate(arr);
+        } else {
+            return arr;
+        }
+    }
+
+    const arrayToStringDate = function(arr) {
+        return [arr[0],Two(arr[1]),Two(arr[2])].join('-');
+    }
+
+    /**
+     * 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.range && this.rangeValues) {
+                    // Mark the start and end points
+                    if (this.rangeValues[0] === item.number) {
+                        item.range = true;
+                        item.start = true;
+                    }
+                    if (this.rangeValues[1] === item.number) {
+                        item.range = true;
+                        item.end = true;
+                    }
+                    // Re-recreate teh range
+                    if (this.rangeValues[0] && this.rangeValues[1]) {
+                        if (this.rangeValues[0] <= item.number && this.rangeValues[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.rangeValues = 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.range) {
+                let d = self.getValue();
+                // Date to number
+                let number = dateToNum(d);
+                // Start a new range
+                if (self.rangeValues && (self.rangeValues[0] > number || self.rangeValues[1])) {
+                    destroyRange();
+                }
+                // Range
+                s.range = true;
+                // Update range
+                if (! self.rangeValues) {
+                    s.start = true;
+                    self.rangeValues = [number, null];
+                } else {
+                    s.end = true;
+                    self.rangeValues[1] = number;
+                }
+            }
+        }
+
+        /**
+         * Update the visible range
+         * @param s
+         */
+        const updateRange = function(s) {
+            if (self.range && self.view === 'days' && self.rangeValues) {
+                // Creating a range
+                if (self.rangeValues[0] && ! self.rangeValues[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.rangeValues[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.rangeValues = null;
+        }
+
+        const setValue = 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;
+                        }
+                    }
+                }
+            }
+        }
+
+        /**
+         * Select an item with the enter or mouse
+         * @param {object} e - mouse event
+         * @param {object} item - selected cell
+         */
+        self.select = function(e, 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 || e.type === 'click') {
+                // Icon click
+                move(1);
+            } else {
+                // Keyboard handler
+                moveCursor(1, e);
+            }
+        }
+
+        /**
+         * Next handler
+         * @param {object?} e mouse event
+         */
+        self.prev = function(e) {
+            if (! e || e.type === 'click') {
+                // Icon click
+                move(-1);
+            } else {
+                // Keyboard handler
+                moveCursor(-1, e);
+            }
+        }
+
+        /**
+         * Open the modal
+         */
+        self.open = function(e) {
+            if (self.modal && self.modal.closed) {
+                // Open modal
+                self.modal.closed = false;
+                // Set the focus on the content to use the keyboard
+                if (! (self.input && e.target.getAttribute('readonly') === null)) {
+                    self.content.focus();
+                }
+            }
+        }
+
+        /**
+         * Close the modal
+         */
+        self.close = function() {
+            if (self.modal && self.modal.closed === false) {
+                // Close modal
+                self.modal.closed = true;
+            }
+        }
+
+        self.reset = function() {
+            setValue(true);
+            self.close();
+        }
+
+        self.update = function() {
+            setValue();
+            self.close();
+        }
+
+        /**
+         * Change the view
+         */
+        self.setView = function() {
+            let v = this.getAttribute('data-view');
+            if (v) {
+                self.view = v;
+            }
+        }
+
+        /**
+         * 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);
+            }
+            // 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(),
+            };
+            // 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,
+                    focus: false,
+                };
+                // 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);
+
+                // Retrieve the value
+                if (self.value) {
+                    self.input.value = self.value;
+                } else if (self.input.value) {
+                    self.value = self.input.value;
+                }
+            }
+
+            /**
+             * Handler keyboard
+             * @param {object} e - event
+             */
+            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') {
+                    // Current view
+                    let view = self.view;
+                    // Select
+                    self.select(e, self.options[self.cursor.index]);
+                    // If is range do something diferent
+                    if (view === 'days' && ! self.range) {
+                        self.update();
+                    }
+                }
+            });
+
+            /**
+             * Mouse wheel handler
+             * @param {object} e - mouse event
+             */
+            self.content.addEventListener('wheel', function(e){
+                if (e.deltaY < 0) {
+                    self.prev();
+                } else {
+                    self.next();
+                }
+            });
+
+            /**
+             * Range handler
+             * @param {object} e - mouse event
+             */
+            self.content.addEventListener('mouseover', function(e){
+                if (e.target.lemon) {
+                    updateRange(e.target.lemon.self);
+                }
+            });
+
+            // Create event for focus out
+            self.el.addEventListener("focusout", (e) => {
+                if (e.relatedTarget !== self.input && ! self.el.contains(e.relatedTarget)) {
+                    self.close();
+                }
+            });
+        }
+
+        return `<div class="lm-calendar">
+                <div class="lm-calendar-options">
+                <button onclick="self.reset">Reset</button>
+                <button onclick="self.update">Done</button>
+            </div>
+            <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>
+                    <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>
+                <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>
+            </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/react.js

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React, { useRef, useEffect  } from "react";
+import Component from './index';
+
+import "./style.css";
+import "@lemonadejs/modal/dist/style.css"
+
+// @ts-ignore
+const Calendar = React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        // @ts-ignore
+        if (! Ref.current.innerHTML) {
+            mainReference.current = Component(Ref.current, options);
+        }
+    }, []);
+
+    let prop = {
+        ref: Ref,
+        style: { height: '100%', width: '100%' }
+    };
+
+    return React.createElement("div", prop);
+})
+
+export default Calendar;

package/dist/style.css

@@ -0,0 +1,231 @@
+.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;
+    font-weight: bold;
+}
+
+.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 {
+    display: flex;
+    flex: 1;
+    cursor: pointer;
+    padding-left: 5px;
+}
+
+.lm-calendar-header .lm-calendar-labels > button {
+    font-size: 1.2em;
+    border: 0;
+    padding: 2px;
+    margin: 2px;
+    background-color: #fff;
+}
+
+.lm-calendar-navigation button {
+    cursor: pointer;
+    padding: 5px;
+    border: 0;
+    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/dist/vue.js

@@ -0,0 +1,32 @@
+import { h, getCurrentInstance } from 'vue';
+import component from "./index";
+
+import "./style.css";
+import "@lemonadejs/modal/dist/style.css"
+
+export const Calendar = {
+    inheritAttrs: false,
+    mounted() {
+        const { attrs } = getCurrentInstance();
+
+        let options = {
+            ...attrs
+        };
+
+        this.el = this.$refs.container;
+
+        this.current = component(this.$refs.container, options);
+    },
+    setup() {
+        let containerProps = {
+            ref: 'container',
+            style: {
+                width: '100%',
+                height: '100%',
+            }
+        };
+        return () => h('div', containerProps);
+    }
+}
+
+export default Calendar;

package/package.json

@@ -1,22 +1,23 @@
-{
-    "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": "^3.0.3",
-        "jsuites": "^4.17.7"
-    },
-    "main": "dist/index.js",
-    "version": "2.0.0"
-}
+{
+    "name": "@lemonadejs/calendar",
+    "title": "LemonadeJS calendar",
+    "description": "LemonadeJS reactive JavaScript calendar plugin",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript calendar",
+        "lemonadejs plugins",
+        "js",
+        "library",
+        "javascript plugins"
+    ],
+    "dependencies": {
+        "lemonadejs": "^4.0.1",
+        "@lemonadejs/modal": "^2.3.3"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "version": "3.0.3"
+}