diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
--- a/web/sidebar/community-drawer-item.react.js
+++ b/web/sidebar/community-drawer-item.react.js
@@ -17,6 +17,7 @@
   +toggleExpanded: (threadID: string) => void,
   +expanded: boolean,
   +paddingLeft: number,
+  +expandable?: boolean,
 };
 
 const indentation = 14;
@@ -28,6 +29,7 @@
     expanded,
     toggleExpanded,
     paddingLeft,
+    expandable = true,
   } = props;
 
   const children = React.useMemo(() => {
@@ -53,9 +55,17 @@
         itemData={item}
         key={item.threadInfo.id}
         paddingLeft={paddingLeft + indentation}
+        expandable={expandable}
       />
     ));
-  }, [expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo]);
+  }, [
+    expanded,
+    hasSubchannelsButton,
+    itemChildren,
+    paddingLeft,
+    expandable,
+    threadInfo,
+  ]);
 
   const onExpandToggled = React.useCallback(
     () => toggleExpanded(threadInfo.id),
@@ -63,6 +73,9 @@
   );
 
   const itemExpandButton = React.useMemo(() => {
+    if (!expandable) {
+      return null;
+    }
     if (itemChildren?.length === 0 && !hasSubchannelsButton) {
       return (
         <div className={css.buttonContainer}>
@@ -75,7 +88,13 @@
         <ExpandButton onClick={onExpandToggled} expanded={expanded} />
       </div>
     );
-  }, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);
+  }, [
+    expandable,
+    itemChildren?.length,
+    hasSubchannelsButton,
+    onExpandToggled,
+    expanded,
+  ]);
 
   const Handler = useSelector(state =>
     getCommunityDrawerItemHandler(state.navInfo.tab),
@@ -108,6 +127,7 @@
 export type CommunityDrawerItemChatProps = {
   +itemData: CommunityDrawerItemData<string>,
   +paddingLeft: number,
+  +expandable?: boolean,
 };
 
 function CommunityDrawerItemChat(
diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js
--- a/web/sidebar/community-drawer.react.js
+++ b/web/sidebar/community-drawer.react.js
@@ -21,6 +21,7 @@
 const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2'];
 
 function CommunityDrawer(): React.Node {
+  const tab = useSelector(state => state.navInfo.tab);
   const childThreadInfosMap = useSelector(childThreadInfos);
   const communities = useSelector(communityThreadSelector);
   const resolvedCommunities = useResolvedThreadInfos(communities);
@@ -40,23 +41,55 @@
     communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,
   );
 
-  const setOpenCommunityOrClose = React.useCallback((communityID: string) => {
-    setOpenCommunity(open => (open === communityID ? null : communityID));
+  const setOpenCommunityOrClose = React.useCallback((index: string) => {
+    setOpenCommunity(open => (open === index ? null : index));
   }, []);
 
-  const communitiesComponents = drawerItemsData.map(item => (
-    <CommunityDrawerItemCommunity
-      itemData={item}
-      key={item.threadInfo.id}
-      toggleExpanded={setOpenCommunityOrClose}
-      expanded={item.threadInfo.id === openCommunity}
-      paddingLeft={10}
-    />
-  ));
+  const communitiesComponentsDefault = React.useMemo(
+    () =>
+      drawerItemsData.map(item => (
+        <CommunityDrawerItemCommunity
+          itemData={item}
+          key={`${item.threadInfo.id}_chat`}
+          toggleExpanded={setOpenCommunityOrClose}
+          expanded={item.threadInfo.id === openCommunity}
+          paddingLeft={10}
+          expandable={true}
+        />
+      )),
+    [drawerItemsData, openCommunity, setOpenCommunityOrClose],
+  );
+
+  const communitiesComponentsCal = React.useMemo(
+    () =>
+      drawerItemsData.map(item => (
+        <CommunityDrawerItemCommunity
+          itemData={item}
+          key={`${item.threadInfo.id}_cal`}
+          toggleExpanded={() => {}}
+          expanded={false}
+          paddingLeft={10}
+          expandable={false}
+        />
+      )),
+    [drawerItemsData],
+  );
+
+  const defaultStyle = React.useMemo(
+    () => (tab === 'calendar' ? { display: 'none' } : null),
+    [tab],
+  );
+  const calStyle = React.useMemo(
+    () => (tab !== 'calendar' ? { display: 'none' } : null),
+    [tab],
+  );
 
   return (
     <ThreadListProvider>
-      <div className={css.container}>{communitiesComponents}</div>
+      <div className={css.container}>
+        <div style={defaultStyle}>{communitiesComponentsDefault}</div>
+        <div style={calStyle}>{communitiesComponentsCal}</div>
+      </div>
     </ThreadListProvider>
   );
 }