@sprucelabs/spruce-calendar-components 20.0.0 → 20.1.1

package/build/esm/index-components.d.ts

@@ -15,5 +15,6 @@ export { default as CalendarToolRegistrar } from './toolBelt/CalendarToolRegistr
 export * from './toolBelt/CalendarToolRegistrar';
 export { default as AbstractCalendarEventToolBeltState } from './toolBelt/states/AbstractCalendarEventToolBeltState';
 export * from './toolBelt/states/AbstractCalendarEventToolBeltState';
+export { default as draftEventGenerator } from './utilities/draftGenerator';
 /** TYPES */
 export * from './types/calendar.types';

package/build/esm/index-components.js

@@ -15,5 +15,6 @@ export { default as CalendarToolRegistrar } from './toolBelt/CalendarToolRegistr
 export * from './toolBelt/CalendarToolRegistrar.js';
 export { default as AbstractCalendarEventToolBeltState } from './toolBelt/states/AbstractCalendarEventToolBeltState.js';
 export * from './toolBelt/states/AbstractCalendarEventToolBeltState.js';
+export { default as draftEventGenerator } from './utilities/draftGenerator.js';
 /** TYPES */
 export * from './types/calendar.types.js';

package/build/esm/toolBelt/states/AbstractCalendarEventToolBeltState.d.ts

@@ -1,5 +1,6 @@
 import { SpruceSchemas, ToolBeltState, ViewControllerId } from '@sprucelabs/heartwood-view-controllers';
 import { CalendarTool, CalendarToolBeltContext, CalendarToolBeltStateMachine, GetPersonFromEventHandler } from '../../types/calendar.types';
+import EventControlsCardViewController from '../../viewControllers/EventControlsCard.vc';
 declare type Tool = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.ToolBeltTool;
 export declare type AddToolOptions = Omit<Tool, 'card'> & {
     cardVcId: ViewControllerId;
@@ -26,6 +27,7 @@ export default abstract class AbstractCalendarEventToolBeltState implements Tool
     removeTool(id: string): void;
     getPendingContextChanges(): Partial<CalendarToolBeltContext>;
     getVcForTool(toolId: string): CalendarTool | undefined;
+    getControlsVc(): EventControlsCardViewController;
     destroy(): Promise<void>;
 }
 export {};

package/build/esm/toolBelt/states/AbstractCalendarEventToolBeltState.js

@@ -22,7 +22,7 @@ export default class AbstractCalendarEventToolBeltState {
             this.sm = sm;
             this.toolBeltVc = sm.getToolBeltVc();
             this._isLoaded = true;
-            this.controlsVc = sm.Controller('calendar.event-controls-card', Object.assign({ onCancel: this.clearPendingContextChanges.bind(this), onSave: this.handleClickSave.bind(this) }, this.buildVcConstructorOptions('controls')));
+            this.controlsVc = sm.Controller('calendar.event-controls-card', Object.assign(Object.assign({ onCancel: this.clearPendingContextChanges.bind(this), onSave: this.handleClickSave.bind(this) }, this.buildVcConstructorOptions('controls')), { onCancelEvent: this.sm.getContext().cancelEvent }));
             this.toolBeltVc.clearTools();
             this.toolBeltVc.setStickyTool({
                 card: this.controlsVc.render(),
@@ -152,6 +152,9 @@ export default class AbstractCalendarEventToolBeltState {
         var _a;
         return (_a = this.vcs.find((v) => v.toolId === toolId)) === null || _a === void 0 ? void 0 : _a.vc;
     }
+    getControlsVc() {
+        return this.controlsVc;
+    }
     destroy() {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.sm.off('did-update-context', this.handleDidUpdateContext);

package/build/esm/types/calendar.types.d.ts

@@ -18,6 +18,7 @@ declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 export declare type CalendarToolBeltContext = SkillViewControllerLoadOptions & {
     event: CalendarEvent;
     calendarVc: CalendarViewController;
+    cancelEvent: CancelEventHandler;
 };
 export declare type CalendarToolBeltStateMachine = ToolBeltStateMachine<CalendarToolBeltContext>;
 export interface RemoteCalendarTool extends CalendarTool {
@@ -35,6 +36,7 @@ export declare type UpdateCalendarToolBeltContextHandler = (context: Partial<Cal
 export declare type GetCalendarToolBeltContextHandler = () => CalendarToolBeltContext;
 export declare type GetPersonFromEventHandler = () => Promise<Person | null>;
 export declare type GetHasPendingContextChangesHandler = () => boolean;
+export declare type CancelEventHandler = (eventId: string) => boolean | Promise<boolean | void> | void;
 export interface CalendarToolOptions {
     updateContext: UpdateCalendarToolBeltContextHandler;
     getContext: GetCalendarToolBeltContextHandler;

package/build/esm/viewControllers/Calendar.vc.d.ts

@@ -30,6 +30,7 @@ export default class CalendarViewController extends CoreCalendarViewController {
     private eventSwappedHandler?;
     private dropEventHandler?;
     private isSwapping;
+    private lastSwappedId?;
     constructor(options: ViewControllerOptions & CalendarViewControllerOptions);
     private handleDropEvent;
     getCalendarVc(): this;

package/build/esm/viewControllers/Calendar.vc.js

@@ -186,10 +186,15 @@ export default class CalendarViewController extends CoreCalendarViewController {
                 if (!saved) {
                     return;
                 }
-                if (draftEventGenerator.isDraftId(id) &&
-                    !draftEventGenerator.isDraftId(saved.id)) {
-                    yield this.swapEvent(event, saved);
-                    yield ((_b = this.eventSwappedHandler) === null || _b === void 0 ? void 0 : _b.call(this, saved));
+                if (id !== saved.id) {
+                    if (this.lastSwappedId === id) {
+                        this.updateEvent(saved.id, saved);
+                    }
+                    else {
+                        this.lastSwappedId = id;
+                        yield this.swapEvent(event, saved);
+                        yield ((_b = this.eventSwappedHandler) === null || _b === void 0 ? void 0 : _b.call(this, saved));
+                    }
                 }
                 else {
                     _super.updateEvent.call(this, saved.id, { isBusy, error: undefined });

package/build/esm/viewControllers/EventControlsCard.vc.d.ts

@@ -1,8 +1,9 @@
 import { AbstractViewController, SpruceSchemas, ViewControllerOptions } from '@sprucelabs/heartwood-view-controllers';
-import { CalendarTool, CalendarToolOptions } from '../types/calendar.types';
+import { CalendarTool, CalendarToolOptions, CancelEventHandler } from '../types/calendar.types';
 declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 export interface EventControlsCardOptions extends CalendarToolOptions {
     onCancel: () => Promise<void | boolean> | void | boolean;
+    onCancelEvent: CancelEventHandler;
     onSave: () => Promise<void | boolean> | void | boolean;
 }
 export default class EventControlsCardViewController extends AbstractViewController<Card> implements CalendarTool {
@@ -12,10 +13,13 @@ export default class EventControlsCardViewController extends AbstractViewControl
     private cancelHandler;
     private getHasPendingContextChangesHandler;
     private getContext;
+    private cancelEventHandler;
     constructor(options: ViewControllerOptions & EventControlsCardOptions);
+    private CardVc;
     private handleClickCancel;
     private handleClickSave;
     handleUpdateContext(): void;
+    private optionallyDropInCancelButton;
     render(): SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 }
 export {};

package/build/esm/viewControllers/EventControlsCard.vc.js

@@ -13,17 +13,23 @@ import draftEventGenerator from '../utilities/draftGenerator.js';
 export default class EventControlsCardViewController extends AbstractViewController {
     constructor(options) {
         super(options);
-        const { onSave, onCancel, getHasPendingContextChanges, getContext } = assertOptions(options, [
+        const { onSave, onCancel, getHasPendingContextChanges, getContext, onCancelEvent, } = assertOptions(options, [
             'onCancel',
             'onSave',
+            'onCancelEvent',
             'getHasPendingContextChanges',
             'getContext',
         ]);
         this.saveHandler = onSave;
         this.cancelHandler = onCancel;
+        this.cancelEventHandler = onCancelEvent;
         this.getHasPendingContextChangesHandler = getHasPendingContextChanges;
         this.getContext = getContext;
-        this.cardVc = this.Controller('card', {
+        this.cardVc = this.CardVc();
+        this.optionallyDropInCancelButton();
+    }
+    CardVc() {
+        return this.Controller('card', {
             footer: {
                 isEnabled: false,
                 isBusy: false,
@@ -58,13 +64,16 @@ export default class EventControlsCardViewController extends AbstractViewControl
         });
     }
     handleUpdateContext() {
-        var _a;
         if (this.getHasPendingContextChangesHandler()) {
             this.cardVc.enableFooter();
         }
         else {
             this.cardVc.disableFooter();
         }
+        this.optionallyDropInCancelButton();
+    }
+    optionallyDropInCancelButton() {
+        var _a;
         const { event } = this.getContext();
         if ((event === null || event === void 0 ? void 0 : event.id) && !draftEventGenerator.isDraftId(event.id)) {
             this.cardVc.setBody({
@@ -75,6 +84,7 @@ export default class EventControlsCardViewController extends AbstractViewControl
                                 id: 'cancel-event',
                                 label: `Cancel ${(_a = event.eventTypeSlug) !== null && _a !== void 0 ? _a : 'event'}`,
                                 type: 'destructive',
+                                onClick: () => this.cancelEventHandler(this.getContext().event.id),
                             },
                         ],
                     },

package/build/esm/viewControllers/EventDateTimeTool.vc.d.ts

@@ -1,4 +1,4 @@
-import { AbstractViewController, FormViewController, SpruceSchemas, ViewControllerOptions } from '@sprucelabs/heartwood-view-controllers';
+import { AbstractViewController, CalendarViewController, FormViewController, SpruceSchemas, ViewControllerOptions } from '@sprucelabs/heartwood-view-controllers';
 import { CalendarTool, CalendarToolBeltContext, CalendarToolOptions } from '../types/calendar.types';
 declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 export default class EventDateTimeToolViewController extends AbstractViewController<Card> implements CalendarTool {
@@ -8,8 +8,12 @@ export default class EventDateTimeToolViewController extends AbstractViewControl
     private formVc;
     private updateContext;
     private getContext;
+    private calendarVc;
     constructor(options: ViewControllerOptions & CalendarToolOptions);
+    private handleSelectDateFromCalendar;
+    private getSelectedDate;
     private CardVc;
+    getCalendarVc(): CalendarViewController;
     private FormVc;
     handleUpdateContext(context: CalendarToolBeltContext): Promise<void>;
     private handleChangeForm;

package/build/esm/viewControllers/EventDateTimeTool.vc.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { dateUtil } from '@sprucelabs/calendar-utils';
 import { AbstractViewController, buildForm, } from '@sprucelabs/heartwood-view-controllers';
 import { buildSchema } from '@sprucelabs/schema';
 const schema = buildSchema({
@@ -24,9 +25,25 @@ export default class EventDateTimeToolViewController extends AbstractViewControl
         this.shouldPersistContextChangesImmediately = true;
         this.updateContext = options.updateContext;
         this.getContext = options.getContext;
+        this.calendarVc = this.Controller('calendar', {
+            view: 'month',
+            selectedDates: [this.getSelectedDate()],
+            onClick: this.handleSelectDateFromCalendar.bind(this),
+        });
         this.formVc = this.FormVc();
         this.cardVc = this.CardVc();
     }
+    handleSelectDateFromCalendar({ dateTimeMs, }) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { hour, minute } = dateUtil.splitDate(this.getContext().event.startDateTimeMs);
+            yield this.formVc.setValue('startDateTime', dateUtil.setTimeOfDay(dateTimeMs, hour, minute, 0, 0));
+            this.calendarVc.setSelectedDates([this.getSelectedDate(dateTimeMs)]);
+        });
+    }
+    getSelectedDate(dateTimeMs) {
+        const { year, month, day } = dateUtil.splitDate(dateTimeMs !== null && dateTimeMs !== void 0 ? dateTimeMs : this.getContext().event.startDateTimeMs);
+        return { year, month, day };
+    }
     CardVc() {
         return this.Controller('card', {
             header: {
@@ -34,6 +51,9 @@ export default class EventDateTimeToolViewController extends AbstractViewControl
             },
             body: {
                 sections: [
+                    {
+                        calendar: this.calendarVc.render(),
+                    },
                     {
                         form: this.formVc.render(),
                     },
@@ -41,6 +61,9 @@ export default class EventDateTimeToolViewController extends AbstractViewControl
             },
         });
     }
+    getCalendarVc() {
+        return this.calendarVc;
+    }
     FormVc() {
         return this.Controller('form', buildForm({
             schema,
@@ -59,6 +82,7 @@ export default class EventDateTimeToolViewController extends AbstractViewControl
     handleUpdateContext(context) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.formVc.setValue('startDateTime', context.event.startDateTimeMs);
+            this.calendarVc.setSelectedDates([this.getSelectedDate()]);
         });
     }
     handleChangeForm({ values }) {

package/build/index-components.d.ts

@@ -15,5 +15,6 @@ export { default as CalendarToolRegistrar } from './toolBelt/CalendarToolRegistr
 export * from './toolBelt/CalendarToolRegistrar';
 export { default as AbstractCalendarEventToolBeltState } from './toolBelt/states/AbstractCalendarEventToolBeltState';
 export * from './toolBelt/states/AbstractCalendarEventToolBeltState';
+export { default as draftEventGenerator } from './utilities/draftGenerator';
 /** TYPES */
 export * from './types/calendar.types';

package/build/index-components.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AbstractCalendarEventToolBeltState = exports.CalendarToolRegistrar = exports.EventRepeatingToolViewController = exports.EventDateTimeToolViewController = exports.EventControlsCardViewController = exports.CalendarViewController = exports.RepeatingControlsListViewController = exports.RepeatingCardViewController = void 0;
+exports.draftEventGenerator = exports.AbstractCalendarEventToolBeltState = exports.CalendarToolRegistrar = exports.EventRepeatingToolViewController = exports.EventDateTimeToolViewController = exports.EventControlsCardViewController = exports.CalendarViewController = exports.RepeatingControlsListViewController = exports.RepeatingCardViewController = void 0;
 /** COMPONENTS */
 var EventRepeatingTool_vc_1 = require("./viewControllers/EventRepeatingTool.vc");
 Object.defineProperty(exports, "RepeatingCardViewController", { enumerable: true, get: function () { return __importDefault(EventRepeatingTool_vc_1).default; } });
@@ -39,5 +39,7 @@ __exportStar(require("./toolBelt/CalendarToolRegistrar"), exports);
 var AbstractCalendarEventToolBeltState_1 = require("./toolBelt/states/AbstractCalendarEventToolBeltState");
 Object.defineProperty(exports, "AbstractCalendarEventToolBeltState", { enumerable: true, get: function () { return __importDefault(AbstractCalendarEventToolBeltState_1).default; } });
 __exportStar(require("./toolBelt/states/AbstractCalendarEventToolBeltState"), exports);
+var draftGenerator_1 = require("./utilities/draftGenerator");
+Object.defineProperty(exports, "draftEventGenerator", { enumerable: true, get: function () { return __importDefault(draftGenerator_1).default; } });
 /** TYPES */
 __exportStar(require("./types/calendar.types"), exports);

package/build/toolBelt/states/AbstractCalendarEventToolBeltState.d.ts

@@ -1,5 +1,6 @@
 import { SpruceSchemas, ToolBeltState, ViewControllerId } from '@sprucelabs/heartwood-view-controllers';
 import { CalendarTool, CalendarToolBeltContext, CalendarToolBeltStateMachine, GetPersonFromEventHandler } from '../../types/calendar.types';
+import EventControlsCardViewController from '../../viewControllers/EventControlsCard.vc';
 declare type Tool = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.ToolBeltTool;
 export declare type AddToolOptions = Omit<Tool, 'card'> & {
     cardVcId: ViewControllerId;
@@ -26,6 +27,7 @@ export default abstract class AbstractCalendarEventToolBeltState implements Tool
     removeTool(id: string): void;
     getPendingContextChanges(): Partial<CalendarToolBeltContext>;
     getVcForTool(toolId: string): CalendarTool | undefined;
+    getControlsVc(): EventControlsCardViewController;
     destroy(): Promise<void>;
 }
 export {};

package/build/toolBelt/states/AbstractCalendarEventToolBeltState.js

@@ -17,7 +17,7 @@ class AbstractCalendarEventToolBeltState {
         this.sm = sm;
         this.toolBeltVc = sm.getToolBeltVc();
         this._isLoaded = true;
-        this.controlsVc = sm.Controller('calendar.event-controls-card', Object.assign({ onCancel: this.clearPendingContextChanges.bind(this), onSave: this.handleClickSave.bind(this) }, this.buildVcConstructorOptions('controls')));
+        this.controlsVc = sm.Controller('calendar.event-controls-card', Object.assign(Object.assign({ onCancel: this.clearPendingContextChanges.bind(this), onSave: this.handleClickSave.bind(this) }, this.buildVcConstructorOptions('controls')), { onCancelEvent: this.sm.getContext().cancelEvent }));
         this.toolBeltVc.clearTools();
         this.toolBeltVc.setStickyTool({
             card: this.controlsVc.render(),
@@ -130,6 +130,9 @@ class AbstractCalendarEventToolBeltState {
         var _a;
         return (_a = this.vcs.find((v) => v.toolId === toolId)) === null || _a === void 0 ? void 0 : _a.vc;
     }
+    getControlsVc() {
+        return this.controlsVc;
+    }
     async destroy() {
         await this.sm.off('did-update-context', this.handleDidUpdateContext);
     }

package/build/types/calendar.types.d.ts

@@ -18,6 +18,7 @@ declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 export declare type CalendarToolBeltContext = SkillViewControllerLoadOptions & {
     event: CalendarEvent;
     calendarVc: CalendarViewController;
+    cancelEvent: CancelEventHandler;
 };
 export declare type CalendarToolBeltStateMachine = ToolBeltStateMachine<CalendarToolBeltContext>;
 export interface RemoteCalendarTool extends CalendarTool {
@@ -35,6 +36,7 @@ export declare type UpdateCalendarToolBeltContextHandler = (context: Partial<Cal
 export declare type GetCalendarToolBeltContextHandler = () => CalendarToolBeltContext;
 export declare type GetPersonFromEventHandler = () => Promise<Person | null>;
 export declare type GetHasPendingContextChangesHandler = () => boolean;
+export declare type CancelEventHandler = (eventId: string) => boolean | Promise<boolean | void> | void;
 export interface CalendarToolOptions {
     updateContext: UpdateCalendarToolBeltContextHandler;
     getContext: GetCalendarToolBeltContextHandler;

package/build/viewControllers/Calendar.vc.d.ts

@@ -30,6 +30,7 @@ export default class CalendarViewController extends CoreCalendarViewController {
     private eventSwappedHandler?;
     private dropEventHandler?;
     private isSwapping;
+    private lastSwappedId?;
     constructor(options: ViewControllerOptions & CalendarViewControllerOptions);
     private handleDropEvent;
     getCalendarVc(): this;

package/build/viewControllers/Calendar.vc.js

@@ -163,10 +163,15 @@ class CalendarViewController extends heartwood_view_controllers_1.CalendarViewCo
             if (!saved) {
                 return;
             }
-            if (draftGenerator_1.default.isDraftId(id) &&
-                !draftGenerator_1.default.isDraftId(saved.id)) {
-                await this.swapEvent(event, saved);
-                await ((_b = this.eventSwappedHandler) === null || _b === void 0 ? void 0 : _b.call(this, saved));
+            if (id !== saved.id) {
+                if (this.lastSwappedId === id) {
+                    this.updateEvent(saved.id, saved);
+                }
+                else {
+                    this.lastSwappedId = id;
+                    await this.swapEvent(event, saved);
+                    await ((_b = this.eventSwappedHandler) === null || _b === void 0 ? void 0 : _b.call(this, saved));
+                }
             }
             else {
                 super.updateEvent(saved.id, { isBusy, error: undefined });

package/build/viewControllers/EventControlsCard.vc.d.ts

@@ -1,8 +1,9 @@
 import { AbstractViewController, SpruceSchemas, ViewControllerOptions } from '@sprucelabs/heartwood-view-controllers';
-import { CalendarTool, CalendarToolOptions } from '../types/calendar.types';
+import { CalendarTool, CalendarToolOptions, CancelEventHandler } from '../types/calendar.types';
 declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 export interface EventControlsCardOptions extends CalendarToolOptions {
     onCancel: () => Promise<void | boolean> | void | boolean;
+    onCancelEvent: CancelEventHandler;
     onSave: () => Promise<void | boolean> | void | boolean;
 }
 export default class EventControlsCardViewController extends AbstractViewController<Card> implements CalendarTool {
@@ -12,10 +13,13 @@ export default class EventControlsCardViewController extends AbstractViewControl
     private cancelHandler;
     private getHasPendingContextChangesHandler;
     private getContext;
+    private cancelEventHandler;
     constructor(options: ViewControllerOptions & EventControlsCardOptions);
+    private CardVc;
     private handleClickCancel;
     private handleClickSave;
     handleUpdateContext(): void;
+    private optionallyDropInCancelButton;
     render(): SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 }
 export {};

package/build/viewControllers/EventControlsCard.vc.js

@@ -9,17 +9,23 @@ const draftGenerator_1 = __importDefault(require("../utilities/draftGenerator"))
 class EventControlsCardViewController extends heartwood_view_controllers_1.AbstractViewController {
     constructor(options) {
         super(options);
-        const { onSave, onCancel, getHasPendingContextChanges, getContext } = (0, schema_1.assertOptions)(options, [
+        const { onSave, onCancel, getHasPendingContextChanges, getContext, onCancelEvent, } = (0, schema_1.assertOptions)(options, [
             'onCancel',
             'onSave',
+            'onCancelEvent',
             'getHasPendingContextChanges',
             'getContext',
         ]);
         this.saveHandler = onSave;
         this.cancelHandler = onCancel;
+        this.cancelEventHandler = onCancelEvent;
         this.getHasPendingContextChangesHandler = getHasPendingContextChanges;
         this.getContext = getContext;
-        this.cardVc = this.Controller('card', {
+        this.cardVc = this.CardVc();
+        this.optionallyDropInCancelButton();
+    }
+    CardVc() {
+        return this.Controller('card', {
             footer: {
                 isEnabled: false,
                 isBusy: false,
@@ -50,13 +56,16 @@ class EventControlsCardViewController extends heartwood_view_controllers_1.Abstr
         this.cardVc.disableFooter();
     }
     handleUpdateContext() {
-        var _a;
         if (this.getHasPendingContextChangesHandler()) {
             this.cardVc.enableFooter();
         }
         else {
             this.cardVc.disableFooter();
         }
+        this.optionallyDropInCancelButton();
+    }
+    optionallyDropInCancelButton() {
+        var _a;
         const { event } = this.getContext();
         if ((event === null || event === void 0 ? void 0 : event.id) && !draftGenerator_1.default.isDraftId(event.id)) {
             this.cardVc.setBody({
@@ -67,6 +76,7 @@ class EventControlsCardViewController extends heartwood_view_controllers_1.Abstr
                                 id: 'cancel-event',
                                 label: `Cancel ${(_a = event.eventTypeSlug) !== null && _a !== void 0 ? _a : 'event'}`,
                                 type: 'destructive',
+                                onClick: () => this.cancelEventHandler(this.getContext().event.id),
                             },
                         ],
                     },

package/build/viewControllers/EventDateTimeTool.vc.d.ts

@@ -1,4 +1,4 @@
-import { AbstractViewController, FormViewController, SpruceSchemas, ViewControllerOptions } from '@sprucelabs/heartwood-view-controllers';
+import { AbstractViewController, CalendarViewController, FormViewController, SpruceSchemas, ViewControllerOptions } from '@sprucelabs/heartwood-view-controllers';
 import { CalendarTool, CalendarToolBeltContext, CalendarToolOptions } from '../types/calendar.types';
 declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 export default class EventDateTimeToolViewController extends AbstractViewController<Card> implements CalendarTool {
@@ -8,8 +8,12 @@ export default class EventDateTimeToolViewController extends AbstractViewControl
     private formVc;
     private updateContext;
     private getContext;
+    private calendarVc;
     constructor(options: ViewControllerOptions & CalendarToolOptions);
+    private handleSelectDateFromCalendar;
+    private getSelectedDate;
     private CardVc;
+    getCalendarVc(): CalendarViewController;
     private FormVc;
     handleUpdateContext(context: CalendarToolBeltContext): Promise<void>;
     private handleChangeForm;

package/build/viewControllers/EventDateTimeTool.vc.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const calendar_utils_1 = require("@sprucelabs/calendar-utils");
 const heartwood_view_controllers_1 = require("@sprucelabs/heartwood-view-controllers");
 const schema_1 = require("@sprucelabs/schema");
 const schema = (0, schema_1.buildSchema)({
@@ -17,9 +18,23 @@ class EventDateTimeToolViewController extends heartwood_view_controllers_1.Abstr
         this.shouldPersistContextChangesImmediately = true;
         this.updateContext = options.updateContext;
         this.getContext = options.getContext;
+        this.calendarVc = this.Controller('calendar', {
+            view: 'month',
+            selectedDates: [this.getSelectedDate()],
+            onClick: this.handleSelectDateFromCalendar.bind(this),
+        });
         this.formVc = this.FormVc();
         this.cardVc = this.CardVc();
     }
+    async handleSelectDateFromCalendar({ dateTimeMs, }) {
+        const { hour, minute } = calendar_utils_1.dateUtil.splitDate(this.getContext().event.startDateTimeMs);
+        await this.formVc.setValue('startDateTime', calendar_utils_1.dateUtil.setTimeOfDay(dateTimeMs, hour, minute, 0, 0));
+        this.calendarVc.setSelectedDates([this.getSelectedDate(dateTimeMs)]);
+    }
+    getSelectedDate(dateTimeMs) {
+        const { year, month, day } = calendar_utils_1.dateUtil.splitDate(dateTimeMs !== null && dateTimeMs !== void 0 ? dateTimeMs : this.getContext().event.startDateTimeMs);
+        return { year, month, day };
+    }
     CardVc() {
         return this.Controller('card', {
             header: {
@@ -27,6 +42,9 @@ class EventDateTimeToolViewController extends heartwood_view_controllers_1.Abstr
             },
             body: {
                 sections: [
+                    {
+                        calendar: this.calendarVc.render(),
+                    },
                     {
                         form: this.formVc.render(),
                     },
@@ -34,6 +52,9 @@ class EventDateTimeToolViewController extends heartwood_view_controllers_1.Abstr
             },
         });
     }
+    getCalendarVc() {
+        return this.calendarVc;
+    }
     FormVc() {
         return this.Controller('form', (0, heartwood_view_controllers_1.buildForm)({
             schema,
@@ -51,6 +72,7 @@ class EventDateTimeToolViewController extends heartwood_view_controllers_1.Abstr
     }
     async handleUpdateContext(context) {
         await this.formVc.setValue('startDateTime', context.event.startDateTimeMs);
+        this.calendarVc.setSelectedDates([this.getSelectedDate()]);
     }
     async handleChangeForm({ values }) {
         var _a;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sprucelabs/spruce-calendar-components",
   "description": "Calendar components for working with calendars and Sprucebot.",
-  "version": "20.0.0",
+  "version": "20.1.1",
   "skill": {
     "namespace": "calendar"
   },