diff options
-rw-r--r-- | package-lock.json | 30 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | src/client/views/nodes/calendarBox/CalendarBox.scss | 6 | ||||
-rw-r--r-- | src/client/views/nodes/calendarBox/CalendarBox.tsx | 25 |
4 files changed, 45 insertions, 17 deletions
diff --git a/package-lock.json b/package-lock.json index 95a90c956..735db29ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@fullcalendar/core": "^6.1.10", "@fullcalendar/daygrid": "^6.1.10", "@fullcalendar/multimonth": "^6.1.10", + "@fullcalendar/timegrid": "^6.1.15", "@internationalized/date": "^3.5.0", "@mui/icons-material": "^6.0.1", "@mui/material": "^6.0.1", @@ -2921,6 +2922,17 @@ "@fullcalendar/core": "~6.1.15" } }, + "node_modules/@fullcalendar/timegrid": { + "version": "6.1.15", + "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz", + "integrity": "sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw==", + "dependencies": { + "@fullcalendar/daygrid": "~6.1.15" + }, + "peerDependencies": { + "@fullcalendar/core": "~6.1.15" + } + }, "node_modules/@googlemaps/js-api-loader": { "version": "1.16.2", "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz", @@ -18926,6 +18938,14 @@ "node": ">= 12.20" } }, + "node_modules/formdata-node/node_modules/web-streams-polyfill": { + "version": "4.0.0-beta.3", + "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz", + "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==", + "engines": { + "node": ">= 14" + } + }, "node_modules/formidable": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.1.tgz", @@ -33427,11 +33447,13 @@ } }, "node_modules/web-streams-polyfill": { - "version": "4.0.0-beta.3", - "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz", - "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0.tgz", + "integrity": "sha512-0zJXHRAYEjM2tUfZ2DiSOHAa2aw1tisnnhU3ufD57R8iefL+DcdJyRBRyJpG+NUimDgbTI/lH+gAE1PAvV3Cgw==", + "optional": true, + "peer": true, "engines": { - "node": ">= 14" + "node": ">= 8" } }, "node_modules/webidl-conversions": { diff --git a/package.json b/package.json index 11c299f7d..6254b443a 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ "@fullcalendar/core": "^6.1.10", "@fullcalendar/daygrid": "^6.1.10", "@fullcalendar/multimonth": "^6.1.10", + "@fullcalendar/timegrid": "^6.1.15", "@internationalized/date": "^3.5.0", "@mui/icons-material": "^6.0.1", "@mui/material": "^6.0.1", diff --git a/src/client/views/nodes/calendarBox/CalendarBox.scss b/src/client/views/nodes/calendarBox/CalendarBox.scss index 8eee47e42..df6ce3e64 100644 --- a/src/client/views/nodes/calendarBox/CalendarBox.scss +++ b/src/client/views/nodes/calendarBox/CalendarBox.scss @@ -5,6 +5,12 @@ .calendarBox-wrapper { width: 100%; height: 100%; + .fc-timegrid-body { + width: 100% !important; + table { + width: 100% !important; + } + } .fc-col-header { width: 100% !important; } diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx index 20650d648..0d50f3382 100644 --- a/src/client/views/nodes/calendarBox/CalendarBox.tsx +++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx @@ -1,18 +1,15 @@ import { Calendar, EventSourceInput } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid'; import multiMonthPlugin from '@fullcalendar/multimonth'; -import { action, computed, makeObservable, observable, reaction } from 'mobx'; +import timeGrid from '@fullcalendar/timegrid'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { dateRangeStrToDates } from '../../../../ClientUtils'; -import { Doc, DocListCast } from '../../../../fields/Doc'; +import { Doc } from '../../../../fields/Doc'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { DocumentType } from '../../../documents/DocumentTypes'; -import { Docs } from '../../../documents/Documents'; -import { ViewBoxBaseComponent } from '../../DocComponent'; -import { FieldView, FieldViewProps } from '../FieldView'; -import './CalendarBox.scss'; import { CollectionSubView, SubCollectionViewProps } from '../../collections/CollectionSubView'; +import './CalendarBox.scss'; type CalendarView = 'month' | 'multi-month' | 'week'; @@ -22,6 +19,7 @@ export class CalendarBox extends CollectionSubView() { _calendar: Calendar | undefined; _oldWheel: HTMLElement | null = null; _observer: ResizeObserver | undefined; + _eventsDisposer: IReactionDisposer | undefined; constructor(props: SubCollectionViewProps) { super(props); @@ -31,14 +29,15 @@ export class CalendarBox extends CollectionSubView() { @observable _multiMonth = 0; componentDidMount(): void { - reaction( + this._eventsDisposer = reaction( () => this.calendarEvents, - events => { - this._calendar?.setOption('events', events); - }, + events => this._calendar?.setOption('events', events), { fireImmediately: true } ); } + componentWillUnmount(): void { + this._eventsDisposer?.(); + } @computed get calendarEvents(): EventSourceInput | undefined { return this.childDocs.map(doc => { @@ -91,11 +90,11 @@ export class CalendarBox extends CollectionSubView() { const cal = !this._calendarRef ? null : (this._calendar = new Calendar(this._calendarRef, { - plugins: [multiMonthPlugin, dayGridPlugin], + plugins: [multiMonthPlugin, dayGridPlugin, timeGrid], headerToolbar: { left: 'prev,next today', center: 'title', - right: 'dayGridMonth multiMonth', // timeGridWeek timeGridDay listWeek', + right: 'multiMonth,dayGridMonth,timeGridWeek,timeGridDay', }, initialDate: this.dateRangeStrDates.startDate, navLinks: true, |