diff --git a/src/common/BottomSheet/BottomSheet.tsx b/src/common/BottomSheet/BottomSheet.tsx
index e767f1847..d362aa02e 100644
--- a/src/common/BottomSheet/BottomSheet.tsx
+++ b/src/common/BottomSheet/BottomSheet.tsx
@@ -15,7 +15,7 @@ type Props = {
     onClose: () => void,
 };
 
-const BottomSheet = ({ children, title, show }: Props) => {
+const BottomSheet = ({ children, title, show, onClose }: Props) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const [startOffset, setStartOffset] = useState(0);
     const [offset, setOffset] = useState(0);
@@ -28,7 +28,7 @@ const BottomSheet = ({ children, title, show }: Props) => {
 
     const containerHeight = () => containerRef.current?.offsetHeight ?? 0;
 
-    const onClose = () => setOffset(containerHeight());
+    const onCloseRequest = () => setOffset(containerHeight());
 
     const onTouchStart = ({ touches }: React.TouchEvent<HTMLDivElement>) => {
         const { clientY } = touches[0];
@@ -54,9 +54,13 @@ const BottomSheet = ({ children, title, show }: Props) => {
         show ? open() : close();
     }, [show]);
 
+    useEffect(() => {
+        !opened && onClose();
+    }, [opened]);
+
     return opened && createPortal((
         <div className={styles['bottom-sheet']}>
-            <div className={styles['backdrop']} onClick={onClose} />
+            <div className={styles['backdrop']} onClick={onCloseRequest} />
             <div
                 ref={containerRef}
                 className={classNames(styles['container'], { [styles['dragging']]: startOffset }, 'animation-slide-up')}
@@ -72,7 +76,7 @@ const BottomSheet = ({ children, title, show }: Props) => {
                         {title}
                     </div>
                 </div>
-                <div className={styles['content']} onClick={onClose}>
+                <div className={styles['content']} onClick={onCloseRequest}>
                     {children}
                 </div>
             </div>
diff --git a/src/routes/Calendar/Calendar.tsx b/src/routes/Calendar/Calendar.tsx
index 4df5e4bf2..f27ef12b6 100644
--- a/src/routes/Calendar/Calendar.tsx
+++ b/src/routes/Calendar/Calendar.tsx
@@ -26,6 +26,10 @@ const Calendar = ({ urlParams }: Props) => {
 
     const detailsTitle = useMemo(() => toDayMonth(selected), [selected, toDayMonth]);
 
+    const onDetailsClose = () => {
+        setSelected(null);
+    };
+
     return (
         <MainNavBars className={styles['calendar']} route={'calendar'}>
             {
@@ -54,7 +58,7 @@ const Calendar = ({ urlParams }: Props) => {
                             profile={profile}
                             onChange={setSelected}
                         />
-                        <BottomSheet title={detailsTitle} show={selected}>
+                        <BottomSheet title={detailsTitle} show={selected} onClose={onDetailsClose}>
                             <Details
                                 selected={selected}
                                 items={calendar.items}