2 files changed, 18 insertions, 13 deletions

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,