diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -146,12 +146,7 @@
   renderMainContent() {
     let mainContent;
     if (this.props.navInfo.tab === 'calendar') {
-      mainContent = (
-        <Calendar
-          setModal={this.props.setModal}
-          url={this.props.location.pathname}
-        />
-      );
+      mainContent = <Calendar url={this.props.location.pathname} />;
     } else if (this.props.navInfo.tab === 'chat') {
       mainContent = <Chat setModal={this.props.setModal} />;
     }
diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -30,6 +30,7 @@
   endDateForYearAndMonth,
 } from 'lib/utils/date-utils';
 
+import { ModalContext } from '../modals/modal-provider.react';
 import { useSelector } from '../redux/redux-utils';
 import {
   yearAssertingSelector,
@@ -44,7 +45,6 @@
 import FilterPanel from './filter-panel.react';
 
 type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
   +url: string,
 };
 type Props = {
@@ -60,6 +60,7 @@
     calendarQuery: CalendarQuery,
     reduxAlreadyUpdated?: boolean,
   ) => Promise<CalendarQueryUpdateResult>,
+  +setModal: (modal: ?React.Node) => void,
 };
 type State = {
   filterPanelOpen: boolean,
@@ -270,6 +271,8 @@
     const loggedIn = useSelector(isLoggedIn);
     const callUpdateCalendarQuery = useServerCall(updateCalendarQuery);
     const dispatchActionPromise = useDispatchActionPromise();
+    const modalContext = React.useContext(ModalContext);
+    invariant(modalContext, 'ModalContext not found');
 
     return (
       <Calendar
@@ -282,6 +285,7 @@
         loggedIn={loggedIn}
         dispatchActionPromise={dispatchActionPromise}
         updateCalendarQuery={callUpdateCalendarQuery}
+        setModal={modalContext.setModal}
       />
     );
   },