UNPKG

@lemonadejs/calendar

Version:

LemonadeJS reactive JavaScript calendar plugin

121 lines (92 loc) • 9.3 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
# JavaScript Calendar [Official JavaScript Calendar Documentation](https://lemonadejs.com/docs/plugins/calendar) Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS or Angular. 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 directly from a CDN. ### npm Installation ```bash npm install @lemonadejs/calendar ``` ### CDN ```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 React: ```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()} />; } ``` ## API Reference ### Options | Attribute | Type | Description | |----------------|---------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------| | `type?` | `'default' \| 'auto' \| 'picker' \| 'inline'` | Render mode. `'auto'` resolves to `'default'` (≥ 800px wide) or `'picker'` (smaller). `Default: 'default'`. | | `format?` | `string` | Date format using Excel-like tokens (e.g. `'dd/mm/yyyy'`). | | `value?` | `number \| string \| Date \| Array` | Initial value. ISO string (`'2025-06-15'`), Excel-style serial number, native `Date`, or `[start, end]` tuple in range mode. | | `numeric?` | `boolean` | Return values as Excel-style numbers via `getValue()`. `Default: false`. | | `range?` | `boolean` | Enable range selection. `Default: false`. | | `footer?` | `boolean` | Show the footer (Reset / Done buttons + Today + time picker). `Default: true`. | | `time?` | `boolean` | Show hour and minute selectors in the footer. `Default: false`. | | `grid?` | `boolean` | Apply grid display mode (sets `data-grid="true"` on root). `Default: false`. | | `placeholder?` | `string` | Placeholder applied to a bound input. | | `disabled?` | `boolean` | Disable interaction. `Default: false`. | | `startingDay?` | `number` | First day of the week (`0=Sun … 6=Sat`). `Default: 0`. | | `validRange?` | `string[] \| number[] \| Function` | Bounds tuple `[from, to]` (ISO or Excel serial), or a predicate `(day, month, year, item) => boolean` to disable a cell. | | `data?` | `Array<{ date: string, [key: string]: any }>` | Event entries; cells with a matching `date` get a `data-event` marker. | | `wheel?` | `boolean` | Allow mouse-wheel month navigation. `Default: true`. | | `input?` | `HTMLInputElement \| 'auto'` | Existing input to bind, or `'auto'` to create one. | | `initInput?` | `boolean` | Wire up input listeners (open-on-focus, type-to-update). `Default: true`. | ### Events | Event | Signature | Description | |-------------|------------------------------------------|-----------------------------------------------------------------------------------| | `onchange?` | `(self, value) => void` | Fired when the value changes (date selection or `setValue`). | | `onupdate?` | `(self, value) => void` | Fired when the cursor moves between cells (e.g. via arrow keys). | | `onopen?` | `(self) => void` | Fired when the modal opens (`'picker'` / `'default'` types only). | | `onclose?` | `(self, origin) => void` | Fired when the modal closes. `origin` is `'button'`, `'escape'`, `'focusout'`, or any custom string passed to `close({ origin })`. | | `onChange?` | `(event) => void` | **React-only.** Forwarded to the bound input's native `change` DOM event. Distinct from `onchange`. | ### Instance Calling `Calendar(root, options)` returns an instance exposing: | Property / Method | Description | |--------------------|----------------------------------------------------------------------------------------------| | `el` | Root DOM element. | | `value` | Current value (assignable; mutation triggers a re-render). | | `format` | Active date format mask. | | `type` | Resolved type (post-`'auto'` resolution). | | `view` | Current view: `'days' \| 'months' \| 'years'`. | | `range` | Range mode flag. | | `rangeValues` | `[start, end]` numeric tuple while a range is active, `null` otherwise. | | `modal` | Modal instance (only for `'picker'` / `'default'` types). | | `content` | Inner content element (focus target for keyboard navigation). | | `input` | Bound input element (auto-created or user-provided). | | `open()` | Open the modal. | | `close(options?)` | Close the modal. Pass `{ origin: '...' }` to label the close source. | | `isClosed()` | `true` / `false` for modal types; `undefined` for `'inline'`. | | `setView(view)` | Switch view. Accepts `'days'`, `'months'`, `'years'`. | | `next()` | Navigate forward (month / year / year-block depending on the current view). | | `prev()` | Navigate backward. | | `reset()` | Clear the value and close the modal when applicable. | | `getValue()` | Return the current value as a string (or number when `numeric: true`). | | `setValue(v)` | Set the value programmatically. Accepts ISO strings, Excel serial numbers, or `[start, end]` tuples in range mode. | | `update()` | Commit the current cursor selection (used by Done button). | ## License Released under the MIT license. ## Other Tools - [jSuites Plugins - JavaScript Calendar](https://jsuites.net/docs/javascript-calendar) - [Jspreadsheet - JavaScript Spreadsheet](https://jspreadsheet.com/)