@operato/event-view 1.2.21 → 1.2.22
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 +12 -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 +1 -10
- package/dist/src/calendar-monthly.js +5 -17
- 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 +1 -10
- package/dist/src/calendar-weekly.js +3 -21
- 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 +7 -33
- package/src/calendar-weekly-styles.ts +2 -2
- package/src/calendar-weekly.ts +5 -38
- 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,18 @@
|
|
|
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.22](https://github.com/hatiolab/operato/compare/v1.2.21...v1.2.22) (2023-04-15)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* calendar event template ([c200f1e](https://github.com/hatiolab/operato/commit/c200f1eee16ac5260bac5a091017bbc1e97cb6e4))
|
|
12
|
+
* min-height for monthly calendar date ([6e08b28](https://github.com/hatiolab/operato/commit/6e08b28efd1c9985a3c1ed3ab1950f856aae58b1))
|
|
13
|
+
* prev/next button style of calendar ([3ed149a](https://github.com/hatiolab/operato/commit/3ed149a756101c99f21e26e6655523c668f70e85))
|
|
14
|
+
* tweak event-view ([a94624e](https://github.com/hatiolab/operato/commit/a94624e38162aa17c53efc77b7a43b054c70d2b9))
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
6
18
|
### [1.2.21](https://github.com/hatiolab/operato/compare/v1.2.20...v1.2.21) (2023-04-14)
|
|
7
19
|
|
|
8
20
|
|
|
@@ -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,13 +1,6 @@
|
|
|
1
1
|
import { Dayjs } from 'dayjs/esm/index';
|
|
2
2
|
import { LitElement, PropertyValues } from 'lit';
|
|
3
|
-
import {
|
|
4
|
-
import { EventProvider } from './event-provider';
|
|
5
|
-
type CALENDAR = {
|
|
6
|
-
label: string;
|
|
7
|
-
date: Date;
|
|
8
|
-
thisMonth: boolean;
|
|
9
|
-
today?: boolean;
|
|
10
|
-
}[];
|
|
3
|
+
import { CALENDAR, EventProvider } from './types';
|
|
11
4
|
export declare class CalendarMonthly extends LitElement {
|
|
12
5
|
static styles: import("lit").CSSResult[];
|
|
13
6
|
year: number;
|
|
@@ -15,10 +8,8 @@ export declare class CalendarMonthly extends LitElement {
|
|
|
15
8
|
eventProvider?: EventProvider;
|
|
16
9
|
render(): import("lit-html").TemplateResult<1>;
|
|
17
10
|
updated(changes: PropertyValues<this>): void;
|
|
18
|
-
findEvents(date: Date): BizEvent[];
|
|
19
11
|
moveTo(month: Dayjs): void;
|
|
20
12
|
createDaysForCurrentMonth(year: number, month: number): CALENDAR;
|
|
21
13
|
createDaysForPreviousMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR;
|
|
22
14
|
createDaysForNextMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR;
|
|
23
15
|
}
|
|
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
4
|
import { customElement, property } 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);
|
|
@@ -28,13 +18,13 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
28
18
|
...currentMonth,
|
|
29
19
|
...this.createDaysForNextMonth(this.year, this.month, currentMonth)
|
|
30
20
|
];
|
|
21
|
+
const eventMap = this.eventProvider?.fetchEventsForCalendar(calendar);
|
|
31
22
|
return html `
|
|
32
23
|
<div head>
|
|
33
24
|
<div this-month><b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year}</div>
|
|
34
25
|
|
|
35
26
|
<div nav>
|
|
36
27
|
<mwc-button
|
|
37
|
-
outlined
|
|
38
28
|
@click=${() => {
|
|
39
29
|
this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'));
|
|
40
30
|
}}
|
|
@@ -63,7 +53,7 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
63
53
|
<li ?today=${date.today} ?current-month=${date.thisMonth} date>
|
|
64
54
|
<span date-label>${date.label}</span>
|
|
65
55
|
<div>
|
|
66
|
-
${
|
|
56
|
+
${(eventMap?.get(date?.date) || []).map(({ title, color, template }) => template ? template : html `<span event .style="border-color: ${color};">${title}</span>`)}
|
|
67
57
|
</div>
|
|
68
58
|
</li>
|
|
69
59
|
`)}
|
|
@@ -71,9 +61,6 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
71
61
|
`;
|
|
72
62
|
}
|
|
73
63
|
updated(changes) { }
|
|
74
|
-
findEvents(date) {
|
|
75
|
-
return this.eventProvider?.fetchEventsForDate(date, {}) || [];
|
|
76
|
-
}
|
|
77
64
|
moveTo(month) {
|
|
78
65
|
this.year = month.year();
|
|
79
66
|
this.month = month.month();
|
|
@@ -98,9 +85,10 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
98
85
|
.date();
|
|
99
86
|
return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => {
|
|
100
87
|
const date = new Date(previousMonth.year(), previousMonth.month(), previousMonthLastMondayDayOfMonth + index);
|
|
88
|
+
const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D');
|
|
101
89
|
return {
|
|
102
90
|
date,
|
|
103
|
-
label
|
|
91
|
+
label,
|
|
104
92
|
thisMonth: false,
|
|
105
93
|
today: isToday(date)
|
|
106
94
|
};
|
|
@@ -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 } from 'lit/decorators.js'\n\nimport { CalendarMonthlyStyles } from './calendar-monthly-styles'\nimport { CALENDAR, WEEKDAYS, EventProvider, isToday } from './types'\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 const eventMap = this.eventProvider?.fetchEventsForCalendar(calendar)\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 @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 ${(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 updated(changes: PropertyValues<this>) {}\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,13 +1,6 @@
|
|
|
1
1
|
import { Dayjs } from 'dayjs/esm/index';
|
|
2
2
|
import { LitElement, PropertyValues } from 'lit';
|
|
3
|
-
import {
|
|
4
|
-
import { EventProvider } from './event-provider';
|
|
5
|
-
type CALENDAR = {
|
|
6
|
-
label: string;
|
|
7
|
-
date: Date;
|
|
8
|
-
thisWeek: boolean;
|
|
9
|
-
today?: boolean;
|
|
10
|
-
}[];
|
|
3
|
+
import { CALENDAR, EventProvider } from './types';
|
|
11
4
|
export declare class CalendarWeekly extends LitElement {
|
|
12
5
|
static styles: import("lit").CSSResult[];
|
|
13
6
|
year: number;
|
|
@@ -16,9 +9,7 @@ export declare class CalendarWeekly extends LitElement {
|
|
|
16
9
|
eventProvider?: EventProvider;
|
|
17
10
|
render(): import("lit-html").TemplateResult<1>;
|
|
18
11
|
updated(changes: PropertyValues<this>): void;
|
|
19
|
-
findEvents(date: Date): BizEvent[];
|
|
20
12
|
moveTo(year: number, month: number, week: number): void;
|
|
21
13
|
getLastDateOfWeek(year: number, week: number): Dayjs;
|
|
22
14
|
createDaysForCurrentWeek(year: number, week: number): CALENDAR;
|
|
23
15
|
}
|
|
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
4
|
import { customElement, property } 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);
|
|
@@ -24,6 +14,7 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
24
14
|
static { this.styles = [CalendarWeeklyStyles]; }
|
|
25
15
|
render() {
|
|
26
16
|
const calendar = this.createDaysForCurrentWeek(this.year, this.week);
|
|
17
|
+
const eventMap = this.eventProvider?.fetchEventsForCalendar(calendar);
|
|
27
18
|
return html `
|
|
28
19
|
<div head>
|
|
29
20
|
<div this-week>
|
|
@@ -32,7 +23,6 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
32
23
|
|
|
33
24
|
<div nav>
|
|
34
25
|
<mwc-button
|
|
35
|
-
outlined
|
|
36
26
|
@click=${() => {
|
|
37
27
|
const dayJs = this.getLastDateOfWeek(this.year, this.week);
|
|
38
28
|
const prevWeek = dayJs.subtract(1, 'week');
|
|
@@ -68,12 +58,7 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
68
58
|
${calendar.map(date => {
|
|
69
59
|
return html `<li day-task>
|
|
70
60
|
<div>
|
|
71
|
-
${
|
|
72
|
-
@click=${() => event.clickEvent(event.title, event.due)}
|
|
73
|
-
event
|
|
74
|
-
.style="border-color: ${event.color};"
|
|
75
|
-
>${event.title}</span
|
|
76
|
-
>`)}
|
|
61
|
+
${(eventMap?.get(date?.date) || []).map(({ title, color, template }) => template ? template : html `<span event .style="border-color: ${color};">${title}</span>`)}
|
|
77
62
|
</div>
|
|
78
63
|
</li>`;
|
|
79
64
|
})}
|
|
@@ -81,9 +66,6 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
81
66
|
`;
|
|
82
67
|
}
|
|
83
68
|
updated(changes) { }
|
|
84
|
-
findEvents(date) {
|
|
85
|
-
return this.eventProvider?.fetchEventsForDate(date, {}) || [];
|
|
86
|
-
}
|
|
87
69
|
moveTo(year, month, week) {
|
|
88
70
|
this.year = year;
|
|
89
71
|
this.month = month;
|
|
@@ -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 } from 'lit/decorators.js'\n\nimport { CalendarWeeklyStyles } from './calendar-weekly-styles'\nimport { CALENDAR, WEEKDAYS, EventProvider, isToday } from './types'\n\n@customElement('calendar-weekly')\nexport class CalendarWeekly extends LitElement {\n static styles = [CalendarWeeklyStyles]\n\n @property({ type: Number }) year: number = dayjs().year()\n @property({ type: Number }) month: number = dayjs().month()\n @property({ type: Number }) week: number = dayjs().week()\n @property({ type: Array }) eventProvider?: EventProvider\n\n render() {\n const calendar = this.createDaysForCurrentWeek(this.year, this.week)\n\n const eventMap = this.eventProvider?.fetchEventsForCalendar(calendar)\n\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 ${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 ${calendar.map(date => {\n return html`<li day-task>\n <div>\n ${(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 updated(changes: PropertyValues<this>) {}\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
|
}
|
|
@@ -48,8 +48,56 @@ export class SampleMonthlyEventProvider {
|
|
|
48
48
|
}
|
|
49
49
|
];
|
|
50
50
|
}
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
fetchEventsForCalendar(calendar) {
|
|
52
|
+
const map = new Map();
|
|
53
|
+
calendar.forEach(({ date }) => map.set(date, [
|
|
54
|
+
{
|
|
55
|
+
due: '2021-08-21',
|
|
56
|
+
title: 'HAHAHA',
|
|
57
|
+
color: 'yellow'
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
due: '2021-08-21',
|
|
61
|
+
title: 'HOHOHO',
|
|
62
|
+
color: 'lime'
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
due: '2021-08-21',
|
|
66
|
+
title: 'HIHIHI',
|
|
67
|
+
color: 'yellow'
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
due: '2021-08-21',
|
|
71
|
+
title: 'HEHEHE',
|
|
72
|
+
color: 'white'
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
due: '2021-08-21',
|
|
76
|
+
title: 'KEKEKE',
|
|
77
|
+
color: 'yellow'
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
due: '2021-08-21',
|
|
81
|
+
title: 'MEMEME',
|
|
82
|
+
color: 'orange'
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
due: '2021-08-21',
|
|
86
|
+
title: 'MOMOMO',
|
|
87
|
+
color: 'lime'
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
due: '2021-08-21',
|
|
91
|
+
title: 'QUOQUO',
|
|
92
|
+
color: 'navy'
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
due: '2021-08-21',
|
|
96
|
+
title: 'ZZXXCC',
|
|
97
|
+
color: 'gray'
|
|
98
|
+
}
|
|
99
|
+
]));
|
|
100
|
+
return map;
|
|
53
101
|
}
|
|
54
102
|
}
|
|
55
103
|
export class SampleWeeklyEventProvider {
|
|
@@ -105,8 +153,56 @@ export class SampleWeeklyEventProvider {
|
|
|
105
153
|
}
|
|
106
154
|
];
|
|
107
155
|
}
|
|
108
|
-
|
|
109
|
-
|
|
156
|
+
fetchEventsForCalendar(calendar) {
|
|
157
|
+
const map = new Map();
|
|
158
|
+
calendar.forEach(({ date }) => map.set(date, [
|
|
159
|
+
{
|
|
160
|
+
due: '2021-08-21',
|
|
161
|
+
title: 'HAHAHA',
|
|
162
|
+
color: 'yellow'
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
due: '2021-08-21',
|
|
166
|
+
title: 'HOHOHO',
|
|
167
|
+
color: 'lime'
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
due: '2021-08-21',
|
|
171
|
+
title: 'HIHIHI',
|
|
172
|
+
color: 'yellow'
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
due: '2021-08-21',
|
|
176
|
+
title: 'HEHEHE',
|
|
177
|
+
color: 'white'
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
due: '2021-08-21',
|
|
181
|
+
title: 'KEKEKE',
|
|
182
|
+
color: 'yellow'
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
due: '2021-08-21',
|
|
186
|
+
title: 'MEMEME',
|
|
187
|
+
color: 'orange'
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
due: '2021-08-21',
|
|
191
|
+
title: 'MOMOMO',
|
|
192
|
+
color: 'lime'
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
due: '2021-08-21',
|
|
196
|
+
title: 'QUOQUO',
|
|
197
|
+
color: 'navy'
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
due: '2021-08-21',
|
|
201
|
+
title: 'ZZXXCC',
|
|
202
|
+
color: 'gray'
|
|
203
|
+
}
|
|
204
|
+
]));
|
|
205
|
+
return map;
|
|
110
206
|
}
|
|
111
207
|
}
|
|
112
208
|
//# sourceMappingURL=sample-event-provider.js.map
|