aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--package-lock.json30
-rw-r--r--package.json1
-rw-r--r--src/client/views/nodes/calendarBox/CalendarBox.scss6
-rw-r--r--src/client/views/nodes/calendarBox/CalendarBox.tsx25
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,