diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/calendarBox/CalendarBox.tsx | 40 |
1 files changed, 22 insertions, 18 deletions
diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx index 40064ad4d..f21eec604 100644 --- a/src/client/views/nodes/calendarBox/CalendarBox.tsx +++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx @@ -1,4 +1,4 @@ -import { Calendar, EventClickArg, EventDropArg, EventSourceInput } from '@fullcalendar/core'; +import { Calendar, DateSelectArg, EventClickArg, EventDropArg, EventMountArg, EventSourceInput } from '@fullcalendar/core'; import { EventResizeDoneArg } from '@fullcalendar/interaction'; import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from '@fullcalendar/interaction'; @@ -21,6 +21,7 @@ import { OpenWhere } from '../OpenWhere'; import './CalendarBox.scss'; import { DateField } from '../../../../fields/DateField'; import { undoable } from '../../../util/UndoManager'; +import { DocumentType } from '../../../documents/DocumentTypes'; type CalendarView = 'multiMonth' | 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay'; @@ -40,6 +41,10 @@ export class CalendarBox extends CollectionSubView() { makeObservable(this); } + @computed get calTypeFieldKey() { + return this.fieldKey + '_calendarType'; + } + componentDidMount(): void { this._props.setContentViewBox?.(this); this._eventsDisposer = reaction( @@ -99,7 +104,7 @@ export class CalendarBox extends CollectionSubView() { // Choose a calendar view based on the date range @computed get calendarViewType(): CalendarView { - if (this.dataDoc[this.fieldKey + '_calendarType']) return StrCast(this.dataDoc[this.fieldKey + '_calendarType']) as CalendarView; + if (this.dataDoc[this.calTypeFieldKey]) return StrCast(this.dataDoc[this.calTypeFieldKey]) as CalendarView; if (this._isMultiMonth) return 'multiMonth'; const { start, end } = this.dateRangeStrDates; if (start.getFullYear() !== end.getFullYear() || start.getMonth() !== end.getMonth()) return 'multiMonth'; @@ -109,11 +114,9 @@ export class CalendarBox extends CollectionSubView() { // TODO: Return a different color based on the event type eventToColor = (event: Doc): string => { - const docType = StrCast(event.type); - if (docType === 'task') { - return '#20B2AA'; // teal for tasks - } - return 'red'; + return StrCast(event.type) === DocumentType.TASK + ? '#20B2AA' // teal for tasks + : 'red'; }; // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -131,7 +134,7 @@ export class CalendarBox extends CollectionSubView() { return false; }; - handleEventDrop = undoable((arg: EventDropArg | EventResizeDoneArg ) => { + handleEventDrop = undoable((arg: EventDropArg | EventResizeDoneArg) => { const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? ''); // doc && arg.event.start && (doc.date_range = arg.event.start?.toString() + '|' + (arg.event.end ?? arg.event.start).toString()); if (!doc || !arg.event.start) return; @@ -179,7 +182,7 @@ export class CalendarBox extends CollectionSubView() { const btn = (text: string, view: string | (() => void), hint: string) => ({ text, hint, click: typeof view === 'string' ? () => this._calendarRef?.getApi().changeView(view) : view }); return ( <FullCalendar - ref={(r:any) => (this._calendarRef = r)} + ref={(r: unknown) => (this._calendarRef = r as FullCalendar)} customButtons={{ nowBtn: btn('Now', () => this._calendarRef?.getApi().gotoDate(new Date()), 'Go to Today'), multiBtn: btn('M+', 'multiMonth', 'Multiple Month View'), @@ -223,7 +226,7 @@ export class CalendarBox extends CollectionSubView() { eventDrop={this.handleEventDrop} unselectAuto={false} // unselect={() => {}} - select={(info:any) => { + select={(info: DateSelectArg) => { const start = dateRangeStrToDates(info.startStr).start.toISOString(); const end = info.allDay ? start : dateRangeStrToDates(info.endStr).start.toISOString(); this.dataDoc.date = start + '|' + end; @@ -231,7 +234,8 @@ export class CalendarBox extends CollectionSubView() { // eventContent={() => { // return null; // }} - eventDidMount={(arg:any) => { const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? ''); + eventDidMount={(arg: EventMountArg) => { + const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? ''); if (!doc) return; if (doc.type === 'task') { @@ -258,14 +262,14 @@ export class CalendarBox extends CollectionSubView() { arg.el.style.position = 'relative'; arg.el.appendChild(checkButton); } - arg.el.addEventListener('pointerdown', (ev:any) => ev.button && ev.stopPropagation()); + arg.el.addEventListener('pointerdown', ev => ev.button && ev.stopPropagation()); if (navigator.userAgent.includes('Macintosh')) { - arg.el.addEventListener('pointerup', (ev:any) => { + arg.el.addEventListener('pointerup', ev => { ev.button && ev.stopPropagation(); ev.button && this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId); }); } - arg.el.addEventListener('contextmenu', (ev:any) => { + arg.el.addEventListener('contextmenu', ev => { if (!navigator.userAgent.includes('Macintosh')) { this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId); } @@ -286,10 +290,10 @@ export class CalendarBox extends CollectionSubView() { setTimeout( action(() => { const cname = (e.nativeEvent.target as HTMLButtonElement)?.className ?? ''; - if (cname.includes('multiMonth')) this.dataDoc[this.fieldKey + '_calendarType'] = 'multiMonth'; - if (cname.includes('dayGridMonth')) this.dataDoc[this.fieldKey + '_calendarType'] = 'dayGridMonth'; - if (cname.includes('timeGridWeek')) this.dataDoc[this.fieldKey + '_calendarType'] = 'timeGridWeek'; - if (cname.includes('timeGridDay')) this.dataDoc[this.fieldKey + '_calendarType'] = 'timeGridDay'; + if (cname.includes('multiMonth')) this.dataDoc[this.calTypeFieldKey] = 'multiMonth'; + if (cname.includes('dayGridMonth')) this.dataDoc[this.calTypeFieldKey] = 'dayGridMonth'; + if (cname.includes('timeGridWeek')) this.dataDoc[this.calTypeFieldKey] = 'timeGridWeek'; + if (cname.includes('timeGridDay')) this.dataDoc[this.calTypeFieldKey] = 'timeGridDay'; }) ); }} |