@operato/event-view 1.2.21 → 1.2.23
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 +21 -0
- package/dist/src/calendar-monthly-styles.js +6 -1
- package/dist/src/calendar-monthly-styles.js.map +1 -1
- package/dist/src/calendar-monthly.d.ts +5 -12
- package/dist/src/calendar-monthly.js +27 -29
- package/dist/src/calendar-monthly.js.map +1 -1
- package/dist/src/calendar-weekly-styles.js +2 -2
- package/dist/src/calendar-weekly-styles.js.map +1 -1
- package/dist/src/calendar-weekly.d.ts +5 -12
- package/dist/src/calendar-weekly.js +22 -30
- package/dist/src/calendar-weekly.js.map +1 -1
- package/dist/src/common.d.ts +15 -0
- package/dist/src/common.js +13 -0
- package/dist/src/common.js.map +1 -0
- package/dist/src/event-provider.d.ts +2 -3
- package/dist/src/event-provider.js.map +1 -1
- package/dist/src/index.d.ts +2 -1
- package/dist/src/index.js +2 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-event-view.d.ts +2 -0
- package/dist/src/ox-event-view.js +5 -3
- package/dist/src/ox-event-view.js.map +1 -1
- package/dist/src/sample-event-provider.d.ts +3 -2
- package/dist/src/sample-event-provider.js +100 -4
- package/dist/src/sample-event-provider.js.map +1 -1
- package/dist/src/types.d.ts +20 -0
- package/dist/src/types.js +13 -0
- package/dist/src/types.js.map +1 -0
- package/dist/stories/index.stories.js +54 -1
- package/dist/stories/index.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -2
- package/src/calendar-monthly-styles.ts +6 -1
- package/src/calendar-monthly.ts +24 -44
- package/src/calendar-weekly-styles.ts +2 -2
- package/src/calendar-weekly.ts +18 -45
- package/src/index.ts +2 -1
- package/src/ox-event-view.ts +4 -3
- package/src/types.ts +38 -0
- package/stories/index.stories.ts +60 -2
- package/themes/calendar-theme.css +1 -2
- package/src/biz-event.ts +0 -6
- package/src/event-provider.ts +0 -6
- package/src/sample-event-provider.ts +0 -116
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,27 @@
|
|
|
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
|
+
### [1.2.23](https://github.com/hatiolab/operato/compare/v1.2.22...v1.2.23) (2023-04-15)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* support async fetch for calendar items ([6c865e1](https://github.com/hatiolab/operato/commit/6c865e1f5e4c98803d08bd01ff4db081bd91dced))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [1.2.22](https://github.com/hatiolab/operato/compare/v1.2.21...v1.2.22) (2023-04-15)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* calendar event template ([c200f1e](https://github.com/hatiolab/operato/commit/c200f1eee16ac5260bac5a091017bbc1e97cb6e4))
|
|
21
|
+
* min-height for monthly calendar date ([6e08b28](https://github.com/hatiolab/operato/commit/6e08b28efd1c9985a3c1ed3ab1950f856aae58b1))
|
|
22
|
+
* prev/next button style of calendar ([3ed149a](https://github.com/hatiolab/operato/commit/3ed149a756101c99f21e26e6655523c668f70e85))
|
|
23
|
+
* tweak event-view ([a94624e](https://github.com/hatiolab/operato/commit/a94624e38162aa17c53efc77b7a43b054c70d2b9))
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
6
27
|
### [1.2.21](https://github.com/hatiolab/operato/compare/v1.2.20...v1.2.21) (2023-04-14)
|
|
7
28
|
|
|
8
29
|
|
|
@@ -34,6 +34,7 @@ export const CalendarMonthlyStyles = css `
|
|
|
34
34
|
li {
|
|
35
35
|
position: relative;
|
|
36
36
|
|
|
37
|
+
min-height: 10%;
|
|
37
38
|
list-style: none;
|
|
38
39
|
border: var(--calendar-monthly-border, 1px solid rgba(0, 0, 0, 0.1));
|
|
39
40
|
border-width: var(--calendar-monthly-border-width, 0 1px 1px 0px);
|
|
@@ -56,6 +57,10 @@ export const CalendarMonthlyStyles = css `
|
|
|
56
57
|
opacity: 1;
|
|
57
58
|
}
|
|
58
59
|
|
|
60
|
+
li[date] {
|
|
61
|
+
min-height: 120px;
|
|
62
|
+
}
|
|
63
|
+
|
|
59
64
|
span[date-label] {
|
|
60
65
|
display: block;
|
|
61
66
|
margin: var(--calendar-monthly-date-label-margin);
|
|
@@ -66,7 +71,7 @@ export const CalendarMonthlyStyles = css `
|
|
|
66
71
|
display: inline-block;
|
|
67
72
|
background-color: var(--calendar-monthly-date-label-background-color, #cc3300);
|
|
68
73
|
padding: var(--calendar-monthly-date-label-padding);
|
|
69
|
-
border-radius: var(--calendar-monthly-date-label-border-radius,
|
|
74
|
+
border-radius: var(--calendar-monthly-date-label-border-radius, 999em);
|
|
70
75
|
color: var(--calendar-monthly-date-label-color, #fff);
|
|
71
76
|
min-width: 16px;
|
|
72
77
|
text-align: center;
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarMonthlyStyles = css`\n :host {\n display: flex;\n flex-direction: column;\n color: var(--calendar-monthly-text-color, #585858);\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 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 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-monty-background-color, #fff);\n padding: var(--calendar-monthly-label-padding);\n color: rgba(var(--secondary-color-rgb), 0.8);\n text-align: center;\n }\n\n li[current-month] {\n background-color: var(--calendar-current-monthly-background-color, #fff);\n opacity: 1;\n }\n\n li[date] {\n 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 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`\n"]}
|
|
@@ -1,24 +1,17 @@
|
|
|
1
1
|
import { Dayjs } from 'dayjs/esm/index';
|
|
2
2
|
import { LitElement, PropertyValues } from 'lit';
|
|
3
|
-
import { BizEvent } from './
|
|
4
|
-
import { EventProvider } from './event-provider';
|
|
5
|
-
type CALENDAR = {
|
|
6
|
-
label: string;
|
|
7
|
-
date: Date;
|
|
8
|
-
thisMonth: boolean;
|
|
9
|
-
today?: boolean;
|
|
10
|
-
}[];
|
|
3
|
+
import { BizEvent, CALENDAR, EventProvider } from './types';
|
|
11
4
|
export declare class CalendarMonthly extends LitElement {
|
|
12
5
|
static styles: import("lit").CSSResult[];
|
|
6
|
+
eventProvider?: EventProvider;
|
|
13
7
|
year: number;
|
|
14
8
|
month: number;
|
|
15
|
-
|
|
9
|
+
calendar?: CALENDAR;
|
|
10
|
+
eventMap?: Map<Date, BizEvent[]>;
|
|
16
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
17
|
-
updated(changes: PropertyValues<this>): void
|
|
18
|
-
findEvents(date: Date): BizEvent[];
|
|
12
|
+
updated(changes: PropertyValues<this>): Promise<void>;
|
|
19
13
|
moveTo(month: Dayjs): void;
|
|
20
14
|
createDaysForCurrentMonth(year: number, month: number): CALENDAR;
|
|
21
15
|
createDaysForPreviousMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR;
|
|
22
16
|
createDaysForNextMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR;
|
|
23
17
|
}
|
|
24
|
-
export {};
|
|
@@ -1,19 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import dayjs from 'dayjs/esm/index';
|
|
3
|
-
import weekday from 'dayjs/esm/plugin/weekday';
|
|
4
|
-
import weekOfYear from 'dayjs/esm/plugin/weekOfYear';
|
|
5
3
|
import { html, LitElement } from 'lit';
|
|
6
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
7
5
|
import { CalendarMonthlyStyles } from './calendar-monthly-styles';
|
|
8
|
-
|
|
9
|
-
dayjs.extend(weekOfYear);
|
|
10
|
-
const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
11
|
-
function isToday(date) {
|
|
12
|
-
const today = new Date();
|
|
13
|
-
return (date.getDate() == today.getDate() &&
|
|
14
|
-
date.getMonth() == today.getMonth() &&
|
|
15
|
-
date.getFullYear() == today.getFullYear());
|
|
16
|
-
}
|
|
6
|
+
import { WEEKDAYS, isToday } from './types';
|
|
17
7
|
let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
18
8
|
constructor() {
|
|
19
9
|
super(...arguments);
|
|
@@ -22,19 +12,12 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
22
12
|
}
|
|
23
13
|
static { this.styles = [CalendarMonthlyStyles]; }
|
|
24
14
|
render() {
|
|
25
|
-
const currentMonth = this.createDaysForCurrentMonth(this.year, this.month);
|
|
26
|
-
const calendar = [
|
|
27
|
-
...this.createDaysForPreviousMonth(this.year, this.month, currentMonth),
|
|
28
|
-
...currentMonth,
|
|
29
|
-
...this.createDaysForNextMonth(this.year, this.month, currentMonth)
|
|
30
|
-
];
|
|
31
15
|
return html `
|
|
32
16
|
<div head>
|
|
33
17
|
<div this-month><b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year}</div>
|
|
34
18
|
|
|
35
19
|
<div nav>
|
|
36
20
|
<mwc-button
|
|
37
|
-
outlined
|
|
38
21
|
@click=${() => {
|
|
39
22
|
this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'));
|
|
40
23
|
}}
|
|
@@ -59,20 +42,28 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
59
42
|
|
|
60
43
|
<ol>
|
|
61
44
|
${WEEKDAYS.map(date => html ` <li day-of-week>${date}</li> `)}
|
|
62
|
-
${calendar
|
|
45
|
+
${this.calendar?.map(date => html `
|
|
63
46
|
<li ?today=${date.today} ?current-month=${date.thisMonth} date>
|
|
64
47
|
<span date-label>${date.label}</span>
|
|
65
48
|
<div>
|
|
66
|
-
${this.
|
|
49
|
+
${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) => template ? template : html `<span event .style="border-color: ${color};">${title}</span>`)}
|
|
67
50
|
</div>
|
|
68
51
|
</li>
|
|
69
52
|
`)}
|
|
70
53
|
</ol>
|
|
71
54
|
`;
|
|
72
55
|
}
|
|
73
|
-
updated(changes) {
|
|
74
|
-
|
|
75
|
-
|
|
56
|
+
async updated(changes) {
|
|
57
|
+
if (changes.has('year') || changes.has('month')) {
|
|
58
|
+
const currentMonth = this.createDaysForCurrentMonth(this.year, this.month);
|
|
59
|
+
const calendar = [
|
|
60
|
+
...this.createDaysForPreviousMonth(this.year, this.month, currentMonth),
|
|
61
|
+
...currentMonth,
|
|
62
|
+
...this.createDaysForNextMonth(this.year, this.month, currentMonth)
|
|
63
|
+
];
|
|
64
|
+
this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar);
|
|
65
|
+
this.calendar = calendar;
|
|
66
|
+
}
|
|
76
67
|
}
|
|
77
68
|
moveTo(month) {
|
|
78
69
|
this.year = month.year();
|
|
@@ -98,9 +89,10 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
98
89
|
.date();
|
|
99
90
|
return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => {
|
|
100
91
|
const date = new Date(previousMonth.year(), previousMonth.month(), previousMonthLastMondayDayOfMonth + index);
|
|
92
|
+
const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D');
|
|
101
93
|
return {
|
|
102
94
|
date,
|
|
103
|
-
label
|
|
95
|
+
label,
|
|
104
96
|
thisMonth: false,
|
|
105
97
|
today: isToday(date)
|
|
106
98
|
};
|
|
@@ -122,14 +114,20 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
122
114
|
}
|
|
123
115
|
};
|
|
124
116
|
__decorate([
|
|
125
|
-
property({ type:
|
|
117
|
+
property({ type: Array })
|
|
118
|
+
], CalendarMonthly.prototype, "eventProvider", void 0);
|
|
119
|
+
__decorate([
|
|
120
|
+
state()
|
|
126
121
|
], CalendarMonthly.prototype, "year", void 0);
|
|
127
122
|
__decorate([
|
|
128
|
-
|
|
123
|
+
state()
|
|
129
124
|
], CalendarMonthly.prototype, "month", void 0);
|
|
130
125
|
__decorate([
|
|
131
|
-
|
|
132
|
-
], CalendarMonthly.prototype, "
|
|
126
|
+
state()
|
|
127
|
+
], CalendarMonthly.prototype, "calendar", void 0);
|
|
128
|
+
__decorate([
|
|
129
|
+
state()
|
|
130
|
+
], CalendarMonthly.prototype, "eventMap", void 0);
|
|
133
131
|
CalendarMonthly = __decorate([
|
|
134
132
|
customElement('calendar-monthly')
|
|
135
133
|
], CalendarMonthly);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-monthly.js","sourceRoot":"","sources":["../../src/calendar-monthly.ts"],"names":[],"mappings":"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","sourcesContent":["import dayjs, { Dayjs } from 'dayjs/esm/index'\nimport weekday from 'dayjs/esm/plugin/weekday'\nimport weekOfYear from 'dayjs/esm/plugin/weekOfYear'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { BizEvent } from './biz-event'\nimport { CalendarMonthlyStyles } from './calendar-monthly-styles'\nimport { EventProvider } from './event-provider'\n\ndayjs.extend(weekday)\ndayjs.extend(weekOfYear)\n\nconst WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n\nfunction 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\ntype CALENDAR = {\n label: string\n date: Date\n thisMonth: boolean\n today?: boolean\n}[]\n\n@customElement('calendar-monthly')\nexport class CalendarMonthly extends LitElement {\n static styles = [CalendarMonthlyStyles]\n\n @property({ type: Number }) year: number = dayjs().year()\n @property({ type: Number }) month: number = dayjs().month()\n @property({ type: Array }) eventProvider?: EventProvider\n\n render() {\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 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 <mwc-button\n outlined\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'))\n }}\n ><</mwc-button\n >\n <mwc-button\n @click=${() => {\n this.moveTo(dayjs(new Date(dayjs().year(), dayjs().month(), 1)))\n }}\n >Today</mwc-button\n >\n <mwc-button\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).add(1, 'month'))\n }}\n >></mwc-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 ${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.findEvents(date.date).map(\n event => html`<span event .style=\"border-color: ${event.color};\">${event.title}</span>`\n )}\n </div>\n </li>\n `\n )}\n </ol>\n `\n }\n\n updated(changes: PropertyValues<this>) {}\n\n findEvents(date: Date): BizEvent[] {\n return this.eventProvider?.fetchEventsForDate(date, {}) || []\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 return {\n date,\n label: dayjs(date).format('D'),\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 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: Array }) 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 <mwc-button\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'))\n }}\n ><</mwc-button\n >\n <mwc-button\n @click=${() => {\n this.moveTo(dayjs(new Date(dayjs().year(), dayjs().month(), 1)))\n }}\n >Today</mwc-button\n >\n <mwc-button\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).add(1, 'month'))\n }}\n >></mwc-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"]}
|
|
@@ -70,8 +70,8 @@ export const CalendarWeeklyStyles = css `
|
|
|
70
70
|
li[today] > span[date-label] {
|
|
71
71
|
display: inline-block;
|
|
72
72
|
background-color: var(--calendar-weekly-date-label-background-color, #cc3300);
|
|
73
|
-
|
|
74
|
-
|
|
73
|
+
padding: var(--calendar-weekly-date-label-padding);
|
|
74
|
+
border-radius: var(--calendar-weekly-date-label-border-radius, 999em);
|
|
75
75
|
color: var(--calendar-weekly-date-label-color, #fff);
|
|
76
76
|
min-width: 16px;
|
|
77
77
|
text-align: center;
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FtC,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\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 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 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, #fff);\n padding: var(--calendar-weekly-label-padding);\n color: rgba(var(--secondary-color-rgb), 0.8);\n text-align: center;\n }\n\n li[current-week] {\n background-color: var(--calendar-current-monthly-background-color, #fff);\n opacity: 1;\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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FtC,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\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 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 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, #fff);\n padding: var(--calendar-weekly-label-padding);\n color: rgba(var(--secondary-color-rgb), 0.8);\n text-align: center;\n }\n\n li[current-week] {\n background-color: var(--calendar-current-monthly-background-color, #fff);\n opacity: 1;\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`\n"]}
|
|
@@ -1,24 +1,17 @@
|
|
|
1
1
|
import { Dayjs } from 'dayjs/esm/index';
|
|
2
2
|
import { LitElement, PropertyValues } from 'lit';
|
|
3
|
-
import { BizEvent } from './
|
|
4
|
-
import { EventProvider } from './event-provider';
|
|
5
|
-
type CALENDAR = {
|
|
6
|
-
label: string;
|
|
7
|
-
date: Date;
|
|
8
|
-
thisWeek: boolean;
|
|
9
|
-
today?: boolean;
|
|
10
|
-
}[];
|
|
3
|
+
import { BizEvent, CALENDAR, EventProvider } from './types';
|
|
11
4
|
export declare class CalendarWeekly extends LitElement {
|
|
12
5
|
static styles: import("lit").CSSResult[];
|
|
6
|
+
eventProvider?: EventProvider;
|
|
13
7
|
year: number;
|
|
14
8
|
month: number;
|
|
15
9
|
week: number;
|
|
16
|
-
|
|
10
|
+
calendar?: CALENDAR;
|
|
11
|
+
eventMap?: Map<Date, BizEvent[]>;
|
|
17
12
|
render(): import("lit-html").TemplateResult<1>;
|
|
18
|
-
updated(changes: PropertyValues<this>): void
|
|
19
|
-
findEvents(date: Date): BizEvent[];
|
|
13
|
+
updated(changes: PropertyValues<this>): Promise<void>;
|
|
20
14
|
moveTo(year: number, month: number, week: number): void;
|
|
21
15
|
getLastDateOfWeek(year: number, week: number): Dayjs;
|
|
22
16
|
createDaysForCurrentWeek(year: number, week: number): CALENDAR;
|
|
23
17
|
}
|
|
24
|
-
export {};
|
|
@@ -1,19 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import dayjs from 'dayjs/esm/index';
|
|
3
|
-
import weekday from 'dayjs/esm/plugin/weekday';
|
|
4
|
-
import weekOfYear from 'dayjs/esm/plugin/weekOfYear';
|
|
5
3
|
import { html, LitElement } from 'lit';
|
|
6
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
7
5
|
import { CalendarWeeklyStyles } from './calendar-weekly-styles';
|
|
8
|
-
|
|
9
|
-
dayjs.extend(weekOfYear);
|
|
10
|
-
const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
11
|
-
function isToday(date) {
|
|
12
|
-
const today = new Date();
|
|
13
|
-
return (date.getDate() == today.getDate() &&
|
|
14
|
-
date.getMonth() == today.getMonth() &&
|
|
15
|
-
date.getFullYear() == today.getFullYear());
|
|
16
|
-
}
|
|
6
|
+
import { WEEKDAYS, isToday } from './types';
|
|
17
7
|
let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
18
8
|
constructor() {
|
|
19
9
|
super(...arguments);
|
|
@@ -23,7 +13,6 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
23
13
|
}
|
|
24
14
|
static { this.styles = [CalendarWeeklyStyles]; }
|
|
25
15
|
render() {
|
|
26
|
-
const calendar = this.createDaysForCurrentWeek(this.year, this.week);
|
|
27
16
|
return html `
|
|
28
17
|
<div head>
|
|
29
18
|
<div this-week>
|
|
@@ -32,7 +21,6 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
32
21
|
|
|
33
22
|
<div nav>
|
|
34
23
|
<mwc-button
|
|
35
|
-
outlined
|
|
36
24
|
@click=${() => {
|
|
37
25
|
const dayJs = this.getLastDateOfWeek(this.year, this.week);
|
|
38
26
|
const prevWeek = dayJs.subtract(1, 'week');
|
|
@@ -60,29 +48,27 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
60
48
|
</div>
|
|
61
49
|
|
|
62
50
|
<ol>
|
|
63
|
-
${calendar
|
|
51
|
+
${this.calendar?.map((date, index) => {
|
|
64
52
|
return html `
|
|
65
53
|
<li ?today=${date.today} day-of-week><span date-label>${date.label}(${WEEKDAYS[index]})</span></li>
|
|
66
54
|
`;
|
|
67
55
|
})}
|
|
68
|
-
${calendar
|
|
56
|
+
${this.calendar?.map(date => {
|
|
69
57
|
return html `<li day-task>
|
|
70
58
|
<div>
|
|
71
|
-
${this.
|
|
72
|
-
@click=${() => event.clickEvent(event.title, event.due)}
|
|
73
|
-
event
|
|
74
|
-
.style="border-color: ${event.color};"
|
|
75
|
-
>${event.title}</span
|
|
76
|
-
>`)}
|
|
59
|
+
${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) => template ? template : html `<span event .style="border-color: ${color};">${title}</span>`)}
|
|
77
60
|
</div>
|
|
78
61
|
</li>`;
|
|
79
62
|
})}
|
|
80
63
|
</ol>
|
|
81
64
|
`;
|
|
82
65
|
}
|
|
83
|
-
updated(changes) {
|
|
84
|
-
|
|
85
|
-
|
|
66
|
+
async updated(changes) {
|
|
67
|
+
if (changes.has('year') || changes.has('month') || changes.has('week')) {
|
|
68
|
+
const calendar = this.createDaysForCurrentWeek(this.year, this.week);
|
|
69
|
+
this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar);
|
|
70
|
+
this.calendar = calendar;
|
|
71
|
+
}
|
|
86
72
|
}
|
|
87
73
|
moveTo(year, month, week) {
|
|
88
74
|
this.year = year;
|
|
@@ -112,17 +98,23 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
112
98
|
}
|
|
113
99
|
};
|
|
114
100
|
__decorate([
|
|
115
|
-
property({ type:
|
|
101
|
+
property({ type: Array })
|
|
102
|
+
], CalendarWeekly.prototype, "eventProvider", void 0);
|
|
103
|
+
__decorate([
|
|
104
|
+
state()
|
|
116
105
|
], CalendarWeekly.prototype, "year", void 0);
|
|
117
106
|
__decorate([
|
|
118
|
-
|
|
107
|
+
state()
|
|
119
108
|
], CalendarWeekly.prototype, "month", void 0);
|
|
120
109
|
__decorate([
|
|
121
|
-
|
|
110
|
+
state()
|
|
122
111
|
], CalendarWeekly.prototype, "week", void 0);
|
|
123
112
|
__decorate([
|
|
124
|
-
|
|
125
|
-
], CalendarWeekly.prototype, "
|
|
113
|
+
state()
|
|
114
|
+
], CalendarWeekly.prototype, "calendar", void 0);
|
|
115
|
+
__decorate([
|
|
116
|
+
state()
|
|
117
|
+
], CalendarWeekly.prototype, "eventMap", void 0);
|
|
126
118
|
CalendarWeekly = __decorate([
|
|
127
119
|
customElement('calendar-weekly')
|
|
128
120
|
], CalendarWeekly);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-weekly.js","sourceRoot":"","sources":["../../src/calendar-weekly.ts"],"names":[],"mappings":";AAAA,OAAO,KAAgB,MAAM,iBAAiB,CAAA;AAC9C,OAAO,
|
|
1
|
+
{"version":3,"file":"calendar-weekly.js","sourceRoot":"","sources":["../../src/calendar-weekly.ts"],"names":[],"mappings":"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","sourcesContent":["import 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: Array }) 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 <mwc-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 ><</mwc-button\n >\n <mwc-button\n @click=${() => {\n this.moveTo(dayjs().year(), dayjs().month(), dayjs().week())\n }}\n >Today</mwc-button\n >\n <mwc-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 >></mwc-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 day-task>\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"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type BizEvent = {
|
|
2
|
+
due?: string;
|
|
3
|
+
title: string;
|
|
4
|
+
color: string;
|
|
5
|
+
clickEvent?: any;
|
|
6
|
+
};
|
|
7
|
+
export type CALENDAR = {
|
|
8
|
+
label: string;
|
|
9
|
+
date: Date;
|
|
10
|
+
thisMonth?: boolean;
|
|
11
|
+
thisWeek?: boolean;
|
|
12
|
+
today?: boolean;
|
|
13
|
+
}[];
|
|
14
|
+
export declare const WEEKDAYS: string[];
|
|
15
|
+
export declare function isToday(date: Date): boolean;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import dayjs from 'dayjs/esm/index';
|
|
2
|
+
import weekday from 'dayjs/esm/plugin/weekday';
|
|
3
|
+
import weekOfYear from 'dayjs/esm/plugin/weekOfYear';
|
|
4
|
+
dayjs.extend(weekday);
|
|
5
|
+
dayjs.extend(weekOfYear);
|
|
6
|
+
export const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
7
|
+
export function isToday(date) {
|
|
8
|
+
const today = new Date();
|
|
9
|
+
return (date.getDate() == today.getDate() &&
|
|
10
|
+
date.getMonth() == today.getMonth() &&
|
|
11
|
+
date.getFullYear() == today.getFullYear());
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/common.ts"],"names":[],"mappings":"AAAA,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;AAiBxB,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 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}\n\nexport type CALENDAR = {\n label: string\n date: Date\n thisMonth?: boolean\n thisWeek?: boolean\n today?: boolean\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,5 +1,4 @@
|
|
|
1
|
-
import { BizEvent } from './
|
|
1
|
+
import { BizEvent, CALENDAR } from './types';
|
|
2
2
|
export interface EventProvider {
|
|
3
|
-
|
|
4
|
-
fetchEventsForDuration(from: Date, to: Date, optins: any): BizEvent[];
|
|
3
|
+
fetchEventsForCalendar(calendar: CALENDAR): Map<Date, BizEvent[]>;
|
|
5
4
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"event-provider.js","sourceRoot":"","sources":["../../src/event-provider.ts"],"names":[],"mappings":"","sourcesContent":["import { BizEvent } from './
|
|
1
|
+
{"version":3,"file":"event-provider.js","sourceRoot":"","sources":["../../src/event-provider.ts"],"names":[],"mappings":"","sourcesContent":["import { BizEvent, CALENDAR } from './types'\n\nexport interface EventProvider {\n fetchEventsForCalendar(calendar: CALENDAR): Map<Date, BizEvent[]>\n}\n"]}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from './types.js';
|
|
2
|
+
export * from './ox-event-view.js';
|
package/dist/src/index.js
CHANGED
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './types.js'\nexport * from './ox-event-view.js'\n"]}
|
|
@@ -2,8 +2,10 @@ import '@material/mwc-icon';
|
|
|
2
2
|
import './calendar-monthly';
|
|
3
3
|
import './calendar-weekly';
|
|
4
4
|
import { LitElement } from 'lit';
|
|
5
|
+
import { EventProvider } from './types';
|
|
5
6
|
export declare class OxEventView extends LitElement {
|
|
6
7
|
static styles: import("lit").CSSResult;
|
|
7
8
|
mode: 'monthly' | 'weekly';
|
|
9
|
+
eventProvider?: EventProvider;
|
|
8
10
|
render(): import("lit-html").TemplateResult<1>;
|
|
9
11
|
}
|
|
@@ -4,7 +4,6 @@ import './calendar-monthly';
|
|
|
4
4
|
import './calendar-weekly';
|
|
5
5
|
import { css, html, LitElement } from 'lit';
|
|
6
6
|
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
-
import { SampleMonthlyEventProvider, SampleWeeklyEventProvider } from './sample-event-provider';
|
|
8
7
|
let OxEventView = class OxEventView extends LitElement {
|
|
9
8
|
constructor() {
|
|
10
9
|
super(...arguments);
|
|
@@ -26,12 +25,12 @@ let OxEventView = class OxEventView extends LitElement {
|
|
|
26
25
|
render() {
|
|
27
26
|
return this.mode == 'weekly'
|
|
28
27
|
? html `
|
|
29
|
-
<calendar-weekly .eventProvider=${
|
|
28
|
+
<calendar-weekly .eventProvider=${this.eventProvider}>
|
|
30
29
|
<mwc-icon @click=${(e) => (this.mode = 'monthly')}>calendar_month</mwc-icon>
|
|
31
30
|
</calendar-weekly>
|
|
32
31
|
`
|
|
33
32
|
: html `
|
|
34
|
-
<calendar-monthly .eventProvider=${
|
|
33
|
+
<calendar-monthly .eventProvider=${this.eventProvider}>
|
|
35
34
|
<mwc-icon @click=${(e) => (this.mode = 'weekly')}>calendar_view_week</mwc-icon>
|
|
36
35
|
</calendar-monthly>
|
|
37
36
|
`;
|
|
@@ -40,6 +39,9 @@ let OxEventView = class OxEventView extends LitElement {
|
|
|
40
39
|
__decorate([
|
|
41
40
|
property({ type: String })
|
|
42
41
|
], OxEventView.prototype, "mode", void 0);
|
|
42
|
+
__decorate([
|
|
43
|
+
property({ type: Array })
|
|
44
|
+
], OxEventView.prototype, "eventProvider", void 0);
|
|
43
45
|
OxEventView = __decorate([
|
|
44
46
|
customElement('ox-event-view')
|
|
45
47
|
], OxEventView);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-event-view.js","sourceRoot":"","sources":["../../src/ox-event-view.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,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;
|
|
1
|
+
{"version":3,"file":"ox-event-view.js","sourceRoot":"","sources":["../../src/ox-event-view.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,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;;QAeuB,SAAI,GAAyB,SAAS,CAAA;IAgBpE,CAAC;aA9BQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,CAAA;IAKD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;4CACgC,IAAI,CAAC,aAAa;+BAC/B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;;SAE3D;YACH,CAAC,CAAC,IAAI,CAAA;6CACiC,IAAI,CAAC,aAAa;+BAChC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;;SAE1D,CAAA;IACP,CAAC;;AAf2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuC;AACvC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA8B;AAhB7C,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA+BvB;SA/BY,WAAW","sourcesContent":["import '@material/mwc-icon'\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\n calendar-weekly {\n flex: 1;\n\n padding: 0;\n margin: 0;\n }\n `\n\n @property({ type: String }) mode: 'monthly' | 'weekly' = 'monthly'\n @property({ type: Array }) eventProvider?: EventProvider\n\n render() {\n return this.mode == 'weekly'\n ? html`\n <calendar-weekly .eventProvider=${this.eventProvider}>\n <mwc-icon @click=${(e: Event) => (this.mode = 'monthly')}>calendar_month</mwc-icon>\n </calendar-weekly>\n `\n : html`\n <calendar-monthly .eventProvider=${this.eventProvider}>\n <mwc-icon @click=${(e: Event) => (this.mode = 'weekly')}>calendar_view_week</mwc-icon>\n </calendar-monthly>\n `\n }\n}\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BizEvent, CALENDAR } from './common';
|
|
1
2
|
import { EventProvider } from './event-provider';
|
|
2
3
|
export declare class SampleMonthlyEventProvider implements EventProvider {
|
|
3
4
|
fetchEventsForDate(date: Date, options: any): {
|
|
@@ -5,7 +6,7 @@ export declare class SampleMonthlyEventProvider implements EventProvider {
|
|
|
5
6
|
title: string;
|
|
6
7
|
color: string;
|
|
7
8
|
}[];
|
|
8
|
-
|
|
9
|
+
fetchEventsForCalendar(calendar: CALENDAR): Map<Date, BizEvent[]>;
|
|
9
10
|
}
|
|
10
11
|
export declare class SampleWeeklyEventProvider implements EventProvider {
|
|
11
12
|
fetchEventsForDate(date: Date, options: any): ({
|
|
@@ -19,5 +20,5 @@ export declare class SampleWeeklyEventProvider implements EventProvider {
|
|
|
19
20
|
color: string;
|
|
20
21
|
clickEvent?: undefined;
|
|
21
22
|
})[];
|
|
22
|
-
|
|
23
|
+
fetchEventsForCalendar(calendar: CALENDAR): Map<Date, BizEvent[]>;
|
|
23
24
|
}
|