@lemonadejs/calendar 3.0.3 → 3.0.5

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.
package/README.md CHANGED
@@ -1,81 +1,81 @@
1
- # LemonadeJS Calendar
2
-
3
- [Official website and documentation is here](https://lemonadejs.net/components/calendar)
4
-
5
- Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
6
-
7
- 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.
8
-
9
- ## Features
10
-
11
- - Lightweight: The JavaScript Calendar is only about 2 KBytes;
12
- - Integration: It can be used as a standalone library or integrated with any modern framework;
13
-
14
- ## Getting Started
15
-
16
- You can install using NPM or using directly from a CDN.
17
-
18
- ### npm Installation
19
-
20
- To install it in your project using npm, run the following command:
21
-
22
- ```bash
23
- $ npm install @lemonadejs/calendar
24
- ```
25
-
26
- ### CDN
27
-
28
- To use calendar via a CDN, include the following script tags in your HTML file:
29
-
30
- ```html
31
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
32
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/index.min.js"></script>
33
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/style.min.css" />
34
- ```
35
-
36
- ### Usage
37
-
38
- Quick example with Lemonade
39
-
40
- ```javascript
41
- import Calendar from "@lemonadejs/calendar";
42
- import "@lemonadejs/calendar/dist/style.css"
43
-
44
- export default function App() {
45
- const self = this;
46
-
47
- return `<Calendar />`;
48
- }
49
- ```
50
-
51
- ### Configuration
52
-
53
- You can configure things such as calendar starting date, calendar events, and customize functions.
54
-
55
- #### Calendar Properties
56
-
57
- | Property | Type | Description |
58
- | -------- | ---- | ----------- |
59
- | value | date | The value currently attached to the calendar. |
60
- | range | array | Defines a restricted range of selectable dates within the calendar. Example: ['2023-06-20', '2023-06-25']. |
61
- | closed | boolean | Control when the calendar modal is open or closed. |
62
- | time | boolean | Enables time selection into the calendar. |
63
- | type | string | |
64
-
65
- ### Calendar Events
66
-
67
- | Event | Type | Description |
68
- | -------- | ---- | ----------- |
69
- | onopen? | () => void | Called when modal opens. |
70
- | onclose? | () => void | Called when modal closes. |
71
- | onupdate? | (instance.value) => void | Called when value updates. |
72
- | onchange? | (instance.value) => void | Called when some state inside the component changes. |
73
-
74
- ## License
75
-
76
- The [LemonadeJS](https://lemonadejs.net) Calendar is released under the MIT.
77
-
78
- ## Other Tools
79
-
80
- - [jSuites](https://jsuites.net/v4/)
81
- - [Jspreadsheet](https://jspreadsheet.com)
1
+ # LemonadeJS Calendar
2
+
3
+ [Official website and documentation is here](https://lemonadejs.net/components/calendar)
4
+
5
+ Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
6
+
7
+ 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.
8
+
9
+ ## Features
10
+
11
+ - Lightweight: The JavaScript Calendar is only about 2 KBytes;
12
+ - Integration: It can be used as a standalone library or integrated with any modern framework;
13
+
14
+ ## Getting Started
15
+
16
+ You can install using NPM or using directly from a CDN.
17
+
18
+ ### npm Installation
19
+
20
+ To install it in your project using npm, run the following command:
21
+
22
+ ```bash
23
+ $ npm install @lemonadejs/calendar
24
+ ```
25
+
26
+ ### CDN
27
+
28
+ To use calendar via a CDN, include the following script tags in your HTML file:
29
+
30
+ ```html
31
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
32
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/index.min.js"></script>
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/style.min.css" />
34
+ ```
35
+
36
+ ### Usage
37
+
38
+ Quick example with Lemonade
39
+
40
+ ```javascript
41
+ import Calendar from "@lemonadejs/calendar";
42
+ import "@lemonadejs/calendar/dist/style.css"
43
+
44
+ export default function App() {
45
+ const self = this;
46
+
47
+ return `<Calendar />`;
48
+ }
49
+ ```
50
+
51
+ ### Configuration
52
+
53
+ You can configure things such as calendar starting date, calendar events, and customize functions.
54
+
55
+ #### Calendar Properties
56
+
57
+ | Property | Type | Description |
58
+ | -------- | ---- | ----------- |
59
+ | value | date | The value currently attached to the calendar. |
60
+ | range | array | Defines a restricted range of selectable dates within the calendar. Example: ['2023-06-20', '2023-06-25']. |
61
+ | closed | boolean | Control when the calendar modal is open or closed. |
62
+ | time | boolean | Enables time selection into the calendar. |
63
+ | type | string | |
64
+
65
+ ### Calendar Events
66
+
67
+ | Event | Type | Description |
68
+ | -------- | ---- | ----------- |
69
+ | onopen? | () => void | Called when modal opens. |
70
+ | onclose? | () => void | Called when modal closes. |
71
+ | onupdate? | (instance.value) => void | Called when value updates. |
72
+ | onchange? | (instance.value) => void | Called when some state inside the component changes. |
73
+
74
+ ## License
75
+
76
+ The [LemonadeJS](https://lemonadejs.net) Calendar is released under the MIT.
77
+
78
+ ## Other Tools
79
+
80
+ - [jSuites](https://jsuites.net/v4/)
81
+ - [Jspreadsheet](https://jspreadsheet.com)
package/dist/index.d.ts CHANGED
@@ -1,24 +1,27 @@
1
- /**
2
- * Official Type definitions for LemonadeJS plugins
3
- * https://lemonadejs.net
4
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5
- */
6
-
7
- interface Calendar {
8
- (): any
9
- [key: string]: any
10
- }
11
-
12
- interface options {
13
- range?: boolean;
14
- type?: 'default' | 'inline';
15
- value?: number | string;
16
- numeric?: boolean;
17
- input?: HTMLElement;
18
- }
19
-
20
- interface instance {
21
-
22
- }
23
-
24
- export declare function Calendar(el: HTMLElement, options?: options): instance;
1
+ /**
2
+ * Official Type definitions for LemonadeJS plugins
3
+ * https://lemonadejs.net
4
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5
+ */
6
+
7
+ declare function Calendar(el: HTMLElement, options?: Calendar.Options): Calendar.Instance;
8
+
9
+ declare namespace Calendar {
10
+ interface Options {
11
+ /** Range picker */
12
+ range?: boolean;
13
+ /** Caqlendar type */
14
+ type?: 'default' | 'inline';
15
+ /** Calendar value will be a excel-like number or a ISO string. Default false */
16
+ numeric?: boolean;
17
+ /** Value */
18
+ value?: number | string;
19
+ /** Bind the calendar to na HTML input element */
20
+ input?: HTMLElement;
21
+ }
22
+
23
+ interface Instance {
24
+ }
25
+ }
26
+
27
+ export default Calendar;