@operato/event-view 7.1.6 → 7.1.27
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/CHANGELOG.md +23 -0
- package/dist/src/calendar-monthly-styles.js +17 -5
- package/dist/src/calendar-monthly-styles.js.map +1 -1
- package/dist/src/calendar-monthly.d.ts +5 -0
- package/dist/src/calendar-monthly.js +68 -5
- package/dist/src/calendar-monthly.js.map +1 -1
- package/dist/src/calendar-weekly-styles.js +14 -3
- package/dist/src/calendar-weekly-styles.js.map +1 -1
- package/dist/src/calendar-weekly.d.ts +12 -0
- package/dist/src/calendar-weekly.js +83 -4
- package/dist/src/calendar-weekly.js.map +1 -1
- package/dist/src/ox-event-view.js +2 -1
- package/dist/src/ox-event-view.js.map +1 -1
- package/dist/src/types.d.ts +1 -1
- package/dist/src/types.js.map +1 -1
- package/dist/stories/index.stories.d.ts +1 -1
- package/dist/stories/index.stories.js +9 -2
- package/dist/stories/index.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/calendar-monthly-styles.ts +17 -5
- package/src/calendar-monthly.ts +88 -6
- package/src/calendar-weekly-styles.ts +14 -3
- package/src/calendar-weekly.ts +108 -4
- package/src/ox-event-view.ts +2 -1
- package/src/types.ts +1 -1
- package/stories/index.stories.ts +10 -3
- package/themes/calendar-theme.css +4 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,29 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [7.1.27](https://github.com/hatiolab/operato/compare/v7.1.26...v7.1.27) (2024-12-09)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* add select-date event for ox-event-view ([bc98db2](https://github.com/hatiolab/operato/commit/bc98db23e770e83559acf43a4f923ca9dbb48b1a))
|
|
12
|
+
* calendar css variables ([75a7eb0](https://github.com/hatiolab/operato/commit/75a7eb0c68a9d863f2b0db44152fdb9b9536ceca))
|
|
13
|
+
* calendar date range selection ([e690f2b](https://github.com/hatiolab/operato/commit/e690f2bdea1ae363b3fe379f795f60798cfca723))
|
|
14
|
+
* fetchEventsForCalendar - async 함수로 변경 ([460b545](https://github.com/hatiolab/operato/commit/460b54561494df327d6be5c870c59d045ec7d53a))
|
|
15
|
+
* ox-event-view story ([7fdf6e8](https://github.com/hatiolab/operato/commit/7fdf6e89d7958965b7e0d51fa4beb43abc3fa4ec))
|
|
16
|
+
* typo ([8175546](https://github.com/hatiolab/operato/commit/8175546ea8705dcff48b4cbe3db244eca1338283))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### [7.1.15](https://github.com/hatiolab/operato/compare/v7.1.14...v7.1.15) (2024-09-26)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### :bug: Bug Fix
|
|
24
|
+
|
|
25
|
+
* 캘린더 min-height 변수로 설정 ([4c3672c](https://github.com/hatiolab/operato/commit/4c3672ce168b14ba6e19fe182c9c12615081cef8))
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
6
29
|
### [7.1.6](https://github.com/hatiolab/operato/compare/v7.1.5...v7.1.6) (2024-09-07)
|
|
7
30
|
|
|
8
31
|
|
|
@@ -44,27 +44,36 @@ export const CalendarMonthlyStyles = css `
|
|
|
44
44
|
border: var(--calendar-monthly-border, 1px solid rgba(0, 0, 0, 0.1));
|
|
45
45
|
border-width: var(--calendar-monthly-border-width, 0 1px 1px 0px);
|
|
46
46
|
opacity: var(--calendar-monthly-opacity);
|
|
47
|
+
|
|
48
|
+
user-select: none;
|
|
49
|
+
touch-action: none;
|
|
47
50
|
}
|
|
51
|
+
|
|
48
52
|
li:nth-child(7n + 1) {
|
|
49
53
|
border-left-width: 1px;
|
|
50
54
|
}
|
|
51
55
|
|
|
52
56
|
li[day-of-week] {
|
|
53
57
|
opacity: 1;
|
|
54
|
-
background-color: var(--calendar-current-
|
|
58
|
+
background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface-variant));
|
|
59
|
+
color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));
|
|
55
60
|
padding: var(--calendar-monthly-label-padding);
|
|
56
|
-
color: var(--md-sys-color-on-secondary-container);
|
|
57
61
|
text-align: center;
|
|
58
62
|
}
|
|
59
63
|
|
|
60
64
|
li[current-month] {
|
|
61
|
-
background-color: var(--calendar-current-
|
|
62
|
-
color: var(--md-sys-color-on-
|
|
65
|
+
background-color: var(--calendar-current-month-background-color, var(--md-sys-color-surface-variant));
|
|
66
|
+
color: var(--calendar-current-month-color, var(--md-sys-color-on-surface-variant));
|
|
63
67
|
opacity: 1;
|
|
64
68
|
}
|
|
65
69
|
|
|
70
|
+
li[selected] {
|
|
71
|
+
background-color: var(--calendar-monthly-selected-background-color, var(--md-sys-color-tertiary-container));
|
|
72
|
+
color: var(--calendar-monthly-selected-color, var(--md-sys-color-on-tertiary-container));
|
|
73
|
+
}
|
|
74
|
+
|
|
66
75
|
li[date] {
|
|
67
|
-
min-height: 120px;
|
|
76
|
+
min-height: var(--calendar-monthly-date-min-height, 120px);
|
|
68
77
|
}
|
|
69
78
|
|
|
70
79
|
span[date-label] {
|
|
@@ -96,6 +105,9 @@ export const CalendarMonthlyStyles = css `
|
|
|
96
105
|
border-width: var(--calendar-monthly-event-border-width);
|
|
97
106
|
margin: var(--calendar-monthly-event-margin, 0 0 4px 0);
|
|
98
107
|
padding: var(--calendar-monthly-event-padding, 2px 4px 2px 4px);
|
|
108
|
+
|
|
109
|
+
user-select: all;
|
|
110
|
+
touch-action: all;
|
|
99
111
|
}
|
|
100
112
|
`;
|
|
101
113
|
//# sourceMappingURL=calendar-monthly-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-monthly-styles.js","sourceRoot":"","sources":["../../src/calendar-monthly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"calendar-monthly-styles.js","sourceRoot":"","sources":["../../src/calendar-monthly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarMonthlyStyles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n --md-text-button-container-height: 24px;\n }\n\n [head] {\n display: flex;\n align-items: center;\n }\n\n [this-month] {\n font-size: x-large;\n }\n\n [nav] {\n margin-left: auto;\n }\n\n ::slotted(*) {\n color: var(--md-sys-color-secondary);\n }\n\n ol {\n flex: 1;\n\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n grid-template-rows: max-content;\n\n padding: 0;\n margin: var(--calendar-monthly-ol-margin, 9px 0);\n border-top: var(--calendar-monthly-ol-top-border, 3px solid #999);\n }\n\n li {\n position: relative;\n\n min-height: 10%;\n list-style: none;\n border: var(--calendar-monthly-border, 1px solid rgba(0, 0, 0, 0.1));\n border-width: var(--calendar-monthly-border-width, 0 1px 1px 0px);\n opacity: var(--calendar-monthly-opacity);\n\n user-select: none;\n touch-action: none;\n }\n\n li:nth-child(7n + 1) {\n border-left-width: 1px;\n }\n\n li[day-of-week] {\n opacity: 1;\n background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface-variant));\n color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));\n padding: var(--calendar-monthly-label-padding);\n text-align: center;\n }\n\n li[current-month] {\n background-color: var(--calendar-current-month-background-color, var(--md-sys-color-surface-variant));\n color: var(--calendar-current-month-color, var(--md-sys-color-on-surface-variant));\n opacity: 1;\n }\n\n li[selected] {\n background-color: var(--calendar-monthly-selected-background-color, var(--md-sys-color-tertiary-container));\n color: var(--calendar-monthly-selected-color, var(--md-sys-color-on-tertiary-container));\n }\n\n li[date] {\n min-height: var(--calendar-monthly-date-min-height, 120px);\n }\n\n span[date-label] {\n display: block;\n margin: var(--calendar-monthly-date-label-margin);\n text-align: var(--calendar-monthly-label-align, left);\n }\n\n li[today] > span[date-label] {\n display: inline-block;\n background-color: var(--calendar-monthly-date-label-background-color, #cc3300);\n padding: var(--calendar-monthly-date-label-padding);\n border-radius: var(--calendar-monthly-date-label-border-radius, 999em);\n color: var(--calendar-monthly-date-label-color, #fff);\n min-width: 16px;\n text-align: center;\n }\n\n [date] div {\n display: block;\n font-size: small;\n }\n\n [event] {\n display: block;\n background-color: var(--calendar-monthly-background-color);\n color: var(--calendar-monthly-color);\n border: var(--calendar-monthly-event-border);\n border-width: var(--calendar-monthly-event-border-width);\n margin: var(--calendar-monthly-event-margin, 0 0 4px 0);\n padding: var(--calendar-monthly-event-padding, 2px 4px 2px 4px);\n\n user-select: all;\n touch-action: all;\n }\n`\n"]}
|
|
@@ -9,8 +9,13 @@ export declare class CalendarMonthly extends LitElement {
|
|
|
9
9
|
month: number;
|
|
10
10
|
calendar?: CALENDAR;
|
|
11
11
|
eventMap?: Map<Date, BizEvent[]>;
|
|
12
|
+
selections?: [Date, Date] | [];
|
|
13
|
+
pointerDownDate?: Date | null;
|
|
12
14
|
render(): import("lit-html").TemplateResult<1>;
|
|
13
15
|
updated(changes: PropertyValues<this>): Promise<void>;
|
|
16
|
+
handlePointerDown(event: PointerEvent): void;
|
|
17
|
+
handlePointerMove(event: PointerEvent): void;
|
|
18
|
+
handlePointerUp(event: PointerEvent): void;
|
|
14
19
|
moveTo(month: Dayjs): void;
|
|
15
20
|
createDaysForCurrentMonth(year: number, month: number): CALENDAR;
|
|
16
21
|
createDaysForPreviousMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR;
|
|
@@ -41,21 +41,30 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
41
41
|
<slot></slot>
|
|
42
42
|
</div>
|
|
43
43
|
|
|
44
|
-
<ol
|
|
44
|
+
<ol
|
|
45
|
+
@pointerdown=${this.handlePointerDown}
|
|
46
|
+
@pointermove=${this.handlePointerMove}
|
|
47
|
+
@pointerup=${this.handlePointerUp}
|
|
48
|
+
>
|
|
45
49
|
${WEEKDAYS.map(date => html ` <li day-of-week>${date}</li> `)}
|
|
46
|
-
${this.calendar?.map(date =>
|
|
47
|
-
|
|
50
|
+
${this.calendar?.map(date => {
|
|
51
|
+
const [from, to] = this.selections || [];
|
|
52
|
+
const { date: thisDate } = date;
|
|
53
|
+
const selected = from && to && thisDate >= from && thisDate <= to;
|
|
54
|
+
return html `
|
|
55
|
+
<li ?today=${date.today} ?current-month=${date.thisMonth} ?selected=${selected} .date=${thisDate} date>
|
|
48
56
|
<span date-label>${date.label}</span>
|
|
49
57
|
<div>
|
|
50
58
|
${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) => template ? template : html `<span event .style="border-color: ${color};">${title}</span>`)}
|
|
51
59
|
</div>
|
|
52
60
|
</li>
|
|
53
|
-
|
|
61
|
+
`;
|
|
62
|
+
})}
|
|
54
63
|
</ol>
|
|
55
64
|
`;
|
|
56
65
|
}
|
|
57
66
|
async updated(changes) {
|
|
58
|
-
if (changes.has('year') || changes.has('month')) {
|
|
67
|
+
if (changes.has('year') || changes.has('month') || changes.has('eventProvider')) {
|
|
59
68
|
const currentMonth = this.createDaysForCurrentMonth(this.year, this.month);
|
|
60
69
|
const calendar = [
|
|
61
70
|
...this.createDaysForPreviousMonth(this.year, this.month, currentMonth),
|
|
@@ -66,6 +75,54 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
66
75
|
this.calendar = calendar;
|
|
67
76
|
}
|
|
68
77
|
}
|
|
78
|
+
handlePointerDown(event) {
|
|
79
|
+
const target = event.target;
|
|
80
|
+
if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
const dateElement = target.closest('[date]');
|
|
84
|
+
const from = dateElement.date;
|
|
85
|
+
this.pointerDownDate = from;
|
|
86
|
+
// 캡처를 설정하지 않음(Touch 디바이스에서 중요)
|
|
87
|
+
target.releasePointerCapture(event.pointerId);
|
|
88
|
+
event.preventDefault();
|
|
89
|
+
}
|
|
90
|
+
handlePointerMove(event) {
|
|
91
|
+
const from = this.pointerDownDate;
|
|
92
|
+
if (!from) {
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
const target = event.target;
|
|
96
|
+
const dateElement = target.closest('[date]');
|
|
97
|
+
if (!dateElement) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
const date = dateElement.date;
|
|
101
|
+
this.selections = from > date ? [date, from] : [from, date];
|
|
102
|
+
// 캡처를 설정하지 않음(Touch 디바이스에서 중요)
|
|
103
|
+
target.releasePointerCapture(event.pointerId);
|
|
104
|
+
event.preventDefault();
|
|
105
|
+
}
|
|
106
|
+
handlePointerUp(event) {
|
|
107
|
+
const from = this.pointerDownDate;
|
|
108
|
+
this.pointerDownDate = null;
|
|
109
|
+
if (!from) {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
const target = event.target;
|
|
113
|
+
const dateElement = target.closest('[date]');
|
|
114
|
+
if (!dateElement) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
const date = dateElement.date;
|
|
118
|
+
this.selections = from > date ? [date, from] : [from, date];
|
|
119
|
+
this.dispatchEvent(new CustomEvent('select-date', {
|
|
120
|
+
detail: this.selections,
|
|
121
|
+
bubbles: true,
|
|
122
|
+
composed: true
|
|
123
|
+
}));
|
|
124
|
+
event.preventDefault();
|
|
125
|
+
}
|
|
69
126
|
moveTo(month) {
|
|
70
127
|
this.year = month.year();
|
|
71
128
|
this.month = month.month();
|
|
@@ -129,6 +186,12 @@ __decorate([
|
|
|
129
186
|
__decorate([
|
|
130
187
|
state()
|
|
131
188
|
], CalendarMonthly.prototype, "eventMap", void 0);
|
|
189
|
+
__decorate([
|
|
190
|
+
state()
|
|
191
|
+
], CalendarMonthly.prototype, "selections", void 0);
|
|
192
|
+
__decorate([
|
|
193
|
+
state()
|
|
194
|
+
], CalendarMonthly.prototype, "pointerDownDate", void 0);
|
|
132
195
|
CalendarMonthly = __decorate([
|
|
133
196
|
customElement('calendar-monthly')
|
|
134
197
|
], CalendarMonthly);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-monthly.js","sourceRoot":"","sources":["../../src/calendar-monthly.ts"],"names":[],"mappings":";AAAA,OAAO,qCAAqC,CAAA;AAE5C,OAAO,KAAgB,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAsB,QAAQ,EAAiB,OAAO,EAAE,MAAM,SAAS,CAAA;AAGvE,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAKI,SAAI,GAAW,KAAK,EAAE,CAAC,IAAI,EAAE,CAAA;QAC7B,UAAK,GAAW,KAAK,EAAE,CAAC,KAAK,EAAE,CAAA;IAyH1C,CAAC;aA9HQ,WAAM,GAAG,CAAC,qBAAqB,CAAC,AAA1B,CAA0B;IASvC,MAAM;QACJ,OAAO,IAAI,CAAA;;6BAEc,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI;;;;qBAI9E,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAA;QAC7E,CAAC;;;;qBAIQ,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;QAClE,CAAC;;;;qBAIQ,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAA;QACxE,CAAC;;;;;;;;;UASH,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,oBAAoB,IAAI,QAAQ,CAAC;UAC1D,IAAI,CAAC,QAAQ,EAAE,GAAG,CAClB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;yBACG,IAAI,CAAC,KAAK,mBAAmB,IAAI,CAAC,SAAS;iCACnC,IAAI,CAAC,KAAK;;kBAEzB,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC1E,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,qCAAqC,KAAK,MAAM,KAAK,SAAS,CACzF;;;WAGN,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAA6B;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAChD,MAAM,YAAY,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;YAE1E,MAAM,QAAQ,GAAG;gBACf,GAAG,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC;gBACvE,GAAG,YAAY;gBACf,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC;aACpE,CAAA;YAED,IAAI,CAAC,QAAQ,GAAG,MAAM,IAAI,CAAC,aAAa,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAA;YAC1E,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QAC1B,CAAC;IACH,CAAC;IAED,MAAM,CAAC,KAAY;QACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;QACxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAC5B,CAAC;IAED,yBAAyB,CAAC,IAAY,EAAE,KAAa;QACnD,OAAO,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAClF,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA;YAC7C,MAAM,KAAK,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;YAChF,OAAO;gBACL,IAAI;gBACJ,KAAK;gBACL,SAAS,EAAE,IAAI;gBACf,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC;aACrB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,0BAA0B,CAAC,IAAY,EAAE,KAAa,EAAE,YAAsB;QAC5E,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAA;QAE1E,MAAM,oCAAoC,GAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAS,CAAC,OAAO,EAAE,CAAA;QAE3F,MAAM,iCAAiC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;aAClE,QAAQ,CAAC,oCAAoC,EAAE,KAAK,CAAC;aACrD,IAAI,EAAE,CAAA;QAET,OAAO,CAAC,GAAG,KAAK,CAAC,oCAAoC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACzE,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE,EAAE,iCAAiC,GAAG,KAAK,CAAC,CAAA;YAC7G,MAAM,KAAK,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;YAChF,OAAO;gBACL,IAAI;gBACJ,KAAK;gBACL,SAAS,EAAE,KAAK;gBAChB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC;aACrB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,sBAAsB,CAAC,IAAY,EAAE,KAAa,EAAE,YAAsB;QACxE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAA;QAEjE,MAAM,gCAAgC,GAAG,CAAC,GAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAS,CAAC,OAAO,EAAE,CAAA;QAEjH,OAAO,CAAC,GAAG,KAAK,CAAC,gCAAgC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACrE,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,SAAS,CAAC,KAAK,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA;YACrE,MAAM,KAAK,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;YAChF,OAAO;gBACL,IAAI;gBACJ,KAAK;gBACL,SAAS,EAAE,KAAK;gBAChB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC;aACrB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;;AA3H2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA8B;AAEhD;IAAR,KAAK,EAAE;6CAA8B;AAC7B;IAAR,KAAK,EAAE;8CAAgC;AAC/B;IAAR,KAAK,EAAE;iDAAoB;AACnB;IAAR,KAAK,EAAE;iDAAiC;AAR9B,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CA+H3B","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { CalendarMonthlyStyles } from './calendar-monthly-styles'\nimport { BizEvent, CALENDAR, WEEKDAYS, EventProvider, isToday } from './types'\n\n@customElement('calendar-monthly')\nexport class CalendarMonthly extends LitElement {\n static styles = [CalendarMonthlyStyles]\n\n @property({ type: Object }) eventProvider?: EventProvider\n\n @state() year: number = dayjs().year()\n @state() month: number = dayjs().month()\n @state() calendar?: CALENDAR\n @state() eventMap?: Map<Date, BizEvent[]>\n\n render() {\n return html`\n <div head>\n <div this-month><b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year}</div>\n\n <div nav>\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'))\n }}\n ><</md-text-button\n >\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs(new Date(dayjs().year(), dayjs().month(), 1)))\n }}\n >Today</md-text-button\n >\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).add(1, 'month'))\n }}\n >></md-text-button\n >\n </div>\n\n <slot></slot>\n </div>\n\n <ol>\n ${WEEKDAYS.map(date => html` <li day-of-week>${date}</li> `)}\n ${this.calendar?.map(\n date => html`\n <li ?today=${date.today} ?current-month=${date.thisMonth} date>\n <span date-label>${date.label}</span>\n <div>\n ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n template ? template : html`<span event .style=\"border-color: ${color};\">${title}</span>`\n )}\n </div>\n </li>\n `\n )}\n </ol>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('year') || changes.has('month')) {\n const currentMonth = this.createDaysForCurrentMonth(this.year, this.month)\n\n const calendar = [\n ...this.createDaysForPreviousMonth(this.year, this.month, currentMonth),\n ...currentMonth,\n ...this.createDaysForNextMonth(this.year, this.month, currentMonth)\n ]\n\n this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)\n this.calendar = calendar\n }\n }\n\n moveTo(month: Dayjs) {\n this.year = month.year()\n this.month = month.month()\n }\n\n createDaysForCurrentMonth(year: number, month: number): CALENDAR {\n return [...Array(dayjs(new Date(year, month, 1)).daysInMonth())].map((day, index) => {\n const date = new Date(year, month, index + 1)\n const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n return {\n date,\n label,\n thisMonth: true,\n today: isToday(date)\n }\n })\n }\n\n createDaysForPreviousMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n const previousMonth = dayjs(new Date(year, month, 1)).subtract(1, 'month')\n\n const visibleNumberOfDaysFromPreviousMonth = (dayjs(currentMonth[0].date) as any).weekday()\n\n const previousMonthLastMondayDayOfMonth = dayjs(currentMonth[0].date)\n .subtract(visibleNumberOfDaysFromPreviousMonth, 'day')\n .date()\n\n return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => {\n const date = new Date(previousMonth.year(), previousMonth.month(), previousMonthLastMondayDayOfMonth + index)\n const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n return {\n date,\n label,\n thisMonth: false,\n today: isToday(date)\n }\n })\n }\n\n createDaysForNextMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n const nextMonth = dayjs(new Date(year, month, 1)).add(1, 'month')\n\n const visibleNumberOfDaysFromNextMonth = 6 - (dayjs(new Date(year, month, currentMonth.length)) as any).weekday()\n\n return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => {\n const date = new Date(nextMonth.year(), nextMonth.month(), index + 1)\n const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n return {\n date,\n label,\n thisMonth: false,\n today: isToday(date)\n }\n })\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"calendar-monthly.js","sourceRoot":"","sources":["../../src/calendar-monthly.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { CalendarMonthlyStyles } from './calendar-monthly-styles'\nimport { BizEvent, CALENDAR, WEEKDAYS, EventProvider, isToday } from './types'\n\n@customElement('calendar-monthly')\nexport class CalendarMonthly extends LitElement {\n static styles = [CalendarMonthlyStyles]\n\n @property({ type: Object }) eventProvider?: EventProvider\n\n @state() year: number = dayjs().year()\n @state() month: number = dayjs().month()\n @state() calendar?: CALENDAR\n @state() eventMap?: Map<Date, BizEvent[]>\n @state() selections?: [Date, Date] | []\n\n @state() pointerDownDate?: Date | null\n\n render() {\n return html`\n <div head>\n <div this-month><b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year}</div>\n\n <div nav>\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'))\n }}\n ><</md-text-button\n >\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs(new Date(dayjs().year(), dayjs().month(), 1)))\n }}\n >Today</md-text-button\n >\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).add(1, 'month'))\n }}\n >></md-text-button\n >\n </div>\n\n <slot></slot>\n </div>\n\n <ol\n @pointerdown=${this.handlePointerDown}\n @pointermove=${this.handlePointerMove}\n @pointerup=${this.handlePointerUp}\n >\n ${WEEKDAYS.map(date => html` <li day-of-week>${date}</li> `)}\n ${this.calendar?.map(date => {\n const [from, to] = this.selections || ([] as any)\n const { date: thisDate } = date\n const selected = from && to && thisDate >= from && thisDate <= to\n\n return html`\n <li ?today=${date.today} ?current-month=${date.thisMonth} ?selected=${selected} .date=${thisDate} date>\n <span date-label>${date.label}</span>\n <div>\n ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n template ? template : html`<span event .style=\"border-color: ${color};\">${title}</span>`\n )}\n </div>\n </li>\n `\n })}\n </ol>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('year') || changes.has('month') || changes.has('eventProvider')) {\n const currentMonth = this.createDaysForCurrentMonth(this.year, this.month)\n\n const calendar = [\n ...this.createDaysForPreviousMonth(this.year, this.month, currentMonth),\n ...currentMonth,\n ...this.createDaysForNextMonth(this.year, this.month, currentMonth)\n ]\n\n this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)\n this.calendar = calendar\n }\n }\n\n handlePointerDown(event: PointerEvent) {\n const target = event.target as HTMLElement\n\n if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {\n return\n }\n\n const dateElement = target.closest('[date]') as HTMLElement\n const from = (dateElement as any).date\n\n this.pointerDownDate = from\n\n // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n target.releasePointerCapture(event.pointerId)\n\n event.preventDefault()\n }\n\n handlePointerMove(event: PointerEvent) {\n const from = this.pointerDownDate\n\n if (!from) {\n return\n }\n\n const target = event.target as HTMLElement\n const dateElement = target.closest('[date]') as HTMLElement\n\n if (!dateElement) {\n return\n }\n\n const date = (dateElement as any).date\n this.selections = from > date ? [date, from] : [from, date]\n\n // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n target.releasePointerCapture(event.pointerId)\n\n event.preventDefault()\n }\n\n handlePointerUp(event: PointerEvent) {\n const from = this.pointerDownDate\n\n this.pointerDownDate = null\n\n if (!from) {\n return\n }\n\n const target = event.target as HTMLElement\n const dateElement = target.closest('[date]') as HTMLElement\n\n if (!dateElement) {\n return\n }\n\n const date = (dateElement as any).date\n this.selections = from > date ? [date, from] : [from, date]\n\n this.dispatchEvent(\n new CustomEvent('select-date', {\n detail: this.selections,\n bubbles: true,\n composed: true\n })\n )\n\n event.preventDefault()\n }\n\n moveTo(month: Dayjs) {\n this.year = month.year()\n this.month = month.month()\n }\n\n createDaysForCurrentMonth(year: number, month: number): CALENDAR {\n return [...Array(dayjs(new Date(year, month, 1)).daysInMonth())].map((day, index) => {\n const date = new Date(year, month, index + 1)\n const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n return {\n date,\n label,\n thisMonth: true,\n today: isToday(date)\n }\n })\n }\n\n createDaysForPreviousMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n const previousMonth = dayjs(new Date(year, month, 1)).subtract(1, 'month')\n\n const visibleNumberOfDaysFromPreviousMonth = (dayjs(currentMonth[0].date) as any).weekday()\n\n const previousMonthLastMondayDayOfMonth = dayjs(currentMonth[0].date)\n .subtract(visibleNumberOfDaysFromPreviousMonth, 'day')\n .date()\n\n return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => {\n const date = new Date(previousMonth.year(), previousMonth.month(), previousMonthLastMondayDayOfMonth + index)\n const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n return {\n date,\n label,\n thisMonth: false,\n today: isToday(date)\n }\n })\n }\n\n createDaysForNextMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n const nextMonth = dayjs(new Date(year, month, 1)).add(1, 'month')\n\n const visibleNumberOfDaysFromNextMonth = 6 - (dayjs(new Date(year, month, currentMonth.length)) as any).weekday()\n\n return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => {\n const date = new Date(nextMonth.year(), nextMonth.month(), index + 1)\n const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n return {\n date,\n label,\n thisMonth: false,\n today: isToday(date)\n }\n })\n }\n}\n"]}
|
|
@@ -50,6 +50,9 @@ export const CalendarWeeklyStyles = css `
|
|
|
50
50
|
border: var(--calendar-weekly-border, 1px solid rgba(0, 0, 0, 0.1));
|
|
51
51
|
border-width: var(--calendar-weekly-border-width, 0 1px 1px 0px);
|
|
52
52
|
opacity: var(--calendar-weekly-opacity);
|
|
53
|
+
|
|
54
|
+
user-select: none;
|
|
55
|
+
touch-action: none;
|
|
53
56
|
}
|
|
54
57
|
|
|
55
58
|
li:nth-child(7n + 1) {
|
|
@@ -58,17 +61,22 @@ export const CalendarWeeklyStyles = css `
|
|
|
58
61
|
|
|
59
62
|
li[day-of-week] {
|
|
60
63
|
opacity: 1;
|
|
61
|
-
background-color: var(--calendar-current-week-background-color,
|
|
64
|
+
background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface-variant));
|
|
65
|
+
color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));
|
|
62
66
|
padding: var(--calendar-weekly-label-padding);
|
|
63
|
-
color: rgba(var(--secondary-color-rgb), 0.8);
|
|
64
67
|
text-align: center;
|
|
65
68
|
}
|
|
66
69
|
|
|
67
70
|
li[current-week] {
|
|
68
|
-
background-color: var(--calendar-current-
|
|
71
|
+
background-color: var(--calendar-current-week-background-color, #fff);
|
|
69
72
|
opacity: 1;
|
|
70
73
|
}
|
|
71
74
|
|
|
75
|
+
li[selected] {
|
|
76
|
+
background-color: var(--calendar-weekly-selected-background-color, var(--md-sys-color-tertiary-container));
|
|
77
|
+
color: var(--calendar-weekly-selected-color, var(--md-sys-color-on-tertiary-container));
|
|
78
|
+
}
|
|
79
|
+
|
|
72
80
|
span[date-label] {
|
|
73
81
|
display: block;
|
|
74
82
|
margin: var(--calendar-weekly-date-label-margin);
|
|
@@ -97,6 +105,9 @@ export const CalendarWeeklyStyles = css `
|
|
|
97
105
|
border-width: var(--calendar-weekly-event-border-width);
|
|
98
106
|
margin: var(--calendar-weekly-event-margin, 0 0 4px 0);
|
|
99
107
|
padding: var(--calendar-weekly-event-padding, 2px 4px 2px 4px);
|
|
108
|
+
|
|
109
|
+
user-select: all;
|
|
110
|
+
touch-action: all;
|
|
100
111
|
}
|
|
101
112
|
`;
|
|
102
113
|
//# sourceMappingURL=calendar-weekly-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-weekly-styles.js","sourceRoot":"","sources":["../../src/calendar-weekly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"calendar-weekly-styles.js","sourceRoot":"","sources":["../../src/calendar-weekly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GtC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarWeeklyStyles = css`\n :host {\n display: flex;\n flex-direction: column;\n color: var(--calendar-weekly-text-color, #585858);\n\n --md-text-button-container-height: 24px;\n --md-sys-color-primary: rgba(var(--secondary-color-rgb), 0.8);\n }\n\n [head] {\n display: flex;\n align-items: center;\n }\n\n [head-week] {\n display: flex;\n align-items: left;\n }\n\n [this-week] {\n font-size: x-large;\n }\n\n [nav] {\n margin-left: auto;\n }\n\n ::slotted(*) {\n color: var(--md-sys-color-primary);\n }\n\n ol {\n flex: 1;\n\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n grid-template-rows: max-content;\n\n padding: 0;\n margin: var(--calendar-weekly-ol-margin, 9px 0);\n border-top: var(--calendar-weekly-ol-top-border, 3px solid #999);\n }\n\n li {\n position: relative;\n\n list-style: none;\n border: var(--calendar-weekly-border, 1px solid rgba(0, 0, 0, 0.1));\n border-width: var(--calendar-weekly-border-width, 0 1px 1px 0px);\n opacity: var(--calendar-weekly-opacity);\n\n user-select: none;\n touch-action: none;\n }\n\n li:nth-child(7n + 1) {\n border-left-width: 1px;\n }\n\n li[day-of-week] {\n opacity: 1;\n background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface-variant));\n color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));\n padding: var(--calendar-weekly-label-padding);\n text-align: center;\n }\n\n li[current-week] {\n background-color: var(--calendar-current-week-background-color, #fff);\n opacity: 1;\n }\n\n li[selected] {\n background-color: var(--calendar-weekly-selected-background-color, var(--md-sys-color-tertiary-container));\n color: var(--calendar-weekly-selected-color, var(--md-sys-color-on-tertiary-container));\n }\n\n span[date-label] {\n display: block;\n margin: var(--calendar-weekly-date-label-margin);\n text-align: var(--calendar-weekly-label-align, center);\n }\n\n li[today] > span[date-label] {\n display: inline-block;\n background-color: var(--calendar-weekly-date-label-background-color, #cc3300);\n padding: var(--calendar-weekly-date-label-padding);\n border-radius: var(--calendar-weekly-date-label-border-radius, 999em);\n color: var(--calendar-weekly-date-label-color, #fff);\n min-width: 16px;\n text-align: center;\n }\n\n [date] div {\n display: block;\n font-size: small;\n }\n\n [event] {\n display: block;\n background-color: var(--calendar-weekly-background-color);\n border: var(--calendar-weekly-event-border);\n border-width: var(--calendar-weekly-event-border-width);\n margin: var(--calendar-weekly-event-margin, 0 0 4px 0);\n padding: var(--calendar-weekly-event-padding, 2px 4px 2px 4px);\n\n user-select: all;\n touch-action: all;\n }\n`\n"]}
|
|
@@ -10,9 +10,21 @@ export declare class CalendarWeekly extends LitElement {
|
|
|
10
10
|
week: number;
|
|
11
11
|
calendar?: CALENDAR;
|
|
12
12
|
eventMap?: Map<Date, BizEvent[]>;
|
|
13
|
+
selections?: [Date, Date];
|
|
14
|
+
pointerDownDate?: Date | null;
|
|
13
15
|
render(): import("lit-html").TemplateResult<1>;
|
|
14
16
|
updated(changes: PropertyValues<this>): Promise<void>;
|
|
15
17
|
moveTo(year: number, month: number, week: number): void;
|
|
18
|
+
handlePointerDown(event: PointerEvent): void;
|
|
19
|
+
handlePointerMove(event: PointerEvent): void;
|
|
20
|
+
handlePointerUp(event: PointerEvent): void;
|
|
21
|
+
selectDate(date: {
|
|
22
|
+
label: string;
|
|
23
|
+
date: Date;
|
|
24
|
+
thisMonth?: boolean;
|
|
25
|
+
thisWeek?: boolean;
|
|
26
|
+
today?: boolean;
|
|
27
|
+
}): void;
|
|
16
28
|
getLastDateOfWeek(year: number, week: number): Dayjs;
|
|
17
29
|
createDaysForCurrentWeek(year: number, week: number): CALENDAR;
|
|
18
30
|
}
|
|
@@ -48,14 +48,26 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
48
48
|
<slot></slot>
|
|
49
49
|
</div>
|
|
50
50
|
|
|
51
|
-
<ol
|
|
51
|
+
<ol
|
|
52
|
+
@pointerdown=${this.handlePointerDown}
|
|
53
|
+
@pointermove=${this.handlePointerMove}
|
|
54
|
+
@pointerup=${this.handlePointerUp}
|
|
55
|
+
>
|
|
52
56
|
${this.calendar?.map((date, index) => {
|
|
57
|
+
const [from, to] = this.selections || [];
|
|
58
|
+
const { date: thisDate } = date;
|
|
59
|
+
const selected = from && to && thisDate >= from && thisDate <= to;
|
|
53
60
|
return html `
|
|
54
|
-
<li ?today=${date.today} day-of-week
|
|
61
|
+
<li ?today=${date.today} day-of-week date .date=${thisDate} ?selected=${selected}>
|
|
62
|
+
<span date-label>${date.label}(${WEEKDAYS[index]})</span>
|
|
63
|
+
</li>
|
|
55
64
|
`;
|
|
56
65
|
})}
|
|
57
66
|
${this.calendar?.map(date => {
|
|
58
|
-
|
|
67
|
+
const [from, to] = this.selections || [];
|
|
68
|
+
const { date: thisDate } = date;
|
|
69
|
+
const selected = from && to && thisDate >= from && thisDate <= to;
|
|
70
|
+
return html `<li date .date=${thisDate} ?selected=${selected}>
|
|
59
71
|
<div>
|
|
60
72
|
${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) => template ? template : html `<span event .style="border-color: ${color};">${title}</span>`)}
|
|
61
73
|
</div>
|
|
@@ -65,7 +77,7 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
65
77
|
`;
|
|
66
78
|
}
|
|
67
79
|
async updated(changes) {
|
|
68
|
-
if (changes.has('year') || changes.has('month') || changes.has('week')) {
|
|
80
|
+
if (changes.has('year') || changes.has('month') || changes.has('week') || changes.has('eventProvider')) {
|
|
69
81
|
const calendar = this.createDaysForCurrentWeek(this.year, this.week);
|
|
70
82
|
this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar);
|
|
71
83
|
this.calendar = calendar;
|
|
@@ -76,6 +88,67 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
76
88
|
this.month = month;
|
|
77
89
|
this.week = week;
|
|
78
90
|
}
|
|
91
|
+
handlePointerDown(event) {
|
|
92
|
+
const target = event.target;
|
|
93
|
+
if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const dateElement = target.closest('[date]');
|
|
97
|
+
const from = dateElement.date;
|
|
98
|
+
this.pointerDownDate = from;
|
|
99
|
+
// 캡처를 설정하지 않음(Touch 디바이스에서 중요)
|
|
100
|
+
target.releasePointerCapture(event.pointerId);
|
|
101
|
+
event.preventDefault();
|
|
102
|
+
}
|
|
103
|
+
handlePointerMove(event) {
|
|
104
|
+
const from = this.pointerDownDate;
|
|
105
|
+
if (!from) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
const target = event.target;
|
|
109
|
+
const dateElement = target.closest('[date]');
|
|
110
|
+
if (!dateElement) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
const date = dateElement.date;
|
|
114
|
+
this.selections = from > date ? [date, from] : [from, date];
|
|
115
|
+
// 캡처를 설정하지 않음(Touch 디바이스에서 중요)
|
|
116
|
+
target.releasePointerCapture(event.pointerId);
|
|
117
|
+
event.preventDefault();
|
|
118
|
+
}
|
|
119
|
+
handlePointerUp(event) {
|
|
120
|
+
const from = this.pointerDownDate;
|
|
121
|
+
this.pointerDownDate = null;
|
|
122
|
+
if (!from) {
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
const target = event.target;
|
|
126
|
+
const dateElement = target.closest('[date]');
|
|
127
|
+
if (!dateElement) {
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
const date = dateElement.date;
|
|
131
|
+
this.selections = from > date ? [date, from] : [from, date];
|
|
132
|
+
this.dispatchEvent(new CustomEvent('select-date', {
|
|
133
|
+
detail: this.selections,
|
|
134
|
+
bubbles: true,
|
|
135
|
+
composed: true
|
|
136
|
+
}));
|
|
137
|
+
event.preventDefault();
|
|
138
|
+
}
|
|
139
|
+
selectDate(date) {
|
|
140
|
+
if (date) {
|
|
141
|
+
this.selections = [date.date, date.date];
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
this.selections = undefined;
|
|
145
|
+
}
|
|
146
|
+
this.dispatchEvent(new CustomEvent('select-date', {
|
|
147
|
+
detail: date,
|
|
148
|
+
bubbles: true,
|
|
149
|
+
composed: true
|
|
150
|
+
}));
|
|
151
|
+
}
|
|
79
152
|
getLastDateOfWeek(year, week) {
|
|
80
153
|
const firstWeekLastDay = dayjs(new Date(year, 0, 1)).endOf('w');
|
|
81
154
|
week -= 1; // one-based week, so need the minus-one
|
|
@@ -116,6 +189,12 @@ __decorate([
|
|
|
116
189
|
__decorate([
|
|
117
190
|
state()
|
|
118
191
|
], CalendarWeekly.prototype, "eventMap", void 0);
|
|
192
|
+
__decorate([
|
|
193
|
+
state()
|
|
194
|
+
], CalendarWeekly.prototype, "selections", void 0);
|
|
195
|
+
__decorate([
|
|
196
|
+
state()
|
|
197
|
+
], CalendarWeekly.prototype, "pointerDownDate", void 0);
|
|
119
198
|
CalendarWeekly = __decorate([
|
|
120
199
|
customElement('calendar-weekly')
|
|
121
200
|
], CalendarWeekly);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-weekly.js","sourceRoot":"","sources":["../../src/calendar-weekly.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { CalendarWeeklyStyles } from './calendar-weekly-styles'\nimport { BizEvent, CALENDAR, WEEKDAYS, EventProvider, isToday } from './types'\n\n@customElement('calendar-weekly')\nexport class CalendarWeekly extends LitElement {\n static styles = [CalendarWeeklyStyles]\n\n @property({ type: Object }) eventProvider?: EventProvider\n\n @state() year: number = dayjs().year()\n @state() month: number = dayjs().month()\n @state() week: number = dayjs().week()\n @state() calendar?: CALENDAR\n @state() eventMap?: Map<Date, BizEvent[]>\n\n render() {\n return html`\n <div head>\n <div this-week>\n <b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year} <b>Week ${this.week}</b>\n </div>\n\n <div nav>\n <md-text-button\n @click=${() => {\n const dayJs = this.getLastDateOfWeek(this.year, this.week)\n const prevWeek = dayJs.subtract(1, 'week')\n this.moveTo(prevWeek.year(), prevWeek.month(), prevWeek.week())\n }}\n ><</md-text-button\n >\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs().year(), dayjs().month(), dayjs().week())\n }}\n >Today</md-text-button\n >\n <md-text-button\n @click=${() => {\n const dayJs = this.getLastDateOfWeek(this.year, this.week)\n const nextWeek = dayJs.add(1, 'week')\n this.moveTo(nextWeek.year(), nextWeek.month(), nextWeek.week())\n }}\n >></md-text-button\n >\n </div>\n\n <slot></slot>\n </div>\n\n <ol>\n ${this.calendar?.map((date, index) => {\n return html`\n <li ?today=${date.today} day-of-week><span date-label>${date.label}(${WEEKDAYS[index]})</span></li>\n `\n })}\n ${this.calendar?.map(date => {\n return html`<li date>\n <div>\n ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n template ? template : html`<span event .style=\"border-color: ${color};\">${title}</span>`\n )}\n </div>\n </li>`\n })}\n </ol>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('year') || changes.has('month') || changes.has('week')) {\n const calendar = this.createDaysForCurrentWeek(this.year, this.week)\n\n this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)\n this.calendar = calendar\n }\n }\n\n moveTo(year: number, month: number, week: number) {\n this.year = year\n this.month = month\n this.week = week\n }\n\n getLastDateOfWeek(year: number, week: number): Dayjs {\n const firstWeekLastDay = dayjs(new Date(year, 0, 1)).endOf('w')\n week -= 1 // one-based week, so need the minus-one\n return firstWeekLastDay.add(week, 'w')\n }\n\n createDaysForCurrentWeek(year: number, week: number): CALENDAR {\n const lastDayjs = this.getLastDateOfWeek(year, week)\n const weekDays = 7\n\n return [...Array(weekDays)]\n .map((day, index) => {\n const date = new Date(lastDayjs.year(), lastDayjs.month(), lastDayjs.date() - index)\n const label = dayjs(date).format('MM-DD')\n return {\n date,\n label,\n thisWeek: true,\n today: isToday(date)\n }\n })\n .reverse()\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"calendar-weekly.js","sourceRoot":"","sources":["../../src/calendar-weekly.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { CalendarWeeklyStyles } from './calendar-weekly-styles'\nimport { BizEvent, CALENDAR, WEEKDAYS, EventProvider, isToday } from './types'\n\n@customElement('calendar-weekly')\nexport class CalendarWeekly extends LitElement {\n static styles = [CalendarWeeklyStyles]\n\n @property({ type: Object }) eventProvider?: EventProvider\n\n @state() year: number = dayjs().year()\n @state() month: number = dayjs().month()\n @state() week: number = dayjs().week()\n @state() calendar?: CALENDAR\n @state() eventMap?: Map<Date, BizEvent[]>\n @state() selections?: [Date, Date]\n\n @state() pointerDownDate?: Date | null\n\n render() {\n return html`\n <div head>\n <div this-week>\n <b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year} <b>Week ${this.week}</b>\n </div>\n\n <div nav>\n <md-text-button\n @click=${() => {\n const dayJs = this.getLastDateOfWeek(this.year, this.week)\n const prevWeek = dayJs.subtract(1, 'week')\n this.moveTo(prevWeek.year(), prevWeek.month(), prevWeek.week())\n }}\n ><</md-text-button\n >\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs().year(), dayjs().month(), dayjs().week())\n }}\n >Today</md-text-button\n >\n <md-text-button\n @click=${() => {\n const dayJs = this.getLastDateOfWeek(this.year, this.week)\n const nextWeek = dayJs.add(1, 'week')\n this.moveTo(nextWeek.year(), nextWeek.month(), nextWeek.week())\n }}\n >></md-text-button\n >\n </div>\n\n <slot></slot>\n </div>\n\n <ol\n @pointerdown=${this.handlePointerDown}\n @pointermove=${this.handlePointerMove}\n @pointerup=${this.handlePointerUp}\n >\n ${this.calendar?.map((date, index) => {\n const [from, to] = this.selections || ([] as any)\n const { date: thisDate } = date\n const selected = from && to && thisDate >= from && thisDate <= to\n\n return html`\n <li ?today=${date.today} day-of-week date .date=${thisDate} ?selected=${selected}>\n <span date-label>${date.label}(${WEEKDAYS[index]})</span>\n </li>\n `\n })}\n ${this.calendar?.map(date => {\n const [from, to] = this.selections || ([] as any)\n const { date: thisDate } = date\n const selected = from && to && thisDate >= from && thisDate <= to\n\n return html`<li date .date=${thisDate} ?selected=${selected}>\n <div>\n ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n template ? template : html`<span event .style=\"border-color: ${color};\">${title}</span>`\n )}\n </div>\n </li>`\n })}\n </ol>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('year') || changes.has('month') || changes.has('week') || changes.has('eventProvider')) {\n const calendar = this.createDaysForCurrentWeek(this.year, this.week)\n\n this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)\n this.calendar = calendar\n }\n }\n\n moveTo(year: number, month: number, week: number) {\n this.year = year\n this.month = month\n this.week = week\n }\n\n handlePointerDown(event: PointerEvent) {\n const target = event.target as HTMLElement\n\n if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {\n return\n }\n\n const dateElement = target.closest('[date]') as HTMLElement\n const from = (dateElement as any).date\n\n this.pointerDownDate = from\n\n // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n target.releasePointerCapture(event.pointerId)\n\n event.preventDefault()\n }\n\n handlePointerMove(event: PointerEvent) {\n const from = this.pointerDownDate\n\n if (!from) {\n return\n }\n\n const target = event.target as HTMLElement\n const dateElement = target.closest('[date]') as HTMLElement\n\n if (!dateElement) {\n return\n }\n\n const date = (dateElement as any).date\n this.selections = from > date ? [date, from] : [from, date]\n\n // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n target.releasePointerCapture(event.pointerId)\n\n event.preventDefault()\n }\n\n handlePointerUp(event: PointerEvent) {\n const from = this.pointerDownDate\n\n this.pointerDownDate = null\n\n if (!from) {\n return\n }\n\n const target = event.target as HTMLElement\n const dateElement = target.closest('[date]') as HTMLElement\n\n if (!dateElement) {\n return\n }\n\n const date = (dateElement as any).date\n this.selections = from > date ? [date, from] : [from, date]\n\n this.dispatchEvent(\n new CustomEvent('select-date', {\n detail: this.selections,\n bubbles: true,\n composed: true\n })\n )\n\n event.preventDefault()\n }\n\n selectDate(date: { label: string; date: Date; thisMonth?: boolean; thisWeek?: boolean; today?: boolean }) {\n if (date) {\n this.selections = [date.date, date.date]\n } else {\n this.selections = undefined\n }\n\n this.dispatchEvent(\n new CustomEvent('select-date', {\n detail: date,\n bubbles: true,\n composed: true\n })\n )\n }\n\n getLastDateOfWeek(year: number, week: number): Dayjs {\n const firstWeekLastDay = dayjs(new Date(year, 0, 1)).endOf('w')\n week -= 1 // one-based week, so need the minus-one\n return firstWeekLastDay.add(week, 'w')\n }\n\n createDaysForCurrentWeek(year: number, week: number): CALENDAR {\n const lastDayjs = this.getLastDateOfWeek(year, week)\n const weekDays = 7\n\n return [...Array(weekDays)]\n .map((day, index) => {\n const date = new Date(lastDayjs.year(), lastDayjs.month(), lastDayjs.date() - index)\n const label = dayjs(date).format('MM-DD')\n return {\n date,\n label,\n thisWeek: true,\n today: isToday(date)\n }\n })\n .reverse()\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-event-view.js","sourceRoot":"","sources":["../../src/ox-event-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,oBAAoB,CAAA;AAC3B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;
|
|
1
|
+
{"version":3,"file":"ox-event-view.js","sourceRoot":"","sources":["../../src/ox-event-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,oBAAoB,CAAA;AAC3B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAmBuB,SAAI,GAAyB,SAAS,CAAA;IAgBpE,CAAC;aAlCQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBlB,AAhBY,CAgBZ;IAKD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;4CACgC,IAAI,CAAC,aAAa;8BAChC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;;SAE1D;YACH,CAAC,CAAC,IAAI,CAAA;6CACiC,IAAI,CAAC,aAAa;8BACjC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;;SAEzD,CAAA;IACP,CAAC;;AAf2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AApB9C,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAmCvB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport './calendar-monthly'\nimport './calendar-weekly'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventProvider } from './types'\n\n@customElement('ox-event-view')\nexport class OxEventView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n calendar-weekly,\n calendar-monthly {\n flex: 1;\n\n padding: 0;\n margin: 0;\n }\n `\n\n @property({ type: String }) mode: 'monthly' | 'weekly' = 'monthly'\n @property({ type: Object }) eventProvider?: EventProvider\n\n render() {\n return this.mode == 'weekly'\n ? html`\n <calendar-weekly .eventProvider=${this.eventProvider}>\n <md-icon @click=${(e: Event) => (this.mode = 'monthly')}>calendar_month</md-icon>\n </calendar-weekly>\n `\n : html`\n <calendar-monthly .eventProvider=${this.eventProvider}>\n <md-icon @click=${(e: Event) => (this.mode = 'weekly')}>calendar_view_week</md-icon>\n </calendar-monthly>\n `\n }\n}\n"]}
|
package/dist/src/types.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export type CALENDAR = {
|
|
|
14
14
|
today?: boolean;
|
|
15
15
|
}[];
|
|
16
16
|
export interface EventProvider {
|
|
17
|
-
fetchEventsForCalendar(calendar: CALENDAR): Map<Date, BizEvent[]
|
|
17
|
+
fetchEventsForCalendar(calendar: CALENDAR): Promise<Map<Date, BizEvent[]>>;
|
|
18
18
|
}
|
|
19
19
|
export declare const WEEKDAYS: string[];
|
|
20
20
|
export declare function isToday(date: Date): boolean;
|
package/dist/src/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,iBAAiB,CAAA;AACnC,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,UAAU,MAAM,6BAA6B,CAAA;AAEpD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AACrB,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;AAsBxB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAEzE,MAAM,UAAU,OAAO,CAAC,IAAU;IAChC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAA;IACxB,OAAO,CACL,IAAI,CAAC,OAAO,EAAE,IAAI,KAAK,CAAC,OAAO,EAAE;QACjC,IAAI,CAAC,QAAQ,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE;QACnC,IAAI,CAAC,WAAW,EAAE,IAAI,KAAK,CAAC,WAAW,EAAE,CAC1C,CAAA;AACH,CAAC","sourcesContent":["import { TemplateResult } from 'lit'\nimport dayjs from 'dayjs/esm/index'\nimport weekday from 'dayjs/esm/plugin/weekday'\nimport weekOfYear from 'dayjs/esm/plugin/weekOfYear'\n\ndayjs.extend(weekday)\ndayjs.extend(weekOfYear)\n\nexport type BizEvent = {\n due?: string\n title: string\n color: string\n clickEvent?: any\n template?: TemplateResult\n}\n\nexport type CALENDAR = {\n label: string\n date: Date\n thisMonth?: boolean\n thisWeek?: boolean\n today?: boolean\n}[]\n\nexport interface EventProvider {\n fetchEventsForCalendar(calendar: CALENDAR): Map<Date, BizEvent[]
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,iBAAiB,CAAA;AACnC,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,UAAU,MAAM,6BAA6B,CAAA;AAEpD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AACrB,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;AAsBxB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAEzE,MAAM,UAAU,OAAO,CAAC,IAAU;IAChC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAA;IACxB,OAAO,CACL,IAAI,CAAC,OAAO,EAAE,IAAI,KAAK,CAAC,OAAO,EAAE;QACjC,IAAI,CAAC,QAAQ,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE;QACnC,IAAI,CAAC,WAAW,EAAE,IAAI,KAAK,CAAC,WAAW,EAAE,CAC1C,CAAA;AACH,CAAC","sourcesContent":["import { TemplateResult } from 'lit'\nimport dayjs from 'dayjs/esm/index'\nimport weekday from 'dayjs/esm/plugin/weekday'\nimport weekOfYear from 'dayjs/esm/plugin/weekOfYear'\n\ndayjs.extend(weekday)\ndayjs.extend(weekOfYear)\n\nexport type BizEvent = {\n due?: string\n title: string\n color: string\n clickEvent?: any\n template?: TemplateResult\n}\n\nexport type CALENDAR = {\n label: string\n date: Date\n thisMonth?: boolean\n thisWeek?: boolean\n today?: boolean\n}[]\n\nexport interface EventProvider {\n fetchEventsForCalendar(calendar: CALENDAR): Promise<Map<Date, BizEvent[]>>\n}\n\nexport const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n\nexport function isToday(date: Date) {\n const today = new Date()\n return (\n date.getDate() == today.getDate() &&\n date.getMonth() == today.getMonth() &&\n date.getFullYear() == today.getFullYear()\n )\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../src/ox-event-view.js';
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
class SampleEventProvider {
|
|
4
|
-
fetchEventsForCalendar(calendar) {
|
|
4
|
+
async fetchEventsForCalendar(calendar) {
|
|
5
5
|
const map = new Map();
|
|
6
6
|
calendar.forEach(({ date }) => map.set(date, [
|
|
7
7
|
{
|
|
@@ -84,7 +84,14 @@ const Template = ({ mode = 'monthly' }) => html `
|
|
|
84
84
|
rel="stylesheet"
|
|
85
85
|
/>
|
|
86
86
|
|
|
87
|
-
<ox-event-view
|
|
87
|
+
<ox-event-view
|
|
88
|
+
mode="${mode}"
|
|
89
|
+
.eventProvider=${new SampleEventProvider()}
|
|
90
|
+
@select-date=${(e) => {
|
|
91
|
+
console.log(e.detail);
|
|
92
|
+
}}
|
|
93
|
+
>
|
|
94
|
+
</ox-event-view>
|
|
88
95
|
`;
|
|
89
96
|
export const Regular = Template.bind({});
|
|
90
97
|
Regular.args = {
|