kempo-ui 0.4.2 → 0.4.3
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/dist/components/Calendar.js +170 -0
- package/dist/components/Time.js +37 -0
- package/docs/components/accordion.html +8 -0
- package/docs/components/aside.html +8 -0
- package/docs/components/calendar.html +712 -0
- package/docs/components/card.html +8 -0
- package/docs/components/code-editor.html +8 -0
- package/docs/components/color-picker.html +8 -0
- package/docs/components/combobox.html +8 -0
- package/docs/components/content-slider.html +8 -0
- package/docs/components/context.html +8 -0
- package/docs/components/dialog.html +8 -0
- package/docs/components/dropdown.html +8 -0
- package/docs/components/filter-list.html +8 -0
- package/docs/components/focus-capture.html +8 -0
- package/docs/components/html-editor.html +8 -0
- package/docs/components/hybrid-component.html +8 -0
- package/docs/components/icon.html +8 -0
- package/docs/components/import.html +8 -0
- package/docs/components/light-component.html +8 -0
- package/docs/components/nav-spacer.html +8 -0
- package/docs/components/nav.html +8 -0
- package/docs/components/photo-viewer.html +8 -0
- package/docs/components/progress.html +8 -0
- package/docs/components/resize.html +8 -0
- package/docs/components/shadow-component.html +8 -0
- package/docs/components/show-more.html +8 -0
- package/docs/components/slider.html +8 -0
- package/docs/components/sortable.html +8 -0
- package/docs/components/spinner.html +8 -0
- package/docs/components/split.html +8 -0
- package/docs/components/table.html +8 -0
- package/docs/components/tableControls.html +8 -0
- package/docs/components/tableCustomFields.html +8 -0
- package/docs/components/tableFetchRecords.html +8 -0
- package/docs/components/tableFieldSortHide.html +8 -0
- package/docs/components/tablePagination.html +8 -0
- package/docs/components/tablePlaceholder.html +8 -0
- package/docs/components/tableRecordEditing.html +8 -0
- package/docs/components/tableRecordFiltering.html +8 -0
- package/docs/components/tableRecordHiding.html +8 -0
- package/docs/components/tableRecordSearching.html +8 -0
- package/docs/components/tableRecordSelection.html +8 -0
- package/docs/components/tableRowControls.html +8 -0
- package/docs/components/tableServerSync.html +8 -0
- package/docs/components/tableSorting.html +8 -0
- package/docs/components/tabs.html +8 -0
- package/docs/components/tags.html +8 -0
- package/docs/components/theme-select.html +8 -0
- package/docs/components/theme-switcher.html +8 -0
- package/docs/components/time.html +662 -0
- package/docs/components/timestamp.html +8 -0
- package/docs/components/toast.html +8 -0
- package/docs/components/toggle.html +8 -0
- package/docs/components/tree.html +8 -0
- package/docs/index.html +20 -0
- package/docs/src/components/Calendar.js +170 -0
- package/docs/src/components/Time.js +37 -0
- package/docs/utils/context.html +8 -0
- package/docs/utils/cookie.html +8 -0
- package/docs/utils/debounce.html +8 -0
- package/docs/utils/drag.html +8 -0
- package/docs/utils/elevation.html +8 -0
- package/docs/utils/formatTimestamp.html +8 -0
- package/docs/utils/object.html +8 -0
- package/docs/utils/propConverters.html +8 -0
- package/docs/utils/string.html +8 -0
- package/docs/utils/theme.html +8 -0
- package/docs/utils/toTitleCase.html +8 -0
- package/docs/utils/type.html +8 -0
- package/docs/utils/wait.html +8 -0
- package/docs-src/components/calendar.page.html +254 -0
- package/docs-src/components/time.page.html +204 -0
- package/docs-src/index.page.html +12 -0
- package/docs-src/nav.fragment.html +8 -0
- package/llms.txt +2 -0
- package/package.json +1 -1
- package/src/components/Calendar.js +473 -0
- package/src/components/Time.js +137 -0
|
@@ -0,0 +1,712 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Calendar - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
|
+
<link rel="manifest" href="../manifest.json" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
|
|
11
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
13
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
+
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
|
|
18
|
+
<k-nav
|
|
19
|
+
fixed
|
|
20
|
+
class="bg-primary"
|
|
21
|
+
>
|
|
22
|
+
<button
|
|
23
|
+
id="toggleNavSideMenu"
|
|
24
|
+
class="link"
|
|
25
|
+
>
|
|
26
|
+
<k-icon name="menu"></k-icon>
|
|
27
|
+
</button>
|
|
28
|
+
<a
|
|
29
|
+
href="../"
|
|
30
|
+
class="d-if ph"
|
|
31
|
+
style="align-items: center"
|
|
32
|
+
>
|
|
33
|
+
<img
|
|
34
|
+
src="../media/icon32.png"
|
|
35
|
+
alt="Kempo UI Icon"
|
|
36
|
+
class="pr"
|
|
37
|
+
/>
|
|
38
|
+
Kempo UI
|
|
39
|
+
</a>
|
|
40
|
+
<div
|
|
41
|
+
style="position:relative;margin:0 .25rem;align-self:center;"
|
|
42
|
+
theme="light"
|
|
43
|
+
>
|
|
44
|
+
<input
|
|
45
|
+
id="navSearchInput"
|
|
46
|
+
type="search"
|
|
47
|
+
placeholder="Search docs..."
|
|
48
|
+
autocomplete="off"
|
|
49
|
+
style="width:11rem;"
|
|
50
|
+
/>
|
|
51
|
+
<div
|
|
52
|
+
id="navSearchDropdown"
|
|
53
|
+
hidden
|
|
54
|
+
theme="light"
|
|
55
|
+
style="position:absolute;top:calc(100% + 4px);left:0;width:min(480px,90vw);max-height:70vh;background:var(--c_bg);border:1px solid var(--c_border);border-radius:var(--radius);overflow:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);"
|
|
56
|
+
>
|
|
57
|
+
<k-filter-list
|
|
58
|
+
id="navSearchList"
|
|
59
|
+
style="display:block;padding:.25rem 0;"
|
|
60
|
+
>
|
|
61
|
+
<k-filter-item filter-keywords="accordion components"><a
|
|
62
|
+
href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
|
|
63
|
+
<k-filter-item filter-keywords="aside sidebar components"><a
|
|
64
|
+
href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
|
|
65
|
+
<k-filter-item filter-keywords="calendar date picker range month day components"><a
|
|
66
|
+
href="../components/calendar.html"
|
|
67
|
+
>Calendar<br><small>Component</small></a></k-filter-item>
|
|
68
|
+
<k-filter-item filter-keywords="card components"><a
|
|
69
|
+
href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
|
|
70
|
+
<k-filter-item filter-keywords="code editor codeeditor monaco components"><a
|
|
71
|
+
href="../components/code-editor.html"
|
|
72
|
+
>Code Editor<br><small>Component</small></a></k-filter-item>
|
|
73
|
+
<k-filter-item filter-keywords="combobox combo box search autocomplete components"><a
|
|
74
|
+
href="../components/combobox.html"
|
|
75
|
+
>Combobox<br><small>Component</small></a></k-filter-item>
|
|
76
|
+
<k-filter-item filter-keywords="color picker colorpicker components"><a
|
|
77
|
+
href="../components/color-picker.html"
|
|
78
|
+
>Color Picker<br><small>Component</small></a></k-filter-item>
|
|
79
|
+
<k-filter-item filter-keywords="content slider components"><a
|
|
80
|
+
href="../components/content-slider.html"
|
|
81
|
+
>Content Slider<br><small>Component</small></a></k-filter-item>
|
|
82
|
+
<k-filter-item filter-keywords="context state global components"><a
|
|
83
|
+
href="../components/context.html"
|
|
84
|
+
>Context<br><small>Component</small></a></k-filter-item>
|
|
85
|
+
<k-filter-item filter-keywords="dialog modal popup components"><a
|
|
86
|
+
href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
|
|
87
|
+
<k-filter-item filter-keywords="dropdown select components"><a
|
|
88
|
+
href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
|
|
89
|
+
<k-filter-item filter-keywords="filter list filterlist components"><a
|
|
90
|
+
href="../components/filter-list.html"
|
|
91
|
+
>Filter List<br><small>Component</small></a></k-filter-item>
|
|
92
|
+
<k-filter-item filter-keywords="focus capture focuscapture components"><a
|
|
93
|
+
href="../components/focus-capture.html"
|
|
94
|
+
>Focus Capture<br><small>Component</small></a></k-filter-item>
|
|
95
|
+
<k-filter-item filter-keywords="html editor components"><a
|
|
96
|
+
href="../components/html-editor.html">HTML
|
|
97
|
+
Editor<br><small>Component</small></a></k-filter-item>
|
|
98
|
+
<k-filter-item filter-keywords="icon components"><a
|
|
99
|
+
href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
|
|
100
|
+
<k-filter-item filter-keywords="import components"><a
|
|
101
|
+
href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
|
|
102
|
+
<k-filter-item filter-keywords="nav navbar navigation components"><a
|
|
103
|
+
href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
|
|
104
|
+
<k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a
|
|
105
|
+
href="../components/nav-spacer.html"
|
|
106
|
+
>Nav Spacer<br><small>Component</small></a></k-filter-item>
|
|
107
|
+
<k-filter-item filter-keywords="photo viewer photoviewer components"><a
|
|
108
|
+
href="../components/photo-viewer.html"
|
|
109
|
+
>Photo Viewer<br><small>Component</small></a></k-filter-item>
|
|
110
|
+
<k-filter-item filter-keywords="progress loading components"><a
|
|
111
|
+
href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
|
|
112
|
+
<k-filter-item filter-keywords="resize components"><a
|
|
113
|
+
href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
|
|
114
|
+
<k-filter-item filter-keywords="show more showmore components"><a
|
|
115
|
+
href="../components/show-more.html"
|
|
116
|
+
>Show More<br><small>Component</small></a></k-filter-item>
|
|
117
|
+
<k-filter-item filter-keywords="slider range input step components"><a
|
|
118
|
+
href="../components/slider.html"
|
|
119
|
+
>Slider<br><small>Component</small></a></k-filter-item>
|
|
120
|
+
<k-filter-item filter-keywords="sortable drag drop sort components"><a
|
|
121
|
+
href="../components/sortable.html"
|
|
122
|
+
>Sortable<br><small>Component</small></a></k-filter-item>
|
|
123
|
+
<k-filter-item filter-keywords="spinner loading components"><a
|
|
124
|
+
href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
|
|
125
|
+
<k-filter-item filter-keywords="split pane components"><a
|
|
126
|
+
href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
|
|
127
|
+
<k-filter-item filter-keywords="table data grid components"><a
|
|
128
|
+
href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
|
|
129
|
+
<k-filter-item filter-keywords="table controls advanced example"><a
|
|
130
|
+
href="../components/tableControls.html"
|
|
131
|
+
>Table — Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
132
|
+
<k-filter-item filter-keywords="table custom fields advanced example"><a
|
|
133
|
+
href="../components/tableCustomFields.html"
|
|
134
|
+
>Table — Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
|
|
135
|
+
<k-filter-item filter-keywords="table fetch records advanced example"><a
|
|
136
|
+
href="../components/tableFetchRecords.html"
|
|
137
|
+
>Table — Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
|
|
138
|
+
<k-filter-item filter-keywords="table field sort hide advanced example"><a
|
|
139
|
+
href="../components/tableFieldSortHide.html"
|
|
140
|
+
>Table — Field Sort & Hide<br><small>Advanced Example</small></a></k-filter-item>
|
|
141
|
+
<k-filter-item filter-keywords="table pagination advanced example"><a
|
|
142
|
+
href="../components/tablePagination.html"
|
|
143
|
+
>Table — Pagination<br><small>Advanced Example</small></a></k-filter-item>
|
|
144
|
+
<k-filter-item filter-keywords="table record editing advanced example"><a
|
|
145
|
+
href="../components/tableRecordEditing.html"
|
|
146
|
+
>Table — Record Editing<br><small>Advanced Example</small></a></k-filter-item>
|
|
147
|
+
<k-filter-item filter-keywords="table record filtering advanced example"><a
|
|
148
|
+
href="../components/tableRecordFiltering.html"
|
|
149
|
+
>Table — Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
|
|
150
|
+
<k-filter-item filter-keywords="table record hiding advanced example"><a
|
|
151
|
+
href="../components/tableRecordHiding.html"
|
|
152
|
+
>Table — Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
|
|
153
|
+
<k-filter-item filter-keywords="table record searching advanced example"><a
|
|
154
|
+
href="../components/tableRecordSearching.html"
|
|
155
|
+
>Table — Record Searching<br><small>Advanced Example</small></a></k-filter-item>
|
|
156
|
+
<k-filter-item filter-keywords="table record selection advanced example"><a
|
|
157
|
+
href="../components/tableRecordSelection.html"
|
|
158
|
+
>Table — Record Selection<br><small>Advanced Example</small></a></k-filter-item>
|
|
159
|
+
<k-filter-item filter-keywords="table row controls advanced example"><a
|
|
160
|
+
href="../components/tableRowControls.html"
|
|
161
|
+
>Table — Row Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
162
|
+
<k-filter-item filter-keywords="table server sync advanced example"><a
|
|
163
|
+
href="../components/tableServerSync.html"
|
|
164
|
+
>Table — Server Sync<br><small>Advanced Example</small></a></k-filter-item>
|
|
165
|
+
<k-filter-item filter-keywords="table sorting advanced example"><a
|
|
166
|
+
href="../components/tableSorting.html"
|
|
167
|
+
>Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
|
|
168
|
+
<k-filter-item filter-keywords="table placeholder advanced example"><a
|
|
169
|
+
href="../components/tablePlaceholder.html"
|
|
170
|
+
>Table — Placeholder<br><small>Advanced Example</small></a></k-filter-item>
|
|
171
|
+
<k-filter-item filter-keywords="tabs tab panel components"><a
|
|
172
|
+
href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
|
|
173
|
+
<k-filter-item filter-keywords="tags tag input components"><a
|
|
174
|
+
href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
|
|
175
|
+
<k-filter-item filter-keywords="theme select dropdown dark light components"><a
|
|
176
|
+
href="../components/theme-select.html"
|
|
177
|
+
>Theme Select<br><small>Component</small></a></k-filter-item>
|
|
178
|
+
<k-filter-item filter-keywords="theme switcher dark light components"><a
|
|
179
|
+
href="../components/theme-switcher.html"
|
|
180
|
+
>Theme Switcher<br><small>Component</small></a></k-filter-item>
|
|
181
|
+
<k-filter-item filter-keywords="time picker clock hour minute form components"><a
|
|
182
|
+
href="../components/time.html"
|
|
183
|
+
>Time<br><small>Component</small></a></k-filter-item>
|
|
184
|
+
<k-filter-item filter-keywords="timestamp date time components"><a
|
|
185
|
+
href="../components/timestamp.html"
|
|
186
|
+
>Timestamp<br><small>Component</small></a></k-filter-item>
|
|
187
|
+
<k-filter-item filter-keywords="toast notification alert components"><a
|
|
188
|
+
href="../components/toast.html"
|
|
189
|
+
>Toast<br><small>Component</small></a></k-filter-item>
|
|
190
|
+
<k-filter-item filter-keywords="toggle switch checkbox components"><a
|
|
191
|
+
href="../components/toggle.html"
|
|
192
|
+
>Toggle<br><small>Component</small></a></k-filter-item>
|
|
193
|
+
<k-filter-item filter-keywords="tree treeview components"><a
|
|
194
|
+
href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
|
|
195
|
+
<k-filter-item filter-keywords="shadow component base"><a
|
|
196
|
+
href="../components/shadow-component.html"
|
|
197
|
+
>Shadow Component<br><small>Base Component</small></a></k-filter-item>
|
|
198
|
+
<k-filter-item filter-keywords="light component base"><a
|
|
199
|
+
href="../components/light-component.html">Light Component<br><small>Base
|
|
200
|
+
Component</small></a></k-filter-item>
|
|
201
|
+
<k-filter-item filter-keywords="hybrid component base"><a
|
|
202
|
+
href="../components/hybrid-component.html"
|
|
203
|
+
>Hybrid Component<br><small>Base Component</small></a></k-filter-item>
|
|
204
|
+
<k-filter-item filter-keywords="cookie utils utility"><a
|
|
205
|
+
href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
|
|
206
|
+
<k-filter-item filter-keywords="context utils utility"><a
|
|
207
|
+
href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
|
|
208
|
+
<k-filter-item filter-keywords="debounce utils utility"><a
|
|
209
|
+
href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
|
|
210
|
+
<k-filter-item filter-keywords="drag utils utility"><a
|
|
211
|
+
href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
|
|
212
|
+
<k-filter-item filter-keywords="elevation z-index stacking utils"><a
|
|
213
|
+
href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
|
|
214
|
+
<k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a
|
|
215
|
+
href="../utils/formatTimestamp.html"
|
|
216
|
+
>formatTimestamp<br><small>Utility</small></a></k-filter-item>
|
|
217
|
+
<k-filter-item filter-keywords="object utils utility"><a
|
|
218
|
+
href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
|
|
219
|
+
<k-filter-item filter-keywords="propconverters prop converters utils utility"><a
|
|
220
|
+
href="../utils/propConverters.html"
|
|
221
|
+
>propConverters<br><small>Utility</small></a></k-filter-item>
|
|
222
|
+
<k-filter-item filter-keywords="string utils utility"><a
|
|
223
|
+
href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
|
|
224
|
+
<k-filter-item filter-keywords="theme utils utility"><a
|
|
225
|
+
href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
|
|
226
|
+
<k-filter-item filter-keywords="type utils utility"><a
|
|
227
|
+
href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
|
|
228
|
+
<k-filter-item filter-keywords="wait async utils utility"><a
|
|
229
|
+
href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
|
|
230
|
+
</k-filter-list>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="flex"></div>
|
|
234
|
+
<a
|
|
235
|
+
href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
|
|
236
|
+
target="_blank"
|
|
237
|
+
><k-icon name="license"></k-icon></a>
|
|
238
|
+
<a
|
|
239
|
+
href="https://www.npmjs.com/package/kempo-ui"
|
|
240
|
+
target="_blank"
|
|
241
|
+
><k-icon name="npm"></k-icon></a>
|
|
242
|
+
<a
|
|
243
|
+
href="https://github.com/dustinpoissant/kempo-ui"
|
|
244
|
+
target="_blank"
|
|
245
|
+
><k-icon name="github-mark"></k-icon></a>
|
|
246
|
+
<k-theme-switcher
|
|
247
|
+
class="mr"
|
|
248
|
+
style="
|
|
249
|
+
--padding: 0.5rem;
|
|
250
|
+
--c_active: var(--tc_on_primary);
|
|
251
|
+
--tc_active: var(--c_primary);
|
|
252
|
+
--c_inactive__hover: rgba(255, 255, 255, 0.1);
|
|
253
|
+
"
|
|
254
|
+
></k-theme-switcher>
|
|
255
|
+
</k-nav>
|
|
256
|
+
<div style="width: 100%; height: 4rem;"></div>
|
|
257
|
+
<k-aside
|
|
258
|
+
id="navSideMenu"
|
|
259
|
+
main="overlay"
|
|
260
|
+
state="offscreen"
|
|
261
|
+
>
|
|
262
|
+
<menu>
|
|
263
|
+
<a
|
|
264
|
+
href="../"
|
|
265
|
+
class="ta-center bb mb r0"
|
|
266
|
+
>
|
|
267
|
+
<h1 class="tc-primary">Kempo UI</h1>
|
|
268
|
+
<img
|
|
269
|
+
src="../media/icon128.png"
|
|
270
|
+
alt="Kempo UI Icon"
|
|
271
|
+
/>
|
|
272
|
+
</a>
|
|
273
|
+
|
|
274
|
+
<div class="pl mb">
|
|
275
|
+
<h3>Components</h3>
|
|
276
|
+
<a href="../components/accordion.html">Accordion</a>
|
|
277
|
+
<a href="../components/aside.html">Aside</a>
|
|
278
|
+
<a href="../components/calendar.html">Calendar</a>
|
|
279
|
+
<a href="../components/card.html">Card</a>
|
|
280
|
+
<a href="../components/code-editor.html">Code Editor</a>
|
|
281
|
+
<a href="../components/combobox.html">Combobox</a>
|
|
282
|
+
<a href="../components/color-picker.html">ColorPicker</a>
|
|
283
|
+
<a href="../components/content-slider.html">Content Slider</a>
|
|
284
|
+
<a href="../components/context.html">Context</a>
|
|
285
|
+
<a href="../components/dialog.html">Dialog</a>
|
|
286
|
+
<a href="../components/dropdown.html">Dropdown</a>
|
|
287
|
+
<a href="../components/filter-list.html">Filter List</a>
|
|
288
|
+
<a href="../components/focus-capture.html">FocusCapture</a>
|
|
289
|
+
<a href="../components/html-editor.html">HTML Editor</a>
|
|
290
|
+
<a href="../components/icon.html">Icon</a>
|
|
291
|
+
<a href="../components/import.html">Import</a>
|
|
292
|
+
<a href="../components/nav.html">Nav</a>
|
|
293
|
+
<a href="../components/nav-spacer.html">Nav Spacer</a>
|
|
294
|
+
<a href="../components/photo-viewer.html">Photo Viewer</a>
|
|
295
|
+
<a href="../components/progress.html">Progress</a>
|
|
296
|
+
<a href="../components/resize.html">Resize</a>
|
|
297
|
+
<a href="../components/show-more.html">Show More</a>
|
|
298
|
+
<a href="../components/slider.html">Slider</a>
|
|
299
|
+
<a href="../components/sortable.html">Sortable</a>
|
|
300
|
+
<a href="../components/spinner.html">Spinner</a>
|
|
301
|
+
<a href="../components/split.html">Split</a>
|
|
302
|
+
<a href="../components/table.html">Table</a>
|
|
303
|
+
<a href="../components/tabs.html">Tabs</a>
|
|
304
|
+
<a href="../components/tags.html">Tags</a>
|
|
305
|
+
<a href="../components/theme-select.html">Theme Select</a>
|
|
306
|
+
<a href="../components/theme-switcher.html">Theme Switcher</a>
|
|
307
|
+
<a href="../components/time.html">Time</a>
|
|
308
|
+
<a href="../components/timestamp.html">Timestamp</a>
|
|
309
|
+
<a href="../components/toast.html">Toast</a>
|
|
310
|
+
<a href="../components/toggle.html">Toggle</a>
|
|
311
|
+
<a href="../components/tree.html">Tree</a>
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<h5 class="mb0">Base Components</h5>
|
|
315
|
+
<div class="pl mb">
|
|
316
|
+
<a href="../components/shadow-component.html">Shadow Component</a>
|
|
317
|
+
<a href="../components/light-component.html">Light Component</a>
|
|
318
|
+
<a href="../components/hybrid-component.html">Hybrid Component</a>
|
|
319
|
+
</div>
|
|
320
|
+
|
|
321
|
+
<h5 class="mb0">Utils</h5>
|
|
322
|
+
<div class="pl mb">
|
|
323
|
+
<a href="../utils/cookie.html">cookie</a>
|
|
324
|
+
<a href="../utils/context.html">context</a>
|
|
325
|
+
<a href="../utils/debounce.html">debounce</a>
|
|
326
|
+
<a href="../utils/drag.html">drag</a>
|
|
327
|
+
<a href="../utils/elevation.html">elevation</a>
|
|
328
|
+
<a href="../utils/formatTimestamp.html">formatTimestamp</a>
|
|
329
|
+
<a href="../utils/object.html">object</a>
|
|
330
|
+
<a href="../utils/propConverters.html">propConverters</a>
|
|
331
|
+
<a href="../utils/string.html">string</a>
|
|
332
|
+
<a href="../utils/theme.html">theme</a>
|
|
333
|
+
<a href="../utils/type.html">type</a>
|
|
334
|
+
<a href="../utils/wait.html">wait</a>
|
|
335
|
+
</div>
|
|
336
|
+
</menu>
|
|
337
|
+
</k-aside>
|
|
338
|
+
<style>
|
|
339
|
+
#navSearchList a {
|
|
340
|
+
display: block;
|
|
341
|
+
padding: .25rem .5rem;
|
|
342
|
+
border-radius: var(--radius);
|
|
343
|
+
text-decoration: none;
|
|
344
|
+
color: var(--tc);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
#navSearchList a:hover {
|
|
348
|
+
background: rgba(128, 128, 128, .15);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
#navSearchList a small {
|
|
352
|
+
display: block;
|
|
353
|
+
color: var(--tc_muted);
|
|
354
|
+
}
|
|
355
|
+
</style>
|
|
356
|
+
<script
|
|
357
|
+
src="../src/components/Nav.js"
|
|
358
|
+
type="module"
|
|
359
|
+
></script>
|
|
360
|
+
<script
|
|
361
|
+
src="../src/components/FilterList.js"
|
|
362
|
+
type="module"
|
|
363
|
+
></script>
|
|
364
|
+
<script
|
|
365
|
+
src="../src/components/FilterItem.js"
|
|
366
|
+
type="module"
|
|
367
|
+
></script>
|
|
368
|
+
<script
|
|
369
|
+
src="../src/components/Aside.js"
|
|
370
|
+
type="module"
|
|
371
|
+
></script>
|
|
372
|
+
<script
|
|
373
|
+
src="../src/components/Icon.js"
|
|
374
|
+
type="module"
|
|
375
|
+
></script>
|
|
376
|
+
<script
|
|
377
|
+
src="../src/components/ThemeSwitcher.js"
|
|
378
|
+
type="module"
|
|
379
|
+
></script>
|
|
380
|
+
<script type="module">
|
|
381
|
+
import debounce from '../src/utils/debounce.js';
|
|
382
|
+
|
|
383
|
+
document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
|
|
384
|
+
await window.customElements.whenDefined('k-aside');
|
|
385
|
+
document.getElementById('navSideMenu').toggle();
|
|
386
|
+
});
|
|
387
|
+
|
|
388
|
+
document.addEventListener('click', function (e) {
|
|
389
|
+
if (e.target.matches('a[href^="#"]')) {
|
|
390
|
+
e.preventDefault();
|
|
391
|
+
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
392
|
+
const target = document.getElementById(targetId);
|
|
393
|
+
if (target) {
|
|
394
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
395
|
+
const url = window.location.pathname + window.location.search + '#' + targetId;
|
|
396
|
+
history.replaceState(null, '', url);
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
});
|
|
400
|
+
|
|
401
|
+
/*
|
|
402
|
+
Nav Search
|
|
403
|
+
*/
|
|
404
|
+
const searchInput = document.getElementById('navSearchInput');
|
|
405
|
+
const searchDropdown = document.getElementById('navSearchDropdown');
|
|
406
|
+
let navSearchList = null;
|
|
407
|
+
|
|
408
|
+
const openSearch = async () => {
|
|
409
|
+
await customElements.whenDefined('k-filter-list');
|
|
410
|
+
if (!navSearchList) navSearchList = document.getElementById('navSearchList');
|
|
411
|
+
navSearchList.filter(searchInput.value);
|
|
412
|
+
searchDropdown.hidden = false;
|
|
413
|
+
};
|
|
414
|
+
|
|
415
|
+
const closeSearch = () => {
|
|
416
|
+
searchDropdown.hidden = true;
|
|
417
|
+
navSearchList?.clearFocus();
|
|
418
|
+
};
|
|
419
|
+
|
|
420
|
+
searchInput.addEventListener('focus', openSearch);
|
|
421
|
+
|
|
422
|
+
searchInput.addEventListener('input', debounce(e => {
|
|
423
|
+
navSearchList?.filter(e.target.value);
|
|
424
|
+
}, 150));
|
|
425
|
+
|
|
426
|
+
searchInput.addEventListener('keydown', e => {
|
|
427
|
+
if (e.key === 'Escape') {
|
|
428
|
+
searchInput.value = '';
|
|
429
|
+
searchInput.blur();
|
|
430
|
+
closeSearch();
|
|
431
|
+
} else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
|
|
432
|
+
navSearchList?.handleKeydown(e);
|
|
433
|
+
}
|
|
434
|
+
});
|
|
435
|
+
|
|
436
|
+
searchInput.addEventListener('blur', () => {
|
|
437
|
+
setTimeout(closeSearch, 150);
|
|
438
|
+
});
|
|
439
|
+
|
|
440
|
+
document.addEventListener('keydown', e => {
|
|
441
|
+
let active = document.activeElement;
|
|
442
|
+
while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
|
|
443
|
+
const tag = active?.tagName;
|
|
444
|
+
if (tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
|
|
445
|
+
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
|
446
|
+
if (e.key.length === 1) {
|
|
447
|
+
searchInput.focus();
|
|
448
|
+
}
|
|
449
|
+
});
|
|
450
|
+
</script>
|
|
451
|
+
|
|
452
|
+
|
|
453
|
+
<h1 class="ta-center">Calendar</h1>
|
|
454
|
+
|
|
455
|
+
<k-main>
|
|
456
|
+
|
|
457
|
+
<k-accordion persistent-id="toc" class="b r mb">
|
|
458
|
+
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
459
|
+
<k-accordion-panel name="toc-panel">
|
|
460
|
+
<div class="m pl">
|
|
461
|
+
<h6>Examples</h6>
|
|
462
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
463
|
+
<a href="#defaultValue">Default Value</a><br />
|
|
464
|
+
<a href="#rangeMode">Range Mode</a><br />
|
|
465
|
+
<a href="#rangeDefault">Range Default</a><br />
|
|
466
|
+
<a href="#minMax">Min / Max</a><br />
|
|
467
|
+
<a href="#javascriptUsage">JavaScript Usage</a><br />
|
|
468
|
+
<a href="#formUsage">Form Usage</a><br />
|
|
469
|
+
<a href="#disabled">Disabled</a><br />
|
|
470
|
+
|
|
471
|
+
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
472
|
+
<a href="#constructor">Constructor</a><br />
|
|
473
|
+
<a href="#requirements">Requirements</a><br />
|
|
474
|
+
<a href="#properties">Properties</a><br />
|
|
475
|
+
<a href="#methods">Methods</a><br />
|
|
476
|
+
<a href="#cssVariables">CSS Variables</a><br />
|
|
477
|
+
<a href="#events">Events</a><br />
|
|
478
|
+
</div>
|
|
479
|
+
</k-accordion-panel>
|
|
480
|
+
</k-accordion>
|
|
481
|
+
|
|
482
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
483
|
+
<p>A month-grid calendar widget for selecting a single date. The <code>value</code> is an ISO <code>YYYY-MM-DD</code> string. Use the month and year dropdowns in the header to jump around quickly.</p>
|
|
484
|
+
<div class="row -mx">
|
|
485
|
+
<div class="col m-span-12 px">
|
|
486
|
+
<k-card label="HTML">
|
|
487
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-calendar</span>></span><span class="hljs-tag"></<span class="hljs-name">k-calendar</span>></span></code></pre>
|
|
488
|
+
</k-card>
|
|
489
|
+
</div>
|
|
490
|
+
<div class="col m-span-12 px">
|
|
491
|
+
<k-card label="Output">
|
|
492
|
+
<k-calendar></k-calendar>
|
|
493
|
+
</k-card>
|
|
494
|
+
</div>
|
|
495
|
+
</div>
|
|
496
|
+
|
|
497
|
+
<h3 id="defaultValue"><a href="#defaultValue" class="no-link">Default Value</a></h3>
|
|
498
|
+
<p>Set an initial date with the <code>value</code> attribute. The calendar opens on that month.</p>
|
|
499
|
+
<div class="row -mx">
|
|
500
|
+
<div class="col m-span-12 px">
|
|
501
|
+
<k-card label="HTML">
|
|
502
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-calendar</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2026-07-04"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-calendar</span>></span></code></pre>
|
|
503
|
+
</k-card>
|
|
504
|
+
</div>
|
|
505
|
+
<div class="col m-span-12 px">
|
|
506
|
+
<k-card label="Output">
|
|
507
|
+
<k-calendar value="2026-07-04"></k-calendar>
|
|
508
|
+
</k-card>
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
|
|
512
|
+
<h3 id="rangeMode"><a href="#rangeMode" class="no-link">Range Mode</a></h3>
|
|
513
|
+
<p>Set <code>mode="range"</code> to enable range selection. The first click sets the start date, the second sets the end. Hovering after the start shows a preview range. Clicking again starts a new range.</p>
|
|
514
|
+
<div class="row -mx">
|
|
515
|
+
<div class="col m-span-12 px">
|
|
516
|
+
<k-card label="HTML">
|
|
517
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-calendar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"range"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-calendar</span>></span></code></pre>
|
|
518
|
+
</k-card>
|
|
519
|
+
</div>
|
|
520
|
+
<div class="col m-span-12 px">
|
|
521
|
+
<k-card label="Output">
|
|
522
|
+
<k-calendar mode="range"></k-calendar>
|
|
523
|
+
</k-card>
|
|
524
|
+
</div>
|
|
525
|
+
</div>
|
|
526
|
+
|
|
527
|
+
<h3 id="rangeDefault"><a href="#rangeDefault" class="no-link">Range Default</a></h3>
|
|
528
|
+
<p>In range mode the <code>value</code> is two ISO dates separated by a comma. Both bounds are included in the range.</p>
|
|
529
|
+
<div class="row -mx">
|
|
530
|
+
<div class="col m-span-12 px">
|
|
531
|
+
<k-card label="HTML">
|
|
532
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-calendar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2026-04-10,2026-04-20"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-calendar</span>></span></code></pre>
|
|
533
|
+
</k-card>
|
|
534
|
+
</div>
|
|
535
|
+
<div class="col m-span-12 px">
|
|
536
|
+
<k-card label="Output">
|
|
537
|
+
<k-calendar mode="range" value="2026-04-10,2026-04-20"></k-calendar>
|
|
538
|
+
</k-card>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
|
|
542
|
+
<h3 id="minMax"><a href="#minMax" class="no-link">Min / Max</a></h3>
|
|
543
|
+
<p>Constrain the selectable range with the <code>min</code> and <code>max</code> attributes. Both accept an ISO date (<code>YYYY-MM-DD</code>) or one of the keywords <code>today</code>, <code>tomorrow</code>, <code>yesterday</code>. When omitted, <code>min</code> defaults to <code>1900-01-01</code> and <code>max</code> defaults to December 31st of the year 10 years from now. Dates outside the range are shown disabled, and the year dropdown is scoped to the available years.</p>
|
|
544
|
+
<div class="row -mx">
|
|
545
|
+
<div class="col m-span-12 px">
|
|
546
|
+
<k-card label="HTML">
|
|
547
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-calendar</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2026-04-15"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"2026-04-05"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"2026-04-25"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-calendar</span>></span></code></pre>
|
|
548
|
+
</k-card>
|
|
549
|
+
</div>
|
|
550
|
+
<div class="col m-span-12 px">
|
|
551
|
+
<k-card label="Output">
|
|
552
|
+
<k-calendar value="2026-04-15" min="2026-04-05" max="2026-04-25"></k-calendar>
|
|
553
|
+
</k-card>
|
|
554
|
+
</div>
|
|
555
|
+
</div>
|
|
556
|
+
|
|
557
|
+
<h4>Appointment Scheduler (no past dates)</h4>
|
|
558
|
+
<p>Use <code>min="today"</code> or <code>min="tomorrow"</code> to lock out past dates in scheduling flows.</p>
|
|
559
|
+
<div class="row -mx">
|
|
560
|
+
<div class="col m-span-12 px">
|
|
561
|
+
<k-card label="HTML">
|
|
562
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-calendar</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"tomorrow"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-calendar</span>></span></code></pre>
|
|
563
|
+
</k-card>
|
|
564
|
+
</div>
|
|
565
|
+
<div class="col m-span-12 px">
|
|
566
|
+
<k-card label="Output">
|
|
567
|
+
<k-calendar min="tomorrow"></k-calendar>
|
|
568
|
+
</k-card>
|
|
569
|
+
</div>
|
|
570
|
+
</div>
|
|
571
|
+
|
|
572
|
+
<h3 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h3>
|
|
573
|
+
<p>Listen for the <code>change</code> event. The <code>detail.value</code> is the selected date (or comma-separated range).</p>
|
|
574
|
+
<div class="row -mx">
|
|
575
|
+
<div class="col m-span-12 px">
|
|
576
|
+
<k-card label="HTML">
|
|
577
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-calendar</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jsCal"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-calendar</span>></span><br><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Selected: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jsCalOutput"</span>></span>(none)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><br> <span class="hljs-keyword">const</span> $cal = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'jsCal'</span>);<br> <span class="hljs-keyword">const</span> $out = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'jsCalOutput'</span>);<br> $cal.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {<br> $out.<span class="hljs-property">textContent</span> = e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span> || <span class="hljs-string">'(none)'</span>;<br> });<br></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
578
|
+
</k-card>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="col m-span-12 px">
|
|
581
|
+
<k-card label="Output">
|
|
582
|
+
<k-calendar id="jsCal" class="mb"></k-calendar>
|
|
583
|
+
<p>Selected: <span id="jsCalOutput">(none)</span></p>
|
|
584
|
+
<script>
|
|
585
|
+
const $cal = document.getElementById('jsCal');
|
|
586
|
+
const $out = document.getElementById('jsCalOutput');
|
|
587
|
+
$cal.addEventListener('change', (e) => {
|
|
588
|
+
$out.textContent = e.detail.value || '(none)';
|
|
589
|
+
});
|
|
590
|
+
</script>
|
|
591
|
+
</k-card>
|
|
592
|
+
</div>
|
|
593
|
+
</div>
|
|
594
|
+
|
|
595
|
+
<h3 id="formUsage"><a href="#formUsage" class="no-link">Form Usage</a></h3>
|
|
596
|
+
<p>The calendar is form-associated. Set a <code>name</code> so it participates in form submission. In range mode the submitted value is the comma-separated pair.</p>
|
|
597
|
+
<div class="row -mx">
|
|
598
|
+
<div class="col m-span-12 px">
|
|
599
|
+
<k-card label="HTML">
|
|
600
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"calForm"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Checkin / Checkout:<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-calendar</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"stay"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2026-05-01,2026-05-07"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-calendar</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"></<span class="hljs-name">form</span>></span><br><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Form Data: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"calFormOutput"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><br> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'calForm'</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'submit'</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {<br> e.<span class="hljs-title function_">preventDefault</span>();<br> <span class="hljs-keyword">const</span> fd = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FormData</span>(e.<span class="hljs-property">target</span>);<br> <span class="hljs-keyword">const</span> entries = [...fd.<span class="hljs-title function_">entries</span>()].<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">[k, v]</span>) =></span> k + <span class="hljs-string">'='</span> + v);<br> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'calFormOutput'</span>).<span class="hljs-property">textContent</span> = entries.<span class="hljs-title function_">join</span>(<span class="hljs-string">', '</span>);<br> });<br></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
601
|
+
</k-card>
|
|
602
|
+
</div>
|
|
603
|
+
<div class="col m-span-12 px">
|
|
604
|
+
<k-card label="Output">
|
|
605
|
+
<form id="calForm">
|
|
606
|
+
<label>Checkin / Checkout:</label>
|
|
607
|
+
<k-calendar name="stay" mode="range" value="2026-05-01,2026-05-07"></k-calendar>
|
|
608
|
+
<div class="mt">
|
|
609
|
+
<button type="submit">Submit</button>
|
|
610
|
+
</div>
|
|
611
|
+
</form>
|
|
612
|
+
<p>Form Data: <span id="calFormOutput"></span></p>
|
|
613
|
+
<script>
|
|
614
|
+
document.getElementById('calForm').addEventListener('submit', (e) => {
|
|
615
|
+
e.preventDefault();
|
|
616
|
+
const fd = new FormData(e.target);
|
|
617
|
+
const entries = [...fd.entries()].map(([k, v]) => k + '=' + v);
|
|
618
|
+
document.getElementById('calFormOutput').textContent = entries.join(', ');
|
|
619
|
+
});
|
|
620
|
+
</script>
|
|
621
|
+
</k-card>
|
|
622
|
+
</div>
|
|
623
|
+
</div>
|
|
624
|
+
|
|
625
|
+
<h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
|
|
626
|
+
<p>The <code>disabled</code> attribute prevents user interaction.</p>
|
|
627
|
+
<div class="row -mx">
|
|
628
|
+
<div class="col m-span-12 px">
|
|
629
|
+
<k-card label="HTML">
|
|
630
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-calendar</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2026-04-15"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-calendar</span>></span></code></pre>
|
|
631
|
+
</k-card>
|
|
632
|
+
</div>
|
|
633
|
+
<div class="col m-span-12 px">
|
|
634
|
+
<k-card label="Output">
|
|
635
|
+
<k-calendar disabled value="2026-04-15"></k-calendar>
|
|
636
|
+
</k-card>
|
|
637
|
+
</div>
|
|
638
|
+
</div>
|
|
639
|
+
|
|
640
|
+
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
641
|
+
|
|
642
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
643
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
644
|
+
<h5><code>new Calendar()</code></h5>
|
|
645
|
+
|
|
646
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
647
|
+
<ul>
|
|
648
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
649
|
+
</ul>
|
|
650
|
+
|
|
651
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
652
|
+
<h5><code>value<i>: String</i></code></h5>
|
|
653
|
+
<p>In single mode, the selected date as <code>YYYY-MM-DD</code>. In range mode, two comma-separated ISO dates (e.g. <code>"2026-05-01,2026-05-07"</code>). Empty string when no selection. Syncs to <code>value</code> attribute.</p>
|
|
654
|
+
|
|
655
|
+
<h5><code>name<i>: String</i></code></h5>
|
|
656
|
+
<p>The form field name. When set inside a <code><form></code>, the component participates in form submission. Syncs to <code>name</code> attribute.</p>
|
|
657
|
+
|
|
658
|
+
<h5><code>mode<i>: String</i></code></h5>
|
|
659
|
+
<p>Either <code>"single"</code> (default) or <code>"range"</code>. Controls how clicks build the <code>value</code>. Syncs to <code>mode</code> attribute.</p>
|
|
660
|
+
|
|
661
|
+
<h5><code>min<i>: String</i></code></h5>
|
|
662
|
+
<p>Lower bound (inclusive) as <code>YYYY-MM-DD</code> or the keyword <code>today</code>, <code>tomorrow</code>, or <code>yesterday</code>. Dates before this are disabled and removed from the year dropdown. Default is <code>"1900-01-01"</code>. Syncs to <code>min</code> attribute.</p>
|
|
663
|
+
|
|
664
|
+
<h5><code>max<i>: String</i></code></h5>
|
|
665
|
+
<p>Upper bound (inclusive) as <code>YYYY-MM-DD</code> or the keyword <code>today</code>, <code>tomorrow</code>, or <code>yesterday</code>. Dates after this are disabled. Defaults to December 31st of the year 10 years from now. Syncs to <code>max</code> attribute.</p>
|
|
666
|
+
|
|
667
|
+
<h5><code>disabled<i>: Boolean</i></code></h5>
|
|
668
|
+
<p>When <code>true</code>, the calendar cannot be changed by user interaction. Syncs to <code>disabled</code> attribute.</p>
|
|
669
|
+
|
|
670
|
+
<h5><code>required<i>: Boolean</i></code></h5>
|
|
671
|
+
<p>When <code>true</code> and no date is set, the element reports a <code>valueMissing</code> validity error for form validation. Syncs to <code>required</code> attribute.</p>
|
|
672
|
+
|
|
673
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
674
|
+
<h5><code>prevMonth()<i>: void</i></code></h5>
|
|
675
|
+
<p>Navigates the view to the previous month.</p>
|
|
676
|
+
|
|
677
|
+
<h5><code>nextMonth()<i>: void</i></code></h5>
|
|
678
|
+
<p>Navigates the view to the next month.</p>
|
|
679
|
+
|
|
680
|
+
<h5><code>goToMonth(year, month)<i>: void</i></code></h5>
|
|
681
|
+
<p>Navigates the view to the given year and zero-based month (e.g. <code>goToMonth(2026, 0)</code> for January 2026).</p>
|
|
682
|
+
|
|
683
|
+
<h5><code>goToToday()<i>: void</i></code></h5>
|
|
684
|
+
<p>Navigates the view back to the current month.</p>
|
|
685
|
+
|
|
686
|
+
<h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
|
|
687
|
+
<table class="b">
|
|
688
|
+
<thead><tr><th>Variable</th><th>Default</th><th>Description</th></tr></thead>
|
|
689
|
+
<tbody>
|
|
690
|
+
<tr><td><code>--day_size</code></td><td><code>2rem</code></td><td>Width/height of each day cell</td></tr>
|
|
691
|
+
<tr><td><code>--day_radius</code></td><td><code>var(--radius)</code></td><td>Border radius of day cells</td></tr>
|
|
692
|
+
<tr><td><code>--day_bg__selected</code></td><td><code>var(--c_primary)</code></td><td>Background color of the selected day (or range endpoints)</td></tr>
|
|
693
|
+
<tr><td><code>--day_tc__selected</code></td><td><code>white</code></td><td>Text color of the selected day</td></tr>
|
|
694
|
+
<tr><td><code>--day_bg__range</code></td><td><code>var(--c_bg__alt)</code></td><td>Background color of days inside a range</td></tr>
|
|
695
|
+
<tr><td><code>--day_bg__hover</code></td><td><code>var(--c_bg__alt)</code></td><td>Background color of days on hover</td></tr>
|
|
696
|
+
</tbody>
|
|
697
|
+
</table>
|
|
698
|
+
|
|
699
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
700
|
+
<h5><code>change</code></h5>
|
|
701
|
+
<p>Fired when the selected date (or range) changes. The event <code>detail</code> contains <code>{ value: String }</code> — an ISO date for single mode, a comma-separated pair for range mode, or an empty string when cleared.</p>
|
|
702
|
+
|
|
703
|
+
</k-main>
|
|
704
|
+
<div style="height:33vh"></div>
|
|
705
|
+
<script type="module" src="../src/components/Main.js"></script>
|
|
706
|
+
|
|
707
|
+
<script type="module" src="../src/components/Calendar.js"></script>
|
|
708
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
709
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
710
|
+
|
|
711
|
+
</body>
|
|
712
|
+
</html>
|