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

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 = () => {

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}

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

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 = () => {

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) => (

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 = {

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 = ({