diff options
| -rw-r--r-- | src/client/views/nodes/calendarBox/CalendarBox.tsx | 46 |
1 files changed, 39 insertions, 7 deletions
diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx index d38cb5423..c1f6f5859 100644 --- a/src/client/views/nodes/calendarBox/CalendarBox.tsx +++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx @@ -1,4 +1,4 @@ -import { Calendar, EventClickArg, EventSourceInput } from '@fullcalendar/core'; +import { Calendar, EventClickArg, EventDropArg, EventSourceInput } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid'; import multiMonthPlugin from '@fullcalendar/multimonth'; import timeGrid from '@fullcalendar/timegrid'; @@ -6,7 +6,7 @@ import interactionPlugin from '@fullcalendar/interaction'; import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { dateRangeStrToDates } from '../../../../ClientUtils'; +import { dateRangeStrToDates, simulateMouseClick } from '../../../../ClientUtils'; import { Doc } from '../../../../fields/Doc'; import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; import { CollectionSubView, SubCollectionViewProps } from '../../collections/CollectionSubView'; @@ -17,6 +17,7 @@ import { DocumentView } from '../DocumentView'; import { OpenWhere } from '../OpenWhere'; import { DragManager } from '../../../util/DragManager'; import { DocData } from '../../../../fields/DocSymbols'; +import { ContextMenu } from '../../ContextMenu'; type CalendarView = 'multiMonth' | 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay'; @@ -104,32 +105,44 @@ export class CalendarBox extends CollectionSubView() { } // TODO: Return a different color based on the event type - eventToColor(event: Doc): string { + eventToColor = (event: Doc): string => { return 'red'; - } + }; - internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData) { + internalDocDrop = (e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData) => { if (!super.onInternalDrop(e, de)) return false; de.complete.docDragData?.droppedDocuments.forEach(doc => { const today = new Date().toISOString(); if (!doc.date_range) doc[DocData].date_range = `${today}|${today}`; }); return true; - } + }; onInternalDrop = (e: Event, de: DragManager.DropEvent): boolean => { if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData); return false; }; + handleEventDrop = (arg: EventDropArg) => { + 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()); + }; + handleEventClick = (arg: EventClickArg) => { const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? ''); - DocumentView.DeselectAll(); if (doc) { DocumentView.showDocument(doc, { openLocation: OpenWhere.lightboxAlways }); arg.jsEvent.stopPropagation(); } }; + handleEventContextMenu = (pageX: number, pageY: number, docid: string) => { + const doc = DocServer.GetCachedRefField(docid ?? ''); + if (doc) { + const cm = ContextMenu.Instance; + cm.addItem({ description: 'Show Metadata', event: () => this._props.addDocTab(doc, OpenWhere.addRightKeyvalue), icon: 'table-columns' }); + cm.displayMenu(pageX - 15, pageY - 15, undefined, undefined); + } + }; // https://fullcalendar.io renderCalendar = () => { @@ -157,6 +170,25 @@ export class CalendarBox extends CollectionSubView() { aspectRatio: NumCast(this.Document.width) / NumCast(this.Document.height), events: this.calendarEvents, eventClick: this.handleEventClick, + eventDrop: this.handleEventDrop, + eventDidMount: arg => { + arg.el.addEventListener('pointerdown', ev => { + ev.button && ev.stopPropagation(); + }); + if (navigator.userAgent.includes('Macintosh')) { + 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 => { + if (!navigator.userAgent.includes('Macintosh')) { + this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId); + } + ev.stopPropagation(); + ev.preventDefault(); + }); + }, })); cal?.render(); setTimeout(() => cal?.view.calendar.select(this.dateSelect.start, this.dateSelect.end)); |