fix: calendar properties and inline code font

src/components/database/fullcalendar/event/EventDisplay.tsx

@@ -1,4 +1,8 @@
 import { EventApi, EventContentArg } from '@fullcalendar/core';
+import { useMemo } from 'react';
+
+import { useFieldsSelector, isAIFieldType } from '@/application/database-yjs';
+import { useAIEnabled } from '@/components/app/app.hooks';
 
 import {
   MonthAllDayEvent,
@@ -26,6 +30,14 @@ export function EventDisplay({
   className,
 }: EventDisplayProps) {
   const rowId = event.extendedProps?.rowId;
+  const fields = useFieldsSelector();
+  const aiEnabled = useAIEnabled();
+
+  const showFields = useMemo(() => {
+    return fields.filter(
+      (field) => !field.isPrimary && (aiEnabled || !isAIFieldType(field.fieldType))
+    );
+  }, [fields, aiEnabled]);
 
   if (!rowId) return null;
 
@@ -54,6 +66,7 @@ export function EventDisplay({
         showLeftIndicator={showLeftIndicator}
         className={className}
         rowId={rowId}
+        showFields={showFields}
       />
     </div>
   );

src/components/database/fullcalendar/event/components/EventPropertiesList.tsx

@@ -0,0 +1,26 @@
+import { Column } from '@/application/database-yjs';
+import CardField from '@/components/database/components/field/CardField';
+
+interface EventPropertiesListProps {
+  rowId: string;
+  showFields?: Column[];
+}
+
+export function EventPropertiesList({ rowId, showFields }: EventPropertiesListProps) {
+  if (!showFields || showFields.length === 0) return null;
+
+  // Cap to first 5 fields to prevent dense calendar views from becoming too tall/noisy
+  const displayedFields = showFields.slice(0, 5);
+
+  return (
+    <div className='event-properties mt-1 flex flex-col gap-1 w-full overflow-hidden px-1 pb-1'>
+      {displayedFields.map((field) => (
+        <CardField
+          key={field.fieldId}
+          rowId={rowId}
+          fieldId={field.fieldId}
+        />
+      ))}
+    </div>
+  );
+}

src/components/database/fullcalendar/event/components/MonthAllDayEvent.tsx

@@ -2,6 +2,8 @@ import { EventApi, EventContentArg } from '@fullcalendar/core';
 import { useCallback } from 'react';
 
 import { cn } from '@/lib/utils';
+import { Column } from '@/application/database-yjs';
+import { EventPropertiesList } from './EventPropertiesList';
 
 import { EventIconButton } from './EventIconButton';
 
@@ -12,6 +14,7 @@ interface MonthAllDayEventProps {
   showLeftIndicator?: boolean;
   className?: string;
   rowId: string;
+  showFields?: Column[];
 }
 
 export function MonthAllDayEvent({
@@ -21,6 +24,7 @@ export function MonthAllDayEvent({
   showLeftIndicator = true,
   className,
   rowId,
+  showFields,
 }: MonthAllDayEventProps) {
   const isEventStart = eventInfo.isStart;
   const isEventEnd = eventInfo.isEnd;
@@ -113,8 +117,9 @@ export function MonthAllDayEvent({
         <div className='event-inner flex h-full max-h-full w-full flex-1 flex-col justify-center overflow-hidden'>
           <div className='flex h-full items-center gap-1 truncate'>
             <EventIconButton rowId={rowId} />
-            <span className='min-w-[28px] flex-1 truncate'>{getDisplayContent()}</span>
+            <span className='min-w-[28px] flex-1 truncate font-semibold'>{getDisplayContent()}</span>
           </div>
+          <EventPropertiesList rowId={rowId} showFields={showFields} />
         </div>
       </div>
     </div>

src/components/database/fullcalendar/event/components/MonthMultiDayTimedEvent.tsx

@@ -4,6 +4,8 @@ import { useCallback } from 'react';
 
 import { useTimeFormat } from '@/components/database/fullcalendar/hooks';
 import { cn } from '@/lib/utils';
+import { Column } from '@/application/database-yjs';
+import { EventPropertiesList } from './EventPropertiesList';
 
 import { EventIconButton } from './EventIconButton';
 
@@ -14,6 +16,7 @@ interface MonthMultiDayTimedEventProps {
   showLeftIndicator?: boolean;
   className?: string;
   rowId: string;
+  showFields?: Column[];
 }
 
 export function MonthMultiDayTimedEvent({
@@ -23,6 +26,7 @@ export function MonthMultiDayTimedEvent({
   showLeftIndicator = true,
   className,
   rowId,
+  showFields,
 }: MonthMultiDayTimedEventProps) {
   const { formatTimeDisplay } = useTimeFormat();
   const isEventStart = eventInfo.isStart;
@@ -122,8 +126,9 @@ export function MonthMultiDayTimedEvent({
               </span>
             )}
             <EventIconButton className='event-time-icon' rowId={rowId} />
-            <span className='min-w-[28px] flex-1 truncate'>{getDisplayContent()}</span>
+            <span className='min-w-[28px] flex-1 truncate font-semibold'>{getDisplayContent()}</span>
           </div>
+          <EventPropertiesList rowId={rowId} showFields={showFields} />
         </div>
       </div>
     </div>

src/components/database/fullcalendar/event/components/MonthTimedEvent.tsx

@@ -3,6 +3,8 @@ import dayjs from 'dayjs';
 
 import { useTimeFormat } from '@/components/database/fullcalendar/hooks';
 import { cn } from '@/lib/utils';
+import { Column } from '@/application/database-yjs';
+import { EventPropertiesList } from './EventPropertiesList';
 
 import { EventIconButton } from './EventIconButton';
 
@@ -13,9 +15,10 @@ interface MonthTimedEventProps {
   showLeftIndicator?: boolean;
   className?: string;
   rowId: string;
+  showFields?: Column[];
 }
 
-export function MonthTimedEvent({ event, onClick, showLeftIndicator = true, className, rowId }: MonthTimedEventProps) {
+export function MonthTimedEvent({ event, onClick, showLeftIndicator = true, className, rowId, showFields }: MonthTimedEventProps) {
   const { formatTimeDisplay } = useTimeFormat();
   const handleClick = () => {
     onClick?.(event);
@@ -48,9 +51,10 @@ export function MonthTimedEvent({ event, onClick, showLeftIndicator = true, clas
             )}
             <div className='flex w-full items-center gap-1 truncate'>
               <EventIconButton className='event-time-icon' rowId={rowId} />
-              <span className='min-w-full flex-1 truncate'>{event.title || 'Untitled'}</span>
+              <span className='min-w-full flex-1 truncate font-semibold'>{event.title || 'Untitled'}</span>
             </div>
           </div>
+          <EventPropertiesList rowId={rowId} showFields={showFields} />
         </div>
       </div>
     </div>

src/components/database/fullcalendar/event/components/WeekAllDayEvent.tsx

@@ -2,6 +2,8 @@ import { EventApi, EventContentArg } from '@fullcalendar/core';
 import { useCallback, useMemo } from 'react';
 
 import { cn } from '@/lib/utils';
+import { Column } from '@/application/database-yjs';
+import { EventPropertiesList } from './EventPropertiesList';
 
 import { EventIconButton } from './EventIconButton';
 
@@ -12,6 +14,7 @@ interface WeekAllDayEventProps {
   showLeftIndicator?: boolean;
   className?: string;
   rowId: string;
+  showFields?: Column[];
 }
 
 export function WeekAllDayEvent({
@@ -21,6 +24,7 @@ export function WeekAllDayEvent({
   showLeftIndicator = true,
   className,
   rowId,
+  showFields,
 }: WeekAllDayEventProps) {
   const isEventStart = eventInfo.isStart;
   const isEventEnd = eventInfo.isEnd;
@@ -85,7 +89,7 @@ export function WeekAllDayEvent({
     return (
       <div className='flex h-full items-center gap-1 truncate'>
         <EventIconButton rowId={rowId} />
-        <span className='min-w-[28px] flex-1 truncate'>{getDisplayContent()}</span>
+        <span className='min-w-[28px] flex-1 truncate font-semibold'>{getDisplayContent()}</span>
       </div>
     );
   }, [getDisplayContent, rowId]);
@@ -121,6 +125,7 @@ export function WeekAllDayEvent({
         {showLeftIndicator && !hideLine && <div className='event-line h-4 w-[3px] rounded-200 bg-fill-theme-thick' />}
         <div className='event-inner flex h-full max-h-full w-full flex-1 flex-col justify-center overflow-hidden'>
           {renderAllDayEvent}
+          <EventPropertiesList rowId={rowId} showFields={showFields} />
         </div>
       </div>
     </div>

src/components/database/fullcalendar/event/components/WeekTimedEvent.tsx

@@ -4,6 +4,8 @@ import { useCallback, useMemo } from 'react';
 
 import { useTimeFormat } from '@/components/database/fullcalendar/hooks';
 import { cn } from '@/lib/utils';
+import { Column } from '@/application/database-yjs';
+import { EventPropertiesList } from './EventPropertiesList';
 
 import { EventIconButton } from './EventIconButton';
 
@@ -14,9 +16,10 @@ interface WeekTimedEventProps {
   showLeftIndicator?: boolean;
   className?: string;
   rowId: string;
+  showFields?: Column[];
 }
 
-export function WeekTimedEvent({ event, eventInfo, onClick, className, rowId }: WeekTimedEventProps) {
+export function WeekTimedEvent({ event, eventInfo, onClick, className, rowId, showFields }: WeekTimedEventProps) {
   const { formatTimeDisplay } = useTimeFormat();
   const isEventStart = eventInfo.isStart;
   const isEventEnd = eventInfo.isEnd;
@@ -94,7 +97,7 @@ export function WeekTimedEvent({ event, eventInfo, onClick, className, rowId }:
                 : undefined
             }
           >
-            <span className='w-fit'>{getDisplayContent()}</span>
+            <span className='w-fit font-semibold'>{getDisplayContent()}</span>
             {moreThanHalfHour ? '' : ','}
           </span>
         </div>
@@ -107,9 +110,10 @@ export function WeekTimedEvent({ event, eventInfo, onClick, className, rowId }:
             </span>
           )}
         </div>
+        <EventPropertiesList rowId={rowId} showFields={moreThanHalfHour ? showFields : undefined} />
       </div>
     );
-  }, [event.end, event.start, rowId, getDisplayContent, isEventStart, formatTimeDisplay, isRange]);
+  }, [event.end, event.start, rowId, getDisplayContent, isEventStart, formatTimeDisplay, isRange, showFields]);
 
   const isShortEvent = event.end && dayjs(event.end).diff(dayjs(event.start), 'minute') < 30;
   const isCompactLayout = !event.end || isShortEvent;

src/components/database/fullcalendar/event/components/index.ts

@@ -3,4 +3,5 @@ export { MonthTimedEvent } from './MonthTimedEvent';
 export { MonthMultiDayTimedEvent } from './MonthMultiDayTimedEvent';
 export { WeekAllDayEvent } from './WeekAllDayEvent';
 export { WeekTimedEvent } from './WeekTimedEvent';
-export { EventIconButton } from './EventIconButton';
+export { EventIconButton } from './EventIconButton';
+export { EventPropertiesList } from './EventPropertiesList';

src/components/editor/components/leaf/Leaf.tsx

@@ -62,7 +62,7 @@ export function Leaf({ attributes, children, leaf, text }: RenderLeafProps) {
 
   if (leaf.code && !(leaf.formula || leaf.mention || leaf.reference)) {
     newChildren = (
-      <span className={cn('bg-border-primary font-medium', style['color'] ? undefined : 'text-[#EB5757]')}>
+      <span className={cn('bg-border-primary font-medium font-mono', style['color'] ? undefined : 'text-[#EB5757]')}>
         {newChildren}
       </span>
     );

tsconfig.json

@@ -27,6 +27,7 @@
       "jest"
     ],
     "typeRoots": [
+      "./node_modules/@types",
       "./node_modules/@fullcalendar"
     ],
     "baseUrl": ".",