From fbc43284488b24fb87c48c83b9d21032b68da3cc Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Mon, 15 Sep 2025 18:17:21 +0200
Subject: [PATCH] Add grid to calendar view (#14516)

<img width="1254" height="786" alt="Screenshot 2025-09-15 at 18 15 40"
src="https://github.com/user-attachments/assets/3e95b8b9-f877-4527-9793-2f738939ce19"
/>

Next step: fix padding issue with cards
---
 .../components/RecordCalendar.tsx             |  2 ++
 .../components/RecordCalendarTopBar.tsx       | 11 ++++++--
 .../month/components/RecordCalendarMonth.tsx  |  9 ++++--
 .../components/RecordCalendarMonthBody.tsx    |  4 ++-
 .../components/RecordCalendarMonthBodyDay.tsx | 28 +++++++++++++++++--
 .../RecordCalendarMonthBodyWeek.tsx           |  4 +++
 .../RecordCalendarMonthHeaderDay.tsx          |  6 +++-
 7 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx
index 508b72fb9c..f1404692df 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx
@@ -11,6 +11,8 @@ const StyledContainerContainer = styled.div`
   flex-direction: column;
   min-height: calc(100% - ${({ theme }) => theme.spacing(2)});
   height: min-content;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(3)};
 `;
 
 export const RecordCalendar = () => {
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
index b866d89d21..a4c1d06579 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
@@ -27,6 +27,10 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
+const StyledNavigationButton = styled(Button)`
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
 const StyledLeftSection = styled.div`
   display: flex;
   align-items: center;
@@ -37,6 +41,7 @@ const StyledNavigationSection = styled.div`
   display: flex;
   align-items: center;
   gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: flex-end;
 `;
 
 export const RecordCalendarTopBar = () => {
@@ -119,6 +124,8 @@ export const RecordCalendarTopBar = () => {
                 isDateTimeInput={false}
                 onChange={handleDateChange}
                 onClose={handleDateChange}
+                onEnter={handleDateChange}
+                onEscape={handleDateChange}
                 clearable={false}
                 hideHeaderInput
               />
@@ -129,7 +136,7 @@ export const RecordCalendarTopBar = () => {
       </StyledLeftSection>
 
       <StyledNavigationSection>
-        <Button
+        <StyledNavigationButton
           size="small"
           variant="tertiary"
           Icon={IconChevronLeft}
@@ -141,7 +148,7 @@ export const RecordCalendarTopBar = () => {
           title="Today"
           onClick={handleTodayClick}
         />
-        <Button
+        <StyledNavigationButton
           size="small"
           variant="tertiary"
           Icon={IconChevronRight}
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonth.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonth.tsx
index 7967937b2d..651ce6667f 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonth.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonth.tsx
@@ -2,17 +2,20 @@ import { RecordCalendarMonthBody } from '@/object-record/record-calendar/month/c
 import { RecordCalendarMonthHeader } from '@/object-record/record-calendar/month/components/RecordCalendarMonthHeader';
 import { RecordCalendarMonthContextProvider } from '@/object-record/record-calendar/month/contexts/RecordCalendarMonthContext';
 import { useRecordCalendarMonthDaysRange } from '@/object-record/record-calendar/month/hooks/useRecordCalendarMonthDaysRange';
+import { recordCalendarSelectedDateComponentState } from '@/object-record/record-calendar/states/recordCalendarSelectedDateComponentState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import styled from '@emotion/styled';
 
 const StyledContainer = styled.div`
   display: flex;
-  height: 24px;
   flex-direction: column;
   min-width: 1000px;
 `;
 
 export const RecordCalendarMonth = () => {
-  const currentDay = new Date();
+  const recordCalendarSelectedDate = useRecoilComponentValue(
+    recordCalendarSelectedDateComponentState,
+  );
 
   const {
     firstDayOfMonth,
@@ -22,7 +25,7 @@ export const RecordCalendarMonth = () => {
     weekDayLabels,
     weekFirstDays,
     weekStartsOnDayIndex,
-  } = useRecordCalendarMonthDaysRange(currentDay);
+  } = useRecordCalendarMonthDaysRange(recordCalendarSelectedDate);
 
   return (
     <RecordCalendarMonthContextProvider
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx
index 473635f455..9cf5657cb4 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx
@@ -4,8 +4,10 @@ import styled from '@emotion/styled';
 
 const StyledContainer = styled.div`
   display: flex;
-  height: 24px;
   flex-direction: column;
+  border: 0.5px solid ${({ theme }) => theme.border.color.light};
+  border-radius: 4px;
+  overflow: hidden;
 `;
 
 export const RecordCalendarMonthBody = () => {
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx
index 0decc73f9e..9e5454bdf5 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx
@@ -1,20 +1,36 @@
 import { RecordCalendarCard } from '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard';
+import { recordCalendarSelectedDateComponentState } from '@/object-record/record-calendar/states/recordCalendarSelectedDateComponentState';
 import { calendarDayRecordIdsComponentFamilySelector } from '@/object-record/record-calendar/states/selectors/calendarDayRecordsComponentFamilySelector';
 import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ isOtherMonth: boolean }>`
   display: flex;
   width: calc(100% / 7);
   flex-direction: column;
   min-height: 122px;
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  background: ${({ theme }) => theme.background.primary};
+
+  &:not(:last-child) {
+    border-right: 0.5px solid ${({ theme }) => theme.border.color.light};
+  }
+
+  ${({ isOtherMonth, theme }) =>
+    isOtherMonth &&
+    css`
+      background: ${theme.background.secondary};
+      color: ${theme.font.color.light};
+    `}
 `;
 
 const StyledDayHeader = styled.div`
   display: flex;
-  width: 100%;
   text-align: right;
   justify-content: flex-end;
+  padding: 7px 5px;
 `;
 
 const StyledCardsContainer = styled.div`
@@ -29,13 +45,19 @@ type RecordCalendarMonthBodyDayProps = {
 export const RecordCalendarMonthBodyDay = ({
   day,
 }: RecordCalendarMonthBodyDayProps) => {
+  const recordCalendarSelectedDate = useRecoilComponentValue(
+    recordCalendarSelectedDateComponentState,
+  );
+
   const recordIds = useRecoilComponentFamilyValue(
     calendarDayRecordIdsComponentFamilySelector,
     day.toDateString(),
   );
 
+  const isOtherMonth = day.getMonth() !== recordCalendarSelectedDate.getMonth();
+
   return (
-    <StyledContainer>
+    <StyledContainer isOtherMonth={isOtherMonth}>
       <StyledDayHeader>{day.getDate()}</StyledDayHeader>
       <StyledCardsContainer>
         {recordIds.slice(0, 5).map((recordId) => (
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx
index 7f3ec210d9..a3a3108acb 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx
@@ -5,6 +5,10 @@ import { eachDayOfInterval, endOfWeek } from 'date-fns';
 
 const StyledContainer = styled.div`
   display: flex;
+
+  &:not(:last-of-type) {
+    border-bottom: 0.5px solid ${({ theme }) => theme.border.color.light};
+  }
 `;
 
 type RecordCalendarMonthBodyWeekProps = {
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthHeaderDay.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthHeaderDay.tsx
index 643f88c02b..15a0eddd76 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthHeaderDay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthHeaderDay.tsx
@@ -5,9 +5,13 @@ type RecordCalendarMonthHeaderDayProps = {
 };
 
 const StyledLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
   display: flex;
-  width: calc(100% / 7);
+  font-size: ${({ theme }) => theme.font.size.sm};
   height: 24px;
+  justify-content: flex-end;
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  width: calc(100% / 7);
 `;
 
 export const RecordCalendarMonthHeaderDay = ({