@lemonadejs/calendar 5.0.0 → 5.2.1

package/README.md

@@ -1,88 +1,90 @@
-# JavaScript Calendar
-
-[Official website and documentation is here](https://lemonadejs.net/docs/plugins/calendar)
-
-Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
-
-# JavaScript Calendar
-
-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:
-
-- 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
-
-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
-
-For immediate use without NPM, include these script tags in your HTML for access to the calendar and its dependencies:
-
-```html
-<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 ReactJS.
-
-```javascript
-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 calendarRef = useRef();
-
-    return (<>
-        <Calendar type={'inline'} ref={calendarRef} value={new Date()} />
-    </>);
-}
-```
-
-### Configuration
-
-You can configure things such as calendar starting date, calendar events, and customize functions.
-
-#### Calendar Properties
-
-| 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                            | Description                         |
-|----------------------------------|-------------------------------------|
-| onchange?: (self, value) => void | Called when a new date is selected. |
-
-## License
-
-The LemonadeJS [Reactive JavaScript Calendar](https://lemonadejs.net) is released under the MIT.
-
-## Other Tools
-
--   [jSuites Plugins - JavaScript Calendar](https://jsuites.net/docs/javascript-calendar)
--   [Jspreadsheet - JavaScript Spreadsheet](https://jspreadsheet.com/)
+# JavaScript Calendar
+
+[Official JavaScript Calendar Documenation](https://lemonadejs.com/docs/plugins/calendar)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS or Angular.
+
+# JavaScript Calendar
+
+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:
+
+-   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
+
+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
+
+For immediate use without NPM, include these script tags in your HTML for access to the calendar and its dependencies:
+
+```html
+<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 ReactJS.
+
+```javascript
+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 calendarRef = useRef();
+
+    return (
+        <>
+            <Calendar type={'inline'} ref={calendarRef} value={new Date()} />
+        </>
+    );
+}
+```
+
+### Configuration
+
+You can configure things such as calendar starting date, calendar events, and customize functions.
+
+#### Calendar Properties
+
+| 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                            | Description                         |
+| -------------------------------- | ----------------------------------- |
+| onchange?: (self, value) => void | Called when a new date is selected. |
+
+## License
+
+The LemonadeJS [Reactive JavaScript Calendar](https://lemonadejs.com/docs/plugins/calendar) is released under the MIT.
+
+## Other Tools
+
+-   [jSuites Plugins - JavaScript Calendar](https://jsuites.net/docs/javascript-calendar)
+-   [Jspreadsheet - JavaScript Spreadsheet](https://jspreadsheet.com/)

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Official Type definitions for LemonadeJS plugins
- * https://lemonadejs.net
+ * https://lemonadejs.com
  * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
  */
 
@@ -8,9 +8,9 @@ declare function Calendar(el: HTMLElement, options?: Calendar.Options): Calendar
 
 declare namespace Calendar {
     interface Options {
-        /** Calendar type */
-        type?: 'default' | 'inline';
-        /** Date format */
+        /** Calendar type. Use picker for a responsive modal, auto to automatic detect screen size and open between default or picker. */
+        type?: 'default' | 'auto' | 'picker' | 'inline';
+        /** Date format. Excel like format dd/mm/yyyy */
         format?: string;
         /** Range picker */
         range?: boolean;
@@ -18,35 +18,85 @@ declare namespace Calendar {
         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 | object | 'auto';
-        /** Footer. Default: true **/
+        /** Show Footer. Default: true **/
         footer?: boolean;
         /** Show hour and minute picker **/
         time?: boolean;
         /** Show grid mode. Default: false */
         grid?: boolean;
+        /** Placeholder */
+        placeholder?: string;
+        /** Disabled. Default false **/
+        disabled?: boolean;
+        /** Starting day. From 0-6 where zero is Sunday and six is Saturday */
+        startingDay?: number;
+        /** Valid range **/
+        validRange?: number[] | string[];
+        /** Calendar events data */
+        data?: Array<{date: string, [key: string]: any}>;
         /** Update view on mouse wheel. Default: true */
         wheel?: boolean;
-        /** LemonadeJS on change event */
+        /** Bind the calendar to na HTML input element */
+        input?: HTMLElement | 'auto';
+        /** Create events and assing the calendar classes for the input. Default true */
+        initInput?: boolean;
+        /** Change value event */
         onchange?: (self: object, value: string) => void;
-        /** LemonadeJS on update event */
+        /** Update view event */
         onupdate?: (self: object, value: string) => void;
+        /** Close event */
+        onclose?: (self: object, origin: string) => void;
+        /** Open event */
+        onopen?: (self: object) => void;
         /** React dedicated onChange event */
         onChange?: (e: Event) => void;
     }
 
     interface Instance {
         /** Calendar type */
-        type?: 'default' | 'inline';
+        type?: 'default' | 'auto' | 'picker' | 'inline';
+        /** Date format */
+        format: string;
         /** Range picker */
-        range?: boolean;
+        range: boolean;
         /** Value */
-        value?: number | string;
+        value: number | string;
         /** Calendar value will be a excel-like number or a ISO string. Default false */
-        numeric?: boolean;
+        numeric: boolean;
+        /** Footer. Default: true **/
+        footer: boolean;
+        /** Show hour and minute picker **/
+        time: boolean;
+        /** Show grid mode. Default: false */
+        grid: boolean;
+        /** Placeholder */
+        placeholder: string;
+        /** Disabled. Default false **/
+        disabled: boolean;
+        /** Update view on mouse wheel. Default: true */
+        wheel: boolean;
         /** Bind the calendar to na HTML input element */
-        input?: HTMLElement;
+        input: HTMLElement;
+        /** Open the calendar modal */
+        open: () => void;
+        /** Open the calendar modal */
+        close: (options?: object) => void;
+        /** Calendar is closed */
+        isClosed?: () => boolean;
+        /** Change the view */
+        setView: (view: 'days' | 'months' | 'years') => void;
+        /** Go to the next month or year depending on the view */
+        next?: () => void;
+        /** Go to the previous month or year depending on the view */
+        prev?: () => void;
+        /** Reset the calendar value and close the modal when applicable */
+        reset?: () => void;
+        /** Get the current calendar value */
+        getValue?: () => string | number;
+        /** Set the current calendar value. Use number for Excel like numbers */
+        setValue?: (value: string | number) => void;
+        /** Accept the selected value on the calendar */
+        update?: () => void;
     }
 }