@lemonadejs/calendar 3.1.1 → 3.2.1

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 JavaScript Calendar](https://jsuites.net/docs/javascript-calendar)
+-   [Jspreadsheet](https://jspreadsheet.com/)

package/dist/index.d.ts

@@ -8,27 +8,33 @@ 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 */
+        onchange: (self: object, value: string) => void;
+        /** On update event */
+        onupdate: (self: object, value: string) => void;
     }
 
     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

@@ -272,6 +272,8 @@ if (! Modal && typeof (require) === 'function') {
     const Calendar = function() {
         let self = this;
 
+        const onchange = self.onchange;
+
         // Weekdays
         self.weekdays = getWeekdays();
 
@@ -647,8 +649,12 @@ 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') {
+                    onchange(self, self.value);
+                }
                 if (typeof(self.onupdate) === 'function') {
-                    self.onupdate.call(self, self.value);
+                    self.onupdate(self, self.value);
                 }
             } else if (prop === 'options') {
                 self.content.focus();
@@ -684,8 +690,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);
@@ -711,19 +717,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();
                 }
             });
 

package/package.json

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^4.0.7",
-        "@lemonadejs/modal": "^2.7.1"
+        "lemonadejs": "^4.1.1",
+        "@lemonadejs/modal": "^2.7.2"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.1.1"
+    "version": "3.2.1"
 }