From 736fac021d391eb61d92c4c5d1a3cba6aa2cd06e Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Thu, 30 Oct 2025 10:59:11 +0100
Subject: [PATCH] Add contextMenu actions to calendar view (#15451)

<img width="432" height="307" alt="Screenshot 2025-10-29 at 19 31 38"
src="https://github.com/user-attachments/assets/61965305-3a20-46de-b47f-7ac78cb1228c"
/>
---
 .../components/RecordCalendarCard.tsx         | 50 +++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx
index cf4b2b7512..db5c459600 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx
@@ -1,3 +1,6 @@
+import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
+import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
 import { RecordCalendarCardCellEditModePortal } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellEditModePortal';
 import { RecordCalendarCardCellHoveredPortal } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortal';
 import { RecordCalendarCardBody } from '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody';
@@ -5,8 +8,12 @@ import { RecordCalendarCardHeader } from '@/object-record/record-calendar/record
 import { RECORD_CALENDAR_CARD_CLICK_OUTSIDE_ID } from '@/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardClickOutsideId';
 import { RecordCalendarCardComponentInstanceContext } from '@/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext';
 import { isRecordCalendarCardSelectedComponentFamilyState } from '@/object-record/record-calendar/record-calendar-card/states/isRecordCalendarCardSelectedComponentFamilyState';
+import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext';
 import { RecordCard } from '@/object-record/record-card/components/RecordCard';
-import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
+import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import styled from '@emotion/styled';
 import { AnimatedEaseInOut } from 'twenty-ui/utilities';
@@ -27,18 +34,51 @@ export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => {
   const { currentView } = useGetCurrentViewOnly();
 
   const isCompactModeActive = currentView?.isCompact ?? false;
-  const isCurrentCardSelected = useRecoilComponentFamilyValue(
-    isRecordCalendarCardSelectedComponentFamilyState,
-    recordId,
+  const [isCurrentCardSelected, setIsCurrentCardSelected] =
+    useRecoilComponentFamilyState(
+      isRecordCalendarCardSelectedComponentFamilyState,
+      recordId,
+    );
+
+  const recordCalendarId = useAvailableComponentInstanceIdOrThrow(
+    RecordCalendarComponentInstanceContext,
   );
 
+  const actionMenuId = getActionMenuIdFromRecordIndexId(recordCalendarId);
+
+  const actionMenuDropdownId =
+    getActionMenuDropdownIdFromActionMenuId(actionMenuId);
+
+  const setActionMenuDropdownPosition = useSetRecoilComponentState(
+    recordIndexActionMenuDropdownPositionComponentState,
+    actionMenuDropdownId,
+  );
+
+  const { openDropdown } = useOpenDropdown();
+
+  const handleContextMenuOpen = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setIsCurrentCardSelected(true);
+    setActionMenuDropdownPosition({
+      x: event.clientX,
+      y: event.clientY,
+    });
+    openDropdown({
+      dropdownComponentInstanceIdFromProps: actionMenuDropdownId,
+      globalHotkeysConfig: {
+        enableGlobalHotkeysWithModifiers: true,
+        enableGlobalHotkeysConflictingWithKeyboard: false,
+      },
+    });
+  };
+
   return (
     <RecordCalendarCardComponentInstanceContext.Provider
       value={{
         instanceId: recordId,
       }}
     >
-      <StyledContainer>
+      <StyledContainer onContextMenu={handleContextMenuOpen}>
         <StyledRecordCard
           data-selected={isCurrentCardSelected}
           data-click-outside-id={RECORD_CALENDAR_CARD_CLICK_OUTSIDE_ID}