diff --git a/web/sidebar/app-switcher.react.js b/web/sidebar/app-switcher.react.js
--- a/web/sidebar/app-switcher.react.js
+++ b/web/sidebar/app-switcher.react.js
@@ -32,6 +32,7 @@
   );
 
   const boundUnreadCount = useSelector(unreadCount);
+  const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
 
   React.useEffect(() => {
     document.title = getTitle(boundUnreadCount);
@@ -90,9 +91,6 @@
     chatBadge = <div className={css.chatBadge}>{boundUnreadCount}</div>;
   }
 
-  const calendarNavClasses = classNames({
-    [css['current-tab']]: navInfo.tab === 'calendar',
-  });
   const chatNavClasses = classNames({
     [css['current-tab']]: navInfo.tab === 'chat',
   });
@@ -100,6 +98,23 @@
     [css['current-tab']]: navInfo.tab === 'apps',
   });
 
+  const calendarLink = React.useMemo(() => {
+    if (!isCalendarEnabled) {
+      return null;
+    }
+    const calendarNavClasses = classNames({
+      [css['current-tab']]: navInfo.tab === 'calendar',
+    });
+    return (
+      <li>
+        <p className={calendarNavClasses}>
+          <SWMansionIcon icon="calendar" size={24} />
+          <a onClick={onClickCalendar}>Calendar</a>
+        </p>
+      </li>
+    );
+  }, [isCalendarEnabled, navInfo.tab, onClickCalendar]);
+
   return (
     <div className={css.appSwitcherContainer}>
       <ul>
@@ -112,12 +127,7 @@
             <a onClick={onClickChat}>Chat</a>
           </p>
         </li>
-        <li>
-          <p className={calendarNavClasses}>
-            <SWMansionIcon icon="calendar" size={24} />
-            <a onClick={onClickCalendar}>Calendar</a>
-          </p>
-        </li>
+        {calendarLink}
         <li>
           <p className={appsNavClasses}>
             <SWMansionIcon icon="wrench" size={24} />