Add calendar date field picker in view options menu (#14492)

<img width="612" height="352" alt="Screenshot 2025-09-15 at 10 36 02"
src="https://github.com/user-attachments/assets/d1da5ddf-cb9a-49f2-8407-e3d22cad808b"
/>
<img width="612" height="255" alt="Screenshot 2025-09-15 at 10 35 57"
src="https://github.com/user-attachments/assets/3fca9e04-6a61-42ce-96a8-4dcd93e06f66"
/>

packages/twenty-front/src/modules/views/types/CoreViewWithRelations.ts

@@ -5,6 +5,7 @@ import {
   type CoreViewFilter,
   type CoreViewFilterGroup,
   type CoreViewGroup,
+  type ViewCalendarLayout,
   type ViewKey,
   type ViewOpenRecordIn,
   type ViewType,
@@ -30,6 +31,8 @@ export type CoreViewWithRelations = {
   viewSorts: CoreViewSortEssential[];
   kanbanAggregateOperation?: AggregateOperations | null;
   kanbanAggregateOperationFieldMetadataId?: string | null;
+  calendarFieldMetadataId?: string | null;
+  calendarLayout?: ViewCalendarLayout | null;
   position: number;
   icon: string;
   openRecordIn: ViewOpenRecordIn;

packages/twenty-front/src/modules/views/types/View.ts

@@ -7,6 +7,7 @@ import { type ViewGroup } from '@/views/types/ViewGroup';
 import { type ViewKey } from '@/views/types/ViewKey';
 import { type ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { type ViewType } from '@/views/types/ViewType';
+import { type ViewCalendarLayout } from '~/generated/graphql';
 
 export type View = {
   id: string;
@@ -26,6 +27,8 @@ export type View = {
   kanbanFieldMetadataId: string;
   kanbanAggregateOperation: AggregateOperations | null;
   kanbanAggregateOperationFieldMetadataId: string | null;
+  calendarFieldMetadataId?: string | null;
+  calendarLayout?: ViewCalendarLayout | null;
   position: number;
   icon: string;
   openRecordIn: ViewOpenRecordInType;

packages/twenty-front/src/modules/views/utils/convertCoreViewToView.ts

@@ -41,6 +41,8 @@ export const convertCoreViewToView = (
     kanbanAggregateOperation: coreView.kanbanAggregateOperation ?? null,
     kanbanAggregateOperationFieldMetadataId:
       coreView.kanbanAggregateOperationFieldMetadataId ?? null,
+    calendarFieldMetadataId: coreView.calendarFieldMetadataId ?? null,
+    calendarLayout: coreView.calendarLayout ?? null,
     position: coreView.position,
     icon: coreView.icon,
     openRecordIn: convertedOpenRecordIn,

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateButton.tsx

@@ -2,8 +2,10 @@ import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/ho
 import { ViewType } from '@/views/types/ViewType';
 import { useCreateViewFromCurrentState } from '@/views/view-picker/hooks/useCreateViewFromCurrentState';
 import { useDeleteViewFromCurrentState } from '@/views/view-picker/hooks/useDeleteViewFromCurrentState';
+import { useGetAvailableFieldsForCalendar } from '@/views/view-picker/hooks/useGetAvailableFieldsForCalendar';
 import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
+import { viewPickerCalendarFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerCalendarFieldMetadataIdComponentState';
 import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
 import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
 import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
@@ -14,6 +16,8 @@ export const ViewPickerCreateButton = () => {
   const { t } = useLingui();
   const { availableFieldsForKanban, navigateToSelectSettings } =
     useGetAvailableFieldsForKanban();
+  const { availableFieldsForCalendar, navigateToDateFieldSettings } =
+    useGetAvailableFieldsForCalendar();
 
   const { viewPickerMode } = useViewPickerMode();
   const viewPickerType = useRecoilComponentValue(viewPickerTypeComponentState);
@@ -23,6 +27,9 @@ export const ViewPickerCreateButton = () => {
   const viewPickerKanbanFieldMetadataId = useRecoilComponentValue(
     viewPickerKanbanFieldMetadataIdComponentState,
   );
+  const viewPickerCalendarFieldMetadataId = useRecoilComponentValue(
+    viewPickerCalendarFieldMetadataIdComponentState,
+  );
 
   const { createViewFromCurrentState } = useCreateViewFromCurrentState();
   const { deleteViewFromCurrentState } = useDeleteViewFromCurrentState();
@@ -63,6 +70,22 @@ export const ViewPickerCreateButton = () => {
     );
   }
 
+  if (
+    viewPickerType === ViewType.Calendar &&
+    availableFieldsForCalendar.length === 0
+  ) {
+    return (
+      <Button
+        title={t`Go to Settings`}
+        onClick={navigateToDateFieldSettings}
+        size="small"
+        accent="blue"
+        fullWidth
+        justify="center"
+      />
+    );
+  }
+
   if (
     viewPickerType !== ViewType.Kanban ||
     viewPickerKanbanFieldMetadataId !== ''
@@ -78,7 +101,9 @@ export const ViewPickerCreateButton = () => {
         disabled={
           viewPickerIsPersisting ||
           (viewPickerType === ViewType.Kanban &&
-            viewPickerKanbanFieldMetadataId === '')
+            viewPickerKanbanFieldMetadataId === '') ||
+          (viewPickerType === ViewType.Calendar &&
+            viewPickerCalendarFieldMetadataId === '')
         }
       />
     );