Skip to content

Commit 12a145f

Browse files
mrholekmrholek
committed
feat(Calendar, DatePicker, DateRangePicker): allow to select weeks, months, and years
1 parent 0fcc959 commit 12a145f

File tree

9 files changed

+594
-151
lines changed

9 files changed

+594
-151
lines changed

‎docs/assets/js/snippets.js

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,76 @@
221221
}
222222
// js-docs-end multi-select-array-data
223223

224+
// -------------------------------
225+
// Calendars
226+
// -------------------------------
227+
// 'Calendars components' example in docs only
228+
229+
const myCalendar = document.getElementById('myCalendar')
230+
if (myCalendar) {
231+
new coreui.Calendar(myCalendar)
232+
233+
myCalendar.addEventListener('startDateChange.coreui.calendar', event => {
234+
// eslint-disable-next-line no-console
235+
console.log(event.date)
236+
})
237+
238+
myCalendar.addEventListener('endDateChange.coreui.calendar', event => {
239+
// eslint-disable-next-line no-console
240+
console.log(event.date)
241+
})
242+
}
243+
244+
const myCalendarWeek = document.getElementById('myCalendarWeek')
245+
if (myCalendarWeek) {
246+
new coreui.Calendar(myCalendarWeek)
247+
248+
myCalendarWeek.addEventListener('startDateChange.coreui.calendar', event => {
249+
// eslint-disable-next-line no-console
250+
console.log(event.date)
251+
})
252+
253+
myCalendarWeek.addEventListener('endDateChange.coreui.calendar', event => {
254+
// eslint-disable-next-line no-console
255+
console.log(event.date)
256+
})
257+
258+
myCalendarWeek.addEventListener('cellHover.coreui.calendar', event => {
259+
// eslint-disable-next-line no-console
260+
console.log(event.date)
261+
})
262+
}
263+
264+
const myCalendarMonth = document.getElementById('myCalendarMonth')
265+
if (myCalendarMonth) {
266+
new coreui.Calendar(myCalendarMonth)
267+
268+
myCalendarMonth.addEventListener('startDateChange.coreui.calendar', event => {
269+
// eslint-disable-next-line no-console
270+
console.log(event.date)
271+
})
272+
273+
myCalendarMonth.addEventListener('endDateChange.coreui.calendar', event => {
274+
// eslint-disable-next-line no-console
275+
console.log(event.date)
276+
})
277+
}
278+
279+
const myCalendarYear = document.getElementById('myCalendarYear')
280+
if (myCalendarYear) {
281+
new coreui.Calendar(myCalendarYear)
282+
283+
myCalendarYear.addEventListener('startDateChange.coreui.calendar', event => {
284+
// eslint-disable-next-line no-console
285+
console.log(event.date)
286+
})
287+
288+
myCalendarYear.addEventListener('endDateChange.coreui.calendar', event => {
289+
// eslint-disable-next-line no-console
290+
console.log(event.date)
291+
})
292+
}
293+
224294
// -------------------------------
225295
// Date Pickers
226296
// -------------------------------
@@ -242,7 +312,7 @@
242312
minDate: new Date(2022, 1, 1)
243313
}
244314

245-
new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), optionsDatePickerDisabledDates)
315+
new coreui.DatePicker(myDatePickerDisabledDates, optionsDatePickerDisabledDates)
246316
}
247317
// js-docs-end date-picker-disabled-dates
248318

‎docs/content/components/calendar.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
layout: docs
3+
title: Bootstrap calendar
4+
description: Create consistent cross-browser and cross-device calendar.
5+
group: components
6+
toc: true
7+
---
8+
9+
## Example
10+
11+
### Days
12+
13+
{{< example >}}
14+
<div class="d-flex">
15+
<div id="myCalendar" class="border rounded" data-coreui-show-week-number="true" data-coreui-show-adjacement-days="true" data-coreui-start-date="2021/08/02" data-coreui-end-date="2021/08/12" data-coreui-calendars="2" data-coreui-range="true"></div>
16+
</div>
17+
{{< /example >}}
18+
19+
### Weeks
20+
21+
{{< example >}}
22+
<div class="d-flex">
23+
<div id="myCalendarWeek" class="border rounded" data-coreui-show-week-number="true" data-coreui-show-adjacement-days="true" data-coreui-start-date="2025W07" data-coreui-end-date="2025W12" data-coreui-calendars="2" data-coreui-range="true" data-coreui-selection-type="week"></div>
24+
</div>
25+
{{< /example >}}
26+
27+
### Months
28+
29+
{{< example >}}
30+
<div class="d-flex">
31+
<div
32+
id="myCalendarMonth"
33+
class="border rounded"
34+
data-coreui-show-week-number="true"
35+
data-coreui-start-date="2022-8"
36+
data-coreui-end-date="2023-8"
37+
data-coreui-calendars="2"
38+
data-coreui-range="true"
39+
data-coreui-selection-type="month">
40+
</div>
41+
</div>
42+
{{< /example >}}
43+
44+
### Years
45+
46+
{{< example >}}
47+
<div class="d-flex">
48+
<div id="myCalendarYear" class="border rounded" data-coreui-show-week-number="true" data-coreui-show-adjacement-days="true" data-coreui-start-date="2022" data-coreui-end-date="2024" data-coreui-calendars="2" data-coreui-range="true" data-coreui-selection-type="year"></div>
49+
</div>
50+
{{< /example >}}
51+
52+
## Customizing
53+
54+
### CSS variables
55+
56+
Calendar use local CSS variables on .accordion for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
57+
58+
{{< scss-docs name="calendar-css-vars" file="scss/_calendar.scss" >}}
59+
60+
### SASS variables
61+
62+
{{< scss-docs name="calendar-variables" file="scss/_variables.scss" >}}

‎docs/content/forms/date-picker.md

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ other_frameworks: date-picker
1010

1111
## Example
1212

13+
### Days
14+
1315
{{< example >}}
1416
<div class="row">
1517
<div class="col-lg-4">
@@ -21,7 +23,7 @@ other_frameworks: date-picker
2123
</div>
2224
{{< /example >}}
2325

24-
### With footer
26+
#### With footer
2527

2628
{{< example >}}
2729
<div class="row">
@@ -34,7 +36,7 @@ other_frameworks: date-picker
3436
</div>
3537
{{< /example >}}
3638

37-
### With timepicker
39+
#### With timepicker
3840

3941
{{< example >}}
4042
<div class="row">
@@ -47,6 +49,74 @@ other_frameworks: date-picker
4749
</div>
4850
{{< /example >}}
4951

52+
### Weeks
53+
54+
{{< example >}}
55+
<div class="row">
56+
<div class="col-lg-5">
57+
<div
58+
data-coreui-locale="en-US"
59+
data-coreui-toggle="date-picker"
60+
data-coreui-show-week-number="true"
61+
data-coreui-selection-type="week">
62+
</div>
63+
</div>
64+
<div class="col-lg-5">
65+
<div
66+
data-coreui-date="2025W07"
67+
data-coreui-locale="en-US"
68+
data-coreui-toggle="date-picker"
69+
data-coreui-show-week-number="true"
70+
data-coreui-selection-type="week">
71+
</div>
72+
</div>
73+
</div>
74+
{{< /example >}}
75+
76+
### Months
77+
78+
{{< example >}}
79+
<div class="row">
80+
<div class="col-lg-5">
81+
<div
82+
data-coreui-locale="en-US"
83+
data-coreui-toggle="date-picker"
84+
data-coreui-selection-type="month">
85+
</div>
86+
</div>
87+
<div class="col-lg-5">
88+
<div
89+
data-coreui-date="2022-8"
90+
data-coreui-locale="en-US"
91+
data-coreui-toggle="date-picker"
92+
data-coreui-selection-type="month">
93+
</div>
94+
</div>
95+
</div>
96+
{{< /example >}}
97+
98+
### Years
99+
100+
{{< example >}}
101+
<div class="row">
102+
<div class="col-lg-5">
103+
<div
104+
data-coreui-locale="en-US"
105+
data-coreui-toggle="date-picker"
106+
data-coreui-selection-type="year">
107+
</div>
108+
</div>
109+
<div class="col-lg-5">
110+
<div
111+
data-coreui-date="2022"
112+
data-coreui-locale="en-US"
113+
data-coreui-toggle="date-picker"
114+
data-coreui-selection-type="year">
115+
</div>
116+
</div>
117+
</div>
118+
{{< /example >}}
119+
50120
## Sizing
51121

52122
Set heights using `data-coreui-size` attribute like `data-coreui-size="lg"` and `data-coreui-size="sm"`.
@@ -222,13 +292,16 @@ const datePickerList = datePickerElementList.map(datePickerEl => {
222292
| `name` | string | `null` | Set the name attribute for the input element. |
223293
| `placeholder` | string | `'Select time'` | Specifies a short hint that is visible in the input. |
224294
| `selectAdjacementDays` | boolean | `false` | Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true. |
295+
| `selectionType` | `'day'` \| `'week'` \| `'month'` \| `'year'` | `day` | Specify the type of date selection as day, week, month, or year. |
225296
| `showAdjacementDays` | boolean | `true` | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. |
297+
| `showWeekNumber` | boolean | `false` | Set whether to display week numbers in the calendar. |
226298
| `size` | `'sm'` \| `'lg'` | `null` | Size the component small or large. |
227299
| `timepicker` | boolean | `false` | Provide an additional time selection by adding select boxes to choose times. |
228300
| `todayButton` | string | `'Today'` | Today button inner HTML |
229301
| `todayButtonClasses` | array \| string | `['btn', 'btn-sm', 'me-2']` | CSS class names that will be added to the today button |
230302
| `valid` | boolean | `false` | Toggle the valid state for the component. |
231303
| `weekdayFormat` | number \| 'long' \| 'narrow' \| 'short' | `2` | Set length or format of day name. |
304+
| `weekNumbersLabel` | string | `null` | Label displayed over week numbers in the calendar. |
232305
{{< /bs-table >}}
233306

234307
### Methods

0 commit comments

Comments
 (0)