From 91b7ecc0a38cdf82397c573073e5f54a5716fe5b Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Mon, 15 Sep 2025 18:40:06 +0200
Subject: [PATCH] Add current day style in calendar view (#14518)

<img width="1242" height="743" alt="Screenshot 2025-09-15 at 18 36 07"
src="https://github.com/user-attachments/assets/a614534a-e002-4858-ad93-fcb21410795a"
/>
---
 .../components/RecordCalendarMonthBodyDay.tsx | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

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 d211f537a0..3cfaa3c034 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
@@ -5,6 +5,7 @@ import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-st
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { isSameDay, isSameMonth } from 'date-fns';
 
 const StyledContainer = styled.div<{ isOtherMonth: boolean }>`
   display: flex;
@@ -27,11 +28,24 @@ const StyledContainer = styled.div<{ isOtherMonth: boolean }>`
     `}
 `;
 
-const StyledDayHeader = styled.div`
+const StyledDayHeader = styled.div<{ isToday: boolean }>`
   display: flex;
   text-align: right;
-  justify-content: flex-end;
-  padding: 7px 5px;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  width: 20px;
+  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(1)};
+  font-size: ${({ theme }) => theme.font.size.sm};
+
+  ${({ isToday, theme }) =>
+    isToday &&
+    css`
+      border-radius: 4px;
+      background: ${theme.color.red};
+      color: ${theme.font.color.inverted};
+      font-weight: ${theme.font.weight.medium};
+    `}
 `;
 
 const StyledCardsContainer = styled.div`
@@ -55,11 +69,13 @@ export const RecordCalendarMonthBodyDay = ({
     day.toDateString(),
   );
 
-  const isOtherMonth = day.getMonth() !== recordCalendarSelectedDate.getMonth();
+  const isToday = isSameDay(day, new Date());
+
+  const isOtherMonth = !isSameMonth(day, recordCalendarSelectedDate);
 
   return (
     <StyledContainer isOtherMonth={isOtherMonth}>
-      <StyledDayHeader>{day.getDate()}</StyledDayHeader>
+      <StyledDayHeader isToday={isToday}>{day.getDate()}</StyledDayHeader>
       <StyledCardsContainer>
         {recordIds.slice(0, 5).map((recordId) => (
           <RecordCalendarCard key={recordId} recordId={recordId} />