diff --git a/src/components/calendar/TimeGridScrollView.tsx b/src/components/calendar/TimeGridScrollView.tsx
new file mode 100644
index 00000000..e4a3d0d6
--- /dev/null
+++ b/src/components/calendar/TimeGridScrollView.tsx
@@ -0,0 +1,706 @@
+import React from 'react';
+import {
+  Animated,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+  type FlatList,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type ViewToken,
+} from 'react-native';
+import { differenceInCalendarDays, format, type Locale } from 'date-fns';
+import type { Calendar, CalendarEvent } from '../../api/types';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
+import { useCalendarLocale } from '../../lib/calendar-locale';
+import {
+  buildEventDayIndex,
+  dayKey,
+  eventsOnDayFromIndex,
+  getEventColor,
+  isTimedEventFullDayOnDate,
+  layoutOverlappingEvents,
+  type CalendarWeekSegment,
+  type EventDayIndex,
+  type TimedEventLayout,
+} from '../../lib/calendar-utils';
+import type { CalendarFocus, DayRange } from '../../lib/calendar-scroll-window';
+import {
+  buildAllDaySegments,
+  headerColumnRange,
+  hourAtOffset,
+  timeGridFocusColumn,
+  windowDays,
+  type TimeGridMode,
+} from '../../lib/calendar-time-grid';
+
+const HOUR_HEIGHT = 48;
+const GRID_HEIGHT = 24 * HOUR_HEIGHT;
+const GUTTER_WIDTH = 44;
+const HEADER_HEIGHT = 60;
+const ALL_DAY_CHIP_HEIGHT = 18;
+const ALL_DAY_GAP = 2;
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const VIEWABILITY_CONFIG = { itemVisiblePercentThreshold: 50 };
+const KEEP_VISIBLE_CONTENT = { minIndexForVisible: 0 };
+
+type WeekStart = 0 | 1 | 6;
+type TimeFormat = '12h' | '24h';
+
+interface TimeGridScrollViewProps {
+  mode: TimeGridMode;
+  /** The day the user navigated to; its week (week view) or itself (day view) is scrolled into view. */
+  focus: CalendarFocus;
+  /** The loaded window: one column per day. */
+  window: DayRange;
+  selectedDate: Date;
+  events: CalendarEvent[];
+  calendars: Calendar[];
+  eventsByDay?: EventDayIndex;
+  weekStartsOn?: WeekStart;
+  timeFormat?: TimeFormat;
+  /** Widen the window at the start; omitted once the limit is reached. */
+  onExtendStart?: () => void;
+  /** Widen the window at the end; omitted once the limit is reached. */
+  onExtendEnd?: () => void;
+  /** Reports the first day in view as the user scrolls. */
+  onVisibleDateChange?: (date: Date) => void;
+  onSelectDate?: (date: Date) => void;
+  onSelectEvent?: (event: CalendarEvent) => void;
+  onCreateAtTime?: (date: Date) => void;
+}
+
+/**
+ * Freely scrolling week and day grids (#759, webmail 15a5497a): one column
+ * per day of the window in a horizontal list that snaps to whole days
+ * (seven on screen in the week view, one in the day view), inside one
+ * vertical scroller for the hours. The day headers and the all-day strip
+ * sit above it and follow the sideways scroll on the native thread.
+ * Reaching either end widens the window; columns added at the start keep
+ * the ones on screen in place. The screen remounts the grid (keyed by the
+ * window) when navigation starts a fresh window.
+ */
+function TimeGridScrollViewInner({
+  mode,
+  focus,
+  window,
+  selectedDate,
+  events,
+  calendars,
+  eventsByDay,
+  weekStartsOn = 0,
+  timeFormat = '24h',
+  onExtendStart,
+  onExtendEnd,
+  onVisibleDateChange,
+  onSelectDate,
+  onSelectEvent,
+  onCreateAtTime,
+}: TimeGridScrollViewProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const { locale, t } = useCalendarLocale();
+  const index = React.useMemo(
+    () => eventsByDay ?? buildEventDayIndex(events),
+    [eventsByDay, events],
+  );
+
+  const perScreen = mode === 'week' ? 7 : 1;
+  const { width: screenWidth } = useWindowDimensions();
+  const [rootWidth, setRootWidth] = React.useState(screenWidth);
+  const listWidth = Math.max(perScreen, rootWidth - GUTTER_WIDTH);
+  const colWidth = listWidth / perScreen;
+  const handleRootLayout = React.useCallback((e: LayoutChangeEvent) => {
+    const width = e.nativeEvent.layout.width;
+    if (width > 0) setRootWidth(width);
+  }, []);
+
+  // One column per day of the window. A day keeps its Date across window
+  // changes so growing the window doesn't re-render the columns already
+  // there.
+  const dayCacheRef = React.useRef(new Map<string, Date>());
+  const days = React.useMemo(() => {
+    const previous = dayCacheRef.current;
+    const next = new Map<string, Date>();
+    const out = windowDays(window).map((day) => {
+      const key = dayKey(day);
+      const kept = previous.get(key) ?? day;
+      next.set(key, kept);
+      return kept;
+    });
+    dayCacheRef.current = next;
+    return out;
+  }, [window]);
+  const daysRef = React.useRef(days);
+  daysRef.current = days;
+
+  // Timed layouts per day, computed when a column first renders and kept
+  // until the events change.
+  // (A new day index means new events: start an empty cache.)
+  const layoutCache = React.useMemo(() => new Map<string, TimedEventLayout[]>(), [index]);
+  const layoutsFor = React.useCallback(
+    (day: Date) => {
+      const key = dayKey(day);
+      let layouts = layoutCache.get(key);
+      if (!layouts) {
+        const timed = eventsOnDayFromIndex(index, day).filter(
+          (e) => !e.showWithoutTime && !isTimedEventFullDayOnDate(e, day),
+        );
+        layouts = layoutOverlappingEvents(timed, day);
+        layoutCache.set(key, layouts);
+      }
+      return layouts;
+    },
+    [index, layoutCache],
+  );
+
+  // All-day bars over the whole window (cut per week, or per day in the day
+  // view), so the strip keeps one height while scrolling.
+  const allDaySegments = React.useMemo<CalendarWeekSegment[]>(
+    () => buildAllDaySegments(index, days, perScreen),
+    [index, days, perScreen],
+  );
+  const allDayRows = React.useMemo(
+    () => allDaySegments.reduce((max, s) => Math.max(max, s.row + 1), 0),
+    [allDaySegments],
+  );
+  const allDayHeight = allDayRows > 0 ? allDayRows * (ALL_DAY_CHIP_HEIGHT + ALL_DAY_GAP) + spacing.xs : 0;
+
+  // The first column in view. Kept as a day so columns added at the start
+  // don't move it.
+  const [initialColumn] = React.useState(() =>
+    timeGridFocusColumn(window, focus.date, mode, weekStartsOn, days.length),
+  );
+  const firstDayRef = React.useRef<Date>(days[initialColumn] ?? window.start);
+  const [headerAnchor, setHeaderAnchor] = React.useState<Date>(firstDayRef.current);
+  const headerAnchorRef = React.useRef(headerAnchor);
+
+  const scrollX = React.useRef(new Animated.Value(0)).current;
+  const headerTranslate = React.useMemo(() => Animated.multiply(scrollX, -1), [scrollX]);
+  const colWidthRef = React.useRef(colWidth);
+  colWidthRef.current = colWidth;
+  // Last sideways offset the list reported.
+  const offsetXRef = React.useRef(0);
+
+  // Days added at the start shift the header cells right as soon as they
+  // render; maintainVisibleContentPosition shifts the list by the same
+  // amount natively. Move the header along now instead of waiting for the
+  // list's scroll event, which may come a frame later (or, at rest, not
+  // before the next scroll).
+  const windowStartRef = React.useRef(window.start);
+  React.useLayoutEffect(() => {
+    const added = differenceInCalendarDays(windowStartRef.current, window.start);
+    windowStartRef.current = window.start;
+    if (added <= 0) return;
+    offsetXRef.current += added * colWidthRef.current;
+    scrollX.setValue(offsetXRef.current);
+  }, [window.start, scrollX]);
+  const handleScroll = React.useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+        useNativeDriver: true,
+        listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+          const list = daysRef.current;
+          offsetXRef.current = e.nativeEvent.contentOffset.x;
+          const col = Math.max(
+            0,
+            Math.min(list.length - 1, Math.round(e.nativeEvent.contentOffset.x / colWidthRef.current)),
+          );
+          const day = list[col];
+          if (!day) return;
+          firstDayRef.current = day;
+          // Redraw the header cells once the view moved a screen away.
+          const moved = Math.abs(differenceInCalendarDays(day, headerAnchorRef.current));
+          if (moved >= perScreen) {
+            headerAnchorRef.current = day;
+            setHeaderAnchor(day);
+          }
+        },
+      }),
+    [scrollX, perScreen],
+  );
+
+  // The day at the start of the viewport drives the title.
+  const visibleHandlerRef = React.useRef(onVisibleDateChange);
+  visibleHandlerRef.current = onVisibleDateChange;
+  const lastVisibleKeyRef = React.useRef<string | null>(null);
+  const onViewableItemsChanged = React.useRef(({ viewableItems }: { viewableItems: ViewToken[] }) => {
+    let first: Date | null = null;
+    for (const token of viewableItems) {
+      const day = token.item as Date;
+      if (!first || day < first) first = day;
+    }
+    if (!first) return;
+    const key = dayKey(first);
+    if (key === lastVisibleKeyRef.current) return;
+    lastVisibleKeyRef.current = key;
+    visibleHandlerRef.current?.(first);
+  }).current;
+
+  // Navigation inside the window scrolls its week / day to the start. The
+  // grid mounts there already, so its own nonce needs nothing.
+  const listRef = React.useRef<FlatList<Date>>(null);
+  const handledNonceRef = React.useRef(focus.nonce);
+  React.useEffect(() => {
+    if (handledNonceRef.current === focus.nonce) return;
+    handledNonceRef.current = focus.nonce;
+    const target = timeGridFocusColumn(window, focus.date, mode, weekStartsOn, days.length);
+    const current = Math.max(0, differenceInCalendarDays(firstDayRef.current, window.start));
+    listRef.current?.scrollToIndex({
+      index: target,
+      animated: Math.abs(target - current) <= perScreen * 2,
+    });
+  }, [focus, window, mode, weekStartsOn, days.length, perScreen]);
+
+  // Start the hours at the one before now, like the paged week view.
+  const vScrollRef = React.useRef<ScrollView>(null);
+  React.useEffect(() => {
+    const target = Math.max(0, (new Date().getHours() - 1) * HOUR_HEIGHT);
+    const frame = requestAnimationFrame(() => {
+      vScrollRef.current?.scrollTo({ y: target, animated: false });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
+  const [nowMinutes, setNowMinutes] = React.useState(() => {
+    const now = new Date();
+    return now.getHours() * 60 + now.getMinutes();
+  });
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      const now = new Date();
+      setNowMinutes(now.getHours() * 60 + now.getMinutes());
+    }, 60_000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleLongPressAt = React.useCallback(
+    (day: Date, hour: number) => {
+      if (!onCreateAtTime) return;
+      const date = new Date(day);
+      date.setHours(hour, 0, 0, 0);
+      onCreateAtTime(date);
+    },
+    [onCreateAtTime],
+  );
+
+  const todayKey = dayKey(new Date());
+  const renderItem = React.useCallback(
+    ({ item: day }: ListRenderItemInfo<Date>) => (
+      <DayColumn
+        day={day}
+        layouts={layoutsFor(day)}
+        width={colWidth}
+        nowMinutes={dayKey(day) === todayKey ? nowMinutes : -1}
+        calendars={calendars}
+        timeFormat={timeFormat}
+        styles={styles}
+        onSelectEvent={onSelectEvent}
+        onLongPressAt={onCreateAtTime ? handleLongPressAt : undefined}
+      />
+    ),
+    [layoutsFor, colWidth, todayKey, nowMinutes, calendars, timeFormat, styles, onSelectEvent, onCreateAtTime, handleLongPressAt],
+  );
+
+  const getItemLayout = React.useCallback(
+    (_: ArrayLike<Date> | null | undefined, i: number) => ({ length: colWidth, offset: colWidth * i, index: i }),
+    [colWidth],
+  );
+
+  // Header cells and all-day bars for the columns around the viewport.
+  const anchorIndex = Math.max(0, Math.min(days.length - 1, differenceInCalendarDays(headerAnchor, window.start)));
+  const { from, to } = headerColumnRange(anchorIndex, perScreen, days.length);
+  const selectedKey = dayKey(selectedDate);
+  const headerCells: React.ReactNode[] = [];
+  for (let i = from; i <= to; i++) {
+    const day = days[i];
+    const key = dayKey(day);
+    headerCells.push(
+      <DayHeaderCell
+        key={key}
+        day={day}
+        left={i * colWidth}
+        width={colWidth}
+        today={key === todayKey}
+        selected={key === selectedKey}
+        wide={perScreen === 1}
+        locale={locale}
+        styles={styles}
+        onPress={onSelectDate}
+      />,
+    );
+  }
+  const visibleSegments = allDaySegments.filter(
+    (s) => s.startIndex <= to && s.startIndex + s.span - 1 >= from,
+  );
+
+  const threshold = perScreen === 1 ? 3 : 1;
+  const scrollable = days.length > perScreen || !!onExtendStart || !!onExtendEnd;
+  // A new column width (rotation, split screen) remounts the list at the
+  // day that was at the start.
+  const listKey = Math.round(colWidth * 100);
+  const initialIndexRef = React.useRef<{ key: number; index: number } | null>(null);
+  if (initialIndexRef.current === null || initialIndexRef.current.key !== listKey) {
+    initialIndexRef.current = {
+      key: listKey,
+      index: Math.max(
+        0,
+        Math.min(days.length - 1, differenceInCalendarDays(firstDayRef.current, window.start)),
+      ),
+    };
+  }
+  const listStyle = React.useMemo(() => ({ width: listWidth, height: GRID_HEIGHT }), [listWidth]);
+
+  return (
+    <View style={styles.container} onLayout={handleRootLayout}>
+      <View style={styles.headerRow}>
+        <View style={styles.gutter}>
+          <View style={{ height: HEADER_HEIGHT }} />
+          {allDayHeight > 0 && (
+            <View style={[styles.allDayLabelWrap, { height: allDayHeight }]}>
+              <Text style={styles.allDayLabel} numberOfLines={2}>
+                {t('calendar.events.all_day', 'All day')}
+              </Text>
+            </View>
+          )}
+        </View>
+        <View style={[styles.headerClip, { width: listWidth, height: HEADER_HEIGHT + allDayHeight }]}>
+          <Animated.View
+            style={[
+              styles.headerStrip,
+              { width: days.length * colWidth, transform: [{ translateX: headerTranslate }] },
+            ]}
+          >
+            {headerCells}
+            {visibleSegments.map((segment) => {
+              const color = getEventColor(segment.event, calendars);
+              return (
+                <Pressable
+                  key={`${segment.event.id}:${segment.startIndex}:${segment.row}`}
+                  onPress={() => onSelectEvent?.(segment.event)}
+                  style={[
+                    styles.allDayChip,
+                    {
+                      left: segment.startIndex * colWidth + 1,
+                      width: segment.span * colWidth - 2,
+                      top: HEADER_HEIGHT + 2 + segment.row * (ALL_DAY_CHIP_HEIGHT + ALL_DAY_GAP),
+                      backgroundColor: color + '33',
+                      borderLeftColor: color,
+                      borderTopLeftRadius: segment.continuesBefore ? 0 : radius.xs,
+                      borderBottomLeftRadius: segment.continuesBefore ? 0 : radius.xs,
+                      borderTopRightRadius: segment.continuesAfter ? 0 : radius.xs,
+                      borderBottomRightRadius: segment.continuesAfter ? 0 : radius.xs,
+                    },
+                  ]}
+                >
+                  <Text style={styles.allDayChipText} numberOfLines={1}>
+                    {segment.continuesBefore ? '… ' : ''}
+                    {segment.event.title || t('calendar.events.no_title', '(No title)')}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </Animated.View>
+        </View>
+      </View>
+
+      <ScrollView ref={vScrollRef} style={styles.vScroll} showsVerticalScrollIndicator={false}>
+        <View style={styles.gridRow}>
+          <View style={styles.gutter}>
+            {HOURS.map((h) => (
+              <View key={h} style={styles.hourLabelCell}>
+                {h > 0 && (
+                  <Text style={styles.hourLabel}>
+                    {timeFormat === '12h'
+                      ? `${(h % 12) || 12} ${h < 12 ? 'AM' : 'PM'}`
+                      : `${h.toString().padStart(2, '0')}:00`}
+                  </Text>
+                )}
+              </View>
+            ))}
+          </View>
+          <View style={{ width: listWidth, height: GRID_HEIGHT }}>
+            <View style={StyleSheet.absoluteFill} pointerEvents="none">
+              {HOURS.map((h) => (
+                <View key={h} style={[styles.hourLine, { top: (h + 1) * HOUR_HEIGHT - 1 }]} />
+              ))}
+            </View>
+            <Animated.FlatList
+              key={listKey}
+              ref={listRef}
+              horizontal
+              data={days}
+              keyExtractor={dayKey}
+              renderItem={renderItem}
+              getItemLayout={getItemLayout}
+              initialScrollIndex={initialIndexRef.current.index}
+              // Days added at the start keep the columns on screen in place.
+              maintainVisibleContentPosition={KEEP_VISIBLE_CONTENT}
+              onStartReached={onExtendStart}
+              onStartReachedThreshold={threshold}
+              onEndReached={onExtendEnd}
+              onEndReachedThreshold={threshold}
+              onScroll={handleScroll}
+              scrollEventThrottle={16}
+              snapToInterval={colWidth}
+              decelerationRate="fast"
+              disableIntervalMomentum={perScreen === 1}
+              scrollEnabled={scrollable}
+              showsHorizontalScrollIndicator={false}
+              onViewableItemsChanged={onViewableItemsChanged}
+              viewabilityConfig={VIEWABILITY_CONFIG}
+              initialNumToRender={perScreen + 2}
+              maxToRenderPerBatch={perScreen + 1}
+              windowSize={perScreen === 1 ? 5 : 3}
+              style={listStyle}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+export const TimeGridScrollView = React.memo(TimeGridScrollViewInner);
+
+type GridStyles = ReturnType<typeof makeStyles>;
+
+const DayHeaderCell = React.memo(function DayHeaderCell({
+  day,
+  left,
+  width,
+  today,
+  selected,
+  wide,
+  locale,
+  styles,
+  onPress,
+}: {
+  day: Date;
+  left: number;
+  width: number;
+  today: boolean;
+  selected: boolean;
+  wide: boolean;
+  locale: Locale;
+  styles: GridStyles;
+  onPress?: (date: Date) => void;
+}) {
+  return (
+    <Pressable style={[styles.dayHeaderCell, { left, width }]} onPress={() => onPress?.(day)}>
+      <Text style={styles.dayHeaderWeekday} numberOfLines={1}>
+        {format(day, wide ? 'EEEE' : 'EEE', { locale })}
+      </Text>
+      <View
+        style={[
+          styles.dayHeaderNumber,
+          today && styles.dayHeaderNumberToday,
+          selected && !today && styles.dayHeaderNumberSelected,
+        ]}
+      >
+        <Text
+          style={[
+            styles.dayHeaderNumberText,
+            today && styles.dayHeaderNumberTextToday,
+            selected && !today && styles.dayHeaderNumberTextSelected,
+          ]}
+        >
+          {format(day, 'd')}
+        </Text>
+      </View>
+    </Pressable>
+  );
+});
+
+const DayColumn = React.memo(function DayColumn({
+  day,
+  layouts,
+  width,
+  nowMinutes,
+  calendars,
+  timeFormat,
+  styles,
+  onSelectEvent,
+  onLongPressAt,
+}: {
+  day: Date;
+  layouts: TimedEventLayout[];
+  width: number;
+  /** Minutes since midnight for today's column, -1 for the others. */
+  nowMinutes: number;
+  calendars: Calendar[];
+  timeFormat: TimeFormat;
+  styles: GridStyles;
+  onSelectEvent?: (event: CalendarEvent) => void;
+  onLongPressAt?: (day: Date, hour: number) => void;
+}) {
+  const { t } = useCalendarLocale();
+  const handleLongPress = React.useCallback(
+    (e: GestureResponderEvent) => {
+      onLongPressAt?.(day, hourAtOffset(e.nativeEvent.locationY, HOUR_HEIGHT));
+    },
+    [onLongPressAt, day],
+  );
+  return (
+    <Pressable
+      style={[styles.dayCol, { width }]}
+      onLongPress={onLongPressAt ? handleLongPress : undefined}
+    >
+      {layouts.map(({ event, column, totalColumns, startMinutes, endMinutes }) => {
+        const top = (startMinutes / 60) * HOUR_HEIGHT;
+        const height = Math.max(20, ((endMinutes - startMinutes) / 60) * HOUR_HEIGHT - 1);
+        const widthPct = 100 / totalColumns;
+        const color = getEventColor(event, calendars);
+        return (
+          <Pressable
+            key={event.id}
+            onPress={() => onSelectEvent?.(event)}
+            style={[
+              styles.eventBlock,
+              {
+                top,
+                height,
+                left: `${column * widthPct}%`,
+                width: `${widthPct}%`,
+                backgroundColor: color + '33',
+                borderLeftColor: color,
+              },
+            ]}
+          >
+            <Text style={styles.eventBlockTitle} numberOfLines={1}>
+              {event.title || t('calendar.events.no_title', '(No title)')}
+            </Text>
+            {height > 32 && (
+              <Text style={styles.eventBlockTime} numberOfLines={1}>
+                {minutesToTimeLabel(startMinutes, timeFormat)}
+              </Text>
+            )}
+          </Pressable>
+        );
+      })}
+      {nowMinutes >= 0 && (
+        <View pointerEvents="none" style={[styles.nowLine, { top: (nowMinutes / 60) * HOUR_HEIGHT }]}>
+          <View style={styles.nowDot} />
+          <View style={styles.nowBar} />
+        </View>
+      )}
+    </Pressable>
+  );
+});
+
+// Event-block start label; honours the 12h/24h setting like the gutter does.
+function minutesToTimeLabel(minutes: number, timeFormat: TimeFormat): string {
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  const mm = m.toString().padStart(2, '0');
+  if (timeFormat === '12h') {
+    return `${(h % 12) || 12}:${mm} ${h < 12 ? 'AM' : 'PM'}`;
+  }
+  return `${h.toString().padStart(2, '0')}:${mm}`;
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
+  headerRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: c.border,
+  },
+  gutter: { width: GUTTER_WIDTH },
+  headerClip: { overflow: 'hidden' },
+  headerStrip: { position: 'absolute', left: 0, top: 0, bottom: 0 },
+  dayHeaderCell: {
+    position: 'absolute',
+    top: 0,
+    height: HEADER_HEIGHT,
+    alignItems: 'center',
+    paddingVertical: spacing.sm,
+    gap: 4,
+  },
+  dayHeaderWeekday: {
+    ...typography.small,
+    color: c.textMuted,
+    textTransform: 'uppercase',
+  },
+  dayHeaderNumber: {
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dayHeaderNumberToday: { backgroundColor: c.primary },
+  dayHeaderNumberSelected: {
+    backgroundColor: c.primaryBg,
+    borderWidth: 1,
+    borderColor: c.primary,
+  },
+  dayHeaderNumberText: { ...typography.bodyMedium, color: c.text },
+  dayHeaderNumberTextToday: { color: c.textInverse, fontWeight: '700' },
+  dayHeaderNumberTextSelected: { color: c.primary, fontWeight: '600' },
+
+  allDayLabelWrap: { alignItems: 'flex-end', justifyContent: 'flex-start', paddingRight: 4, paddingTop: 2 },
+  allDayLabel: { ...typography.small, color: c.textMuted, textAlign: 'right' },
+  allDayChip: {
+    position: 'absolute',
+    height: ALL_DAY_CHIP_HEIGHT,
+    borderLeftWidth: 2,
+    paddingHorizontal: 4,
+    justifyContent: 'center',
+  },
+  allDayChipText: { fontSize: 10, color: c.text, fontWeight: '500' },
+
+  vScroll: { flex: 1 },
+  gridRow: { flexDirection: 'row', height: GRID_HEIGHT },
+  hourLabelCell: { height: HOUR_HEIGHT, paddingRight: 4, alignItems: 'flex-end' },
+  hourLabel: {
+    ...typography.small,
+    color: c.textMuted,
+    transform: [{ translateY: -6 }],
+  },
+  hourLine: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 1,
+    backgroundColor: c.borderLight,
+  },
+  dayCol: {
+    height: GRID_HEIGHT,
+    borderLeftWidth: 1,
+    borderLeftColor: c.border,
+  },
+  eventBlock: {
+    position: 'absolute',
+    borderRadius: radius.xs,
+    borderLeftWidth: 2,
+    paddingHorizontal: 3,
+    paddingVertical: 2,
+    overflow: 'hidden',
+  },
+  eventBlockTitle: { fontSize: 10, color: c.text, fontWeight: '600' },
+  eventBlockTime: { fontSize: 9, color: c.textMuted, marginTop: 1 },
+  nowLine: {
+    position: 'absolute',
+    left: -3,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  nowDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: c.error,
+  },
+  nowBar: { flex: 1, height: 1, backgroundColor: c.error },
+  });
+}
diff --git a/src/components/settings/CalendarSettings.tsx b/src/components/settings/CalendarSettings.tsx
index c3410421..27217677 100644
--- a/src/components/settings/CalendarSettings.tsx
+++ b/src/components/settings/CalendarSettings.tsx
@@ -63,19 +63,16 @@ export function CalendarSettings() {
     ];
   }, [deviceZone, timeZone, t]);
 
-  // The mobile app has no dedicated day grid ("day" falls back to the
-  // agenda), so the option isn't offered; a synced "day" value shows as Agenda.
-  const effectiveView: CalendarView = viewMode === 'day' ? 'agenda' : viewMode;
-
   return (
     <SettingsSection title={t('calendar.settings.title', 'Calendar')}>
       <SettingItem label={t('calendar.settings.default_view', 'Default view')}>
         <Select
-          value={effectiveView}
+          value={viewMode}
           onChange={(v) => update('calendarDefaultView', v as CalendarView)}
           options={[
             { value: 'month', label: t('calendar.views.month', 'Month') },
             { value: 'week', label: t('calendar.views.week', 'Week') },
+            { value: 'day', label: t('calendar.views.day', 'Day') },
             { value: 'agenda', label: t('calendar.views.agenda', 'Agenda') },
           ]}
         />
diff --git a/src/lib/__tests__/calendar-time-grid.test.ts b/src/lib/__tests__/calendar-time-grid.test.ts
new file mode 100644
index 00000000..6b86e444
--- /dev/null
+++ b/src/lib/__tests__/calendar-time-grid.test.ts
@@ -0,0 +1,207 @@
+import { describe, it, expect } from 'vitest';
+import type { CalendarEvent } from '../../api/types';
+import {
+  buildEventDayIndex,
+  buildTimedFullDayWeekSegments,
+  dayKey,
+  isTimedEventFullDayOnDate,
+} from '../calendar-utils';
+import {
+  computeScrollWindow,
+  freshScrollWindowState,
+  growScrollWindow,
+} from '../calendar-scroll-window';
+import {
+  buildAllDaySegments,
+  headerColumnRange,
+  hourAtOffset,
+  timeGridFocusColumn,
+  timedFullDaySegments,
+  windowDays,
+} from '../calendar-time-grid';
+
+const opts = { weekStartsOn: 1 as const };
+const ev = (id: string, start: string, duration: string, extra: Partial<CalendarEvent> = {}) =>
+  ({ id, title: id, start, duration, ...extra }) as CalendarEvent;
+
+describe('windowDays', () => {
+  it('has one column per day of the window, midnight to midnight', () => {
+    const days = windowDays({ start: new Date(2026, 9, 24), end: new Date(2026, 9, 27) });
+    expect(days.map(dayKey)).toEqual(['2026-10-24', '2026-10-25', '2026-10-26', '2026-10-27']);
+    // Across the DST change the days stay on local midnight.
+    expect(days.every((d) => d.getHours() === 0)).toBe(true);
+  });
+
+  it('grows at the start by the added days only', () => {
+    const state = freshScrollWindowState('day', new Date(2026, 8, 9));
+    const before = windowDays(computeScrollWindow(state, opts));
+    const after = windowDays(computeScrollWindow(growScrollWindow(state, 'before'), opts));
+    expect(after.length - before.length).toBe(30);
+    expect(after.slice(30).map(dayKey)).toEqual(before.map(dayKey));
+  });
+});
+
+describe('timeGridFocusColumn', () => {
+  const win = computeScrollWindow(
+    growScrollWindow(freshScrollWindowState('week', new Date(2026, 8, 9)), 'before'),
+    opts,
+  );
+  const count = windowDays(win).length;
+
+  it('aligns the focused week in the week view', () => {
+    const col = timeGridFocusColumn(win, new Date(2026, 8, 10), 'week', 1, count);
+    expect(dayKey(windowDays(win)[col])).toBe('2026-09-07');
+  });
+
+  it('aligns the focused day in the day view', () => {
+    const col = timeGridFocusColumn(win, new Date(2026, 8, 10, 15), 'day', 1, count);
+    expect(dayKey(windowDays(win)[col])).toBe('2026-09-10');
+  });
+
+  it('stays inside the columns', () => {
+    expect(timeGridFocusColumn(win, new Date(2020, 0, 1), 'day', 1, count)).toBe(0);
+    expect(timeGridFocusColumn(win, new Date(2030, 0, 1), 'day', 1, count)).toBe(count - 1);
+  });
+});
+
+describe('headerColumnRange', () => {
+  it('covers the screen plus two screens either side', () => {
+    expect(headerColumnRange(20, 7, 100)).toEqual({ from: 6, to: 40 });
+    expect(headerColumnRange(20, 1, 100)).toEqual({ from: 18, to: 22 });
+  });
+
+  it('is clamped to the columns there are', () => {
+    expect(headerColumnRange(0, 7, 10)).toEqual({ from: 0, to: 9 });
+  });
+});
+
+describe('timedFullDaySegments', () => {
+  const week = windowDays({ start: new Date(2026, 8, 7), end: new Date(2026, 8, 13) });
+
+  it('finds the whole days a timed event covers', () => {
+    // Tue 10:00 .. Fri 15:00 covers Wed and Thu in full.
+    const segments = timedFullDaySegments([ev('trip', '2026-09-08T10:00:00', 'P3DT5H')], week);
+    expect(segments).toHaveLength(1);
+    expect(segments[0]).toMatchObject({ startIndex: 2, span: 2, continuesBefore: false, continuesAfter: false });
+  });
+
+  it('marks events that run past the given days', () => {
+    const segments = timedFullDaySegments([ev('long', '2026-09-01T00:00:00', 'P20D')], week);
+    expect(segments[0]).toMatchObject({ startIndex: 0, span: 7, continuesBefore: true, continuesAfter: true });
+  });
+
+  it('skips events that fill no whole day and all-day events', () => {
+    const segments = timedFullDaySegments(
+      [
+        ev('meeting', '2026-09-08T10:00:00', 'PT1H'),
+        ev('allday', '2026-09-08T00:00:00', 'P1D', { showWithoutTime: true }),
+      ],
+      week,
+    );
+    expect(segments).toEqual([]);
+  });
+
+  it('agrees with the per-day version', () => {
+    const events = [
+      ev('a', '2026-09-08T10:00:00', 'P3DT5H'),
+      ev('b', '2026-09-07T00:00:00', 'P1D'),
+      ev('c', '2026-09-12T00:00:00', 'P4D'),
+      ev('d', '2026-09-09T08:00:00', 'PT2H'),
+    ];
+    const pick = (s: { event: CalendarEvent; startIndex: number; span: number; continuesBefore: boolean; continuesAfter: boolean }) =>
+      `${s.event.id}:${s.startIndex}+${s.span}:${s.continuesBefore}:${s.continuesAfter}`;
+    expect(timedFullDaySegments(events, week).map(pick).sort()).toEqual(
+      buildTimedFullDayWeekSegments(events, week).map(pick).sort(),
+    );
+  });
+});
+
+describe('timedFullDaySegments across DST changes', () => {
+  // Europe and the US change clocks on these weekends; whichever zone the
+  // tests run in, the strip must agree with the grid's per-day test.
+  const spans = [
+    { start: new Date(2026, 2, 5), end: new Date(2026, 2, 31) },
+    { start: new Date(2026, 9, 20), end: new Date(2026, 10, 5) },
+  ];
+  const events = [
+    ev('conf-eu-spring', '2026-03-27T09:00:00', 'P4D'),
+    ev('trip-us-spring', '2026-03-07T00:00:00', 'P3D'),
+    ev('trip-eu-fall', '2026-10-24T00:00:00', 'P2D'),
+    ev('camp-us-fall', '2026-10-30T12:00:00', 'P4DT2H'),
+    ev('nearly', '2026-10-25T00:00:00', 'PT23H59M59S'),
+  ];
+
+  for (const span of spans) {
+    const days = windowDays(span);
+
+    it(`matches the per-day version (${dayKey(span.start)})`, () => {
+      const key = (s: { event: CalendarEvent; startIndex: number; span: number; continuesBefore: boolean; continuesAfter: boolean }) =>
+        `${s.event.id}:${s.startIndex}+${s.span}:${s.continuesBefore}:${s.continuesAfter}`;
+      expect(timedFullDaySegments(events, days).map(key).sort()).toEqual(
+        buildTimedFullDayWeekSegments(events, days).map(key).sort(),
+      );
+    });
+
+    it(`puts an event in the strip exactly on the days the grid leaves it out (${dayKey(span.start)})`, () => {
+      const segments = timedFullDaySegments(events, days);
+      for (const event of events) {
+        days.forEach((day, i) => {
+          const inStrip = segments.some(
+            (s) => s.event === event && i >= s.startIndex && i < s.startIndex + s.span,
+          );
+          expect(inStrip, `${event.id} on ${dayKey(day)}`).toBe(isTimedEventFullDayOnDate(event, day));
+        });
+      }
+    });
+  }
+});
+
+describe('buildAllDaySegments', () => {
+  const days = windowDays({ start: new Date(2026, 8, 7), end: new Date(2026, 8, 20) });
+
+  it('cuts bars at every week so each part carries its title', () => {
+    const index = buildEventDayIndex([
+      ev('holiday', '2026-09-10T00:00:00', 'P7D', { showWithoutTime: true }),
+    ]);
+    const segments = buildAllDaySegments(index, days, 7);
+    expect(segments.map((s) => [s.startIndex, s.span, s.continuesBefore, s.continuesAfter])).toEqual([
+      [3, 4, false, true],
+      [7, 3, true, false],
+    ]);
+  });
+
+  it('cuts per day in the day view', () => {
+    const index = buildEventDayIndex([
+      ev('holiday', '2026-09-10T00:00:00', 'P2D', { showWithoutTime: true }),
+    ]);
+    expect(buildAllDaySegments(index, days, 1).map((s) => s.startIndex)).toEqual([3, 4]);
+  });
+
+  it('includes timed events that fill a day and packs overlaps into rows', () => {
+    const index = buildEventDayIndex([
+      ev('a', '2026-09-08T00:00:00', 'P2D', { showWithoutTime: true }),
+      ev('b', '2026-09-09T00:00:00', 'P1D', { showWithoutTime: true }),
+      ev('c', '2026-09-08T00:00:00', 'P1D'),
+      ev('meeting', '2026-09-08T10:00:00', 'PT1H'),
+    ]);
+    const segments = buildAllDaySegments(index, days, 7);
+    expect(segments.map((s) => s.event.id).sort()).toEqual(['a', 'b', 'c']);
+    const rows = Math.max(...segments.map((s) => s.row)) + 1;
+    expect(rows).toBe(2);
+  });
+
+  it('is empty without all-day events', () => {
+    const index = buildEventDayIndex([ev('meeting', '2026-09-08T10:00:00', 'PT1H')]);
+    expect(buildAllDaySegments(index, days, 7)).toEqual([]);
+  });
+});
+
+describe('hourAtOffset', () => {
+  it('maps a press in a column to its hour', () => {
+    expect(hourAtOffset(0, 48)).toBe(0);
+    expect(hourAtOffset(47.9, 48)).toBe(0);
+    expect(hourAtOffset(48 * 13 + 5, 48)).toBe(13);
+    expect(hourAtOffset(48 * 30, 48)).toBe(23);
+    expect(hourAtOffset(-4, 48)).toBe(0);
+  });
+});
diff --git a/src/lib/calendar-time-grid.ts b/src/lib/calendar-time-grid.ts
new file mode 100644
index 00000000..ff62fad1
--- /dev/null
+++ b/src/lib/calendar-time-grid.ts
@@ -0,0 +1,144 @@
+import { addDays, differenceInCalendarDays, startOfDay, startOfWeek } from 'date-fns';
+import type { CalendarEvent } from '../api/types';
+import {
+  buildWeekSegmentsRaw,
+  eventsOnDayFromIndex,
+  getEventEndDate,
+  getEventStartDate,
+  isTimedEventFullDayOnDate,
+  packWeekSegments,
+  type CalendarWeekSegment,
+  type EventDayIndex,
+} from './calendar-utils';
+import type { DayRange, WeekStartsOn } from './calendar-scroll-window';
+
+/**
+ * Geometry of the freely scrolling week and day grids (#759, webmail
+ * calendar-week-view / calendar-day-view): one column per day of the
+ * window, scrolling sideways and snapping to whole days.
+ */
+
+export type TimeGridMode = 'week' | 'day';
+
+/** Every day of the window, in order. */
+export function windowDays(window: DayRange): Date[] {
+  const count = differenceInCalendarDays(window.end, window.start) + 1;
+  const days: Date[] = [];
+  for (let i = 0; i < count; i++) days.push(addDays(window.start, i));
+  return days;
+}
+
+/**
+ * The column navigation aligns with the start of the viewport: the focused
+ * week's first day in the week view, the focused day in the day view.
+ */
+export function timeGridFocusColumn(
+  window: DayRange,
+  date: Date,
+  mode: TimeGridMode,
+  weekStartsOn: WeekStartsOn,
+  columnCount: number,
+): number {
+  const target = mode === 'week' ? startOfWeek(date, { weekStartsOn }) : startOfDay(date);
+  const index = differenceInCalendarDays(target, window.start);
+  return Math.max(0, Math.min(columnCount - 1, index));
+}
+
+/**
+ * The columns whose header cells are drawn: the ones on screen plus two
+ * screens either side, so a fling doesn't outrun them.
+ */
+export function headerColumnRange(
+  firstVisible: number,
+  perScreen: number,
+  columnCount: number,
+): { from: number; to: number } {
+  const margin = perScreen * 2;
+  return {
+    from: Math.max(0, firstVisible - margin),
+    to: Math.min(columnCount - 1, firstVisible + perScreen - 1 + margin),
+  };
+}
+
+/**
+ * Segments for timed events that fill whole days within `days`, which must
+ * be consecutive. Same result as buildTimedFullDayWeekSegments (the same
+ * isTimedEventFullDayOnDate test, so the strip and the timed grid agree on
+ * every day, DST days included), but each event is only tested on the days
+ * it spans instead of on every day: the scrolling grids hand in months of
+ * days (#759).
+ */
+export function timedFullDaySegments(
+  events: CalendarEvent[],
+  days: Date[],
+): CalendarWeekSegment[] {
+  if (days.length === 0) return [];
+  const firstDay = startOfDay(days[0]);
+  const last = days.length - 1;
+  const out: CalendarWeekSegment[] = [];
+  const push = (event: CalendarEvent, from: number, to: number) => {
+    out.push({
+      event,
+      startIndex: from,
+      span: to - from + 1,
+      row: -1,
+      continuesBefore: isTimedEventFullDayOnDate(event, addDays(days[from], -1)),
+      continuesAfter: isTimedEventFullDayOnDate(event, addDays(days[to], 1)),
+    });
+  };
+  for (const event of events) {
+    if (event.showWithoutTime) continue;
+    const from = Math.max(0, differenceInCalendarDays(getEventStartDate(event), firstDay));
+    const to = Math.min(last, differenceInCalendarDays(getEventEndDate(event), firstDay));
+    if (!(from <= to)) continue;
+    let runStart = -1;
+    for (let i = from; i <= to; i++) {
+      if (isTimedEventFullDayOnDate(event, days[i])) {
+        if (runStart < 0) runStart = i;
+      } else if (runStart >= 0) {
+        push(event, runStart, i - 1);
+        runStart = -1;
+      }
+    }
+    if (runStart >= 0) push(event, runStart, to);
+  }
+  return out;
+}
+
+/**
+ * The all-day strip over the window: all-day events plus timed events that
+ * fill whole days, as bars packed into rows. Bars are cut at every
+ * `chunkSize` days (a week, or a day in the day view) so each part carries
+ * its title where it is on screen. Only events found in the day index for
+ * these days are considered.
+ */
+export function buildAllDaySegments(
+  index: EventDayIndex,
+  days: Date[],
+  chunkSize: number,
+): CalendarWeekSegment[] {
+  const raw: CalendarWeekSegment[] = [];
+  const size = Math.max(1, Math.floor(chunkSize));
+  for (let from = 0; from < days.length; from += size) {
+    const chunk = days.slice(from, from + size);
+    const seen = new Set<string>();
+    const allDay: CalendarEvent[] = [];
+    const timed: CalendarEvent[] = [];
+    for (const day of chunk) {
+      for (const event of eventsOnDayFromIndex(index, day)) {
+        if (seen.has(event.id)) continue;
+        seen.add(event.id);
+        (event.showWithoutTime ? allDay : timed).push(event);
+      }
+    }
+    for (const segment of [...buildWeekSegmentsRaw(allDay, chunk), ...timedFullDaySegments(timed, chunk)]) {
+      raw.push({ ...segment, startIndex: segment.startIndex + from });
+    }
+  }
+  return packWeekSegments(raw);
+}
+
+/** The hour a long press at `offsetY` in a day column lands on. */
+export function hourAtOffset(offsetY: number, hourHeight: number): number {
+  return Math.max(0, Math.min(23, Math.floor(offsetY / hourHeight)));
+}
diff --git a/src/screens/CalendarScreen.tsx b/src/screens/CalendarScreen.tsx
index 06ca9b31..e5c885e9 100644
--- a/src/screens/CalendarScreen.tsx
+++ b/src/screens/CalendarScreen.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Alert,
   AppState,
+  I18nManager,
   View,
   Text,
   StyleSheet,
@@ -15,6 +16,7 @@ import {
   ChevronLeft,
   ChevronRight,
   Plus,
+  Calendar1,
   CalendarDays,
   LayoutGrid,
   List as ListIcon,
@@ -26,6 +28,7 @@ import {
   startOfWeek,
   endOfWeek,
   addDays,
+  subDays,
   isToday,
   addMonths,
   subMonths,
@@ -42,6 +45,7 @@ import { useSettingsStore } from '../stores/settings-store';
 import { MonthView } from '../components/calendar/MonthView';
 import { MonthScrollView } from '../components/calendar/MonthScrollView';
 import { WeekView } from '../components/calendar/WeekView';
+import { TimeGridScrollView } from '../components/calendar/TimeGridScrollView';
 import { AgendaView } from '../components/calendar/AgendaView';
 import { EventCard } from '../components/calendar/EventCard';
 import { EventDetailSheet } from '../components/calendar/EventDetailSheet';
@@ -102,7 +106,7 @@ import { shareEventICS } from '../lib/calendar-ics-export';
 import * as Clipboard from 'expo-clipboard';
 import type { Calendar, CalendarEvent, RecurrenceRule } from '../api/types';
 
-type ViewMode = 'month' | 'week' | 'agenda';
+type ViewMode = 'month' | 'week' | 'day' | 'agenda';
 type PendingAction =
   | {
       kind: 'edit';
@@ -126,17 +130,21 @@ const RANGE_MARGIN_DAYS = 14;
 
 type WeekStart = 0 | 1 | 6;
 
+// `firstDay`: the scrolled week grid reports the first column in view; the
+// title then spans the seven days from there instead of the focused week.
 function headerTitle(
   viewMode: ViewMode,
   currentDate: Date,
   weekStartsOn: WeekStart,
   locale: Locale,
+  firstDay?: Date | null,
 ): string {
   if (viewMode === 'month') return format(currentDate, 'MMMM yyyy', { locale });
+  if (viewMode === 'day') return format(currentDate, 'EEE, MMM d, yyyy', { locale });
   if (viewMode === 'week') {
-    const start = startOfWeek(currentDate, { weekStartsOn });
-    const end = endOfWeek(currentDate, { weekStartsOn });
-    if (start.getMonth() === end.getMonth()) {
+    const start = firstDay ?? startOfWeek(currentDate, { weekStartsOn });
+    const end = firstDay ? addDays(firstDay, 6) : endOfWeek(currentDate, { weekStartsOn });
+    if (start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear()) {
       return `${format(start, 'MMM d', { locale })} – ${format(end, 'd, yyyy', { locale })}`;
     }
     return `${format(start, 'MMM d', { locale })} – ${format(end, 'MMM d, yyyy', { locale })}`;
@@ -165,21 +173,18 @@ export default function CalendarScreen() {
   const contacts = useContactsStore((s) => s.contacts);
 
   const [selectedDate, setSelectedDate] = React.useState(() => new Date());
-  // Day view falls back to Agenda on mobile (we don't have a dedicated day
-  // grid yet, but the agenda already serves the same purpose).
   const initialViewMode: ViewMode =
-    calendarDefaultView === 'week' ? 'week'
-    : calendarDefaultView === 'day' || calendarDefaultView === 'agenda' ? 'agenda'
-    : 'month';
+    calendarDefaultView === 'week' || calendarDefaultView === 'day' || calendarDefaultView === 'agenda'
+      ? calendarDefaultView
+      : 'month';
   const [viewMode, setViewMode] = React.useState<ViewMode>(initialViewMode);
 
   // Scroll window (#759, webmail calendar-app): every view shows a window of
   // days around the day the user navigated to (the "focus"). With free
-  // scrolling (the default) the agenda and the month scroll continuously:
-  // reaching an edge widens that side and only the new days are fetched.
-  // Otherwise, and in the week view, a view shows exactly one period.
-  // Navigation moves the focus and, when that leaves the window, starts a
-  // fresh window there.
+  // scrolling (the default) the views scroll continuously: reaching an edge
+  // widens that side and only the new days are fetched. Otherwise a view
+  // shows exactly one period. Navigation moves the focus and, when that
+  // leaves the window, starts a fresh window there.
   const windowOptions = React.useMemo<ScrollWindowOptions>(
     () => ({ weekStartsOn: calendarFirstDayOfWeek }),
     [calendarFirstDayOfWeek],
@@ -190,7 +195,10 @@ export default function CalendarScreen() {
   const [windowState, setWindowState] = React.useState<ScrollWindowState>(
     () => freshScrollWindowState(initialViewMode, new Date()),
   );
-  const freeScroll = calendarFreeScroll && (viewMode === 'agenda' || viewMode === 'month');
+  // The sideways-scrolling week and day grids assume a left-to-right strip;
+  // right-to-left layouts keep them paged.
+  const freeScroll =
+    calendarFreeScroll && ((viewMode !== 'week' && viewMode !== 'day') || !I18nManager.isRTL);
   const focusKey = dayKey(focus.date);
   const activeWindowState = React.useMemo(
     () =>
@@ -458,12 +466,20 @@ export default function CalendarScreen() {
   // away from the focused day.
   const goPrev = React.useCallback(() => {
     const base = visibleDate ?? focus.date;
-    jumpTo(viewMode === 'week' ? subWeeks(base, 1) : subMonths(base, 1));
+    jumpTo(
+      viewMode === 'week' ? subWeeks(base, 1)
+      : viewMode === 'day' ? subDays(base, 1)
+      : subMonths(base, 1),
+    );
   }, [viewMode, visibleDate, focus.date, jumpTo]);
 
   const goNext = React.useCallback(() => {
     const base = visibleDate ?? focus.date;
-    jumpTo(viewMode === 'week' ? addWeeks(base, 1) : addMonths(base, 1));
+    jumpTo(
+      viewMode === 'week' ? addWeeks(base, 1)
+      : viewMode === 'day' ? addDays(base, 1)
+      : addMonths(base, 1),
+    );
   }, [viewMode, visibleDate, focus.date, jumpTo]);
 
   const goToday = React.useCallback(() => {
@@ -896,8 +912,15 @@ export default function CalendarScreen() {
           <Menu size={20} color={c.text} />
         </Pressable>
         <View style={styles.headerLeft}>
-          <Text style={styles.headerTitle}>
-            {headerTitle(viewMode, visibleDate ?? focus.date, calendarFirstDayOfWeek, locale)}
+          {/* Four view buttons leave less room: shrink a long title instead of wrapping it. */}
+          <Text style={styles.headerTitle} numberOfLines={1} adjustsFontSizeToFit minimumFontScale={0.75}>
+            {headerTitle(
+              viewMode,
+              visibleDate ?? focus.date,
+              calendarFirstDayOfWeek,
+              locale,
+              viewMode === 'week' && freeScroll ? visibleDate : null,
+            )}
           </Text>
           <Text style={styles.headerSubtitle}>
             {isSelectedToday
@@ -916,9 +939,12 @@ export default function CalendarScreen() {
             </Pressable>
           )}
           <View style={styles.viewToggle}>
-            {(['month', 'week', 'agenda'] as ViewMode[]).map((mode) => {
+            {(['month', 'week', 'day', 'agenda'] as ViewMode[]).map((mode) => {
               const Icon =
-                mode === 'month' ? LayoutGrid : mode === 'week' ? CalendarDays : ListIcon;
+                mode === 'month' ? LayoutGrid
+                : mode === 'week' ? CalendarDays
+                : mode === 'day' ? Calendar1
+                : ListIcon;
               const active = viewMode === mode;
               return (
                 <Pressable
@@ -991,7 +1017,27 @@ export default function CalendarScreen() {
             onLongPressDate={openCreate}
           />
         )}
-        {viewMode === 'week' && (
+        {(viewMode === 'day' || (viewMode === 'week' && freeScroll)) && (
+          <TimeGridScrollView
+            key={windowKey}
+            mode={viewMode === 'day' ? 'day' : 'week'}
+            focus={focus}
+            window={scrollWindow}
+            onExtendStart={freeScroll && scrollWindow.canExtendStart ? extendWindowStart : undefined}
+            onExtendEnd={freeScroll && scrollWindow.canExtendEnd ? extendWindowEnd : undefined}
+            onVisibleDateChange={freeScroll ? setVisibleDate : undefined}
+            selectedDate={selectedDate}
+            events={events}
+            eventsByDay={eventsByDay}
+            calendars={calendars}
+            weekStartsOn={calendarFirstDayOfWeek}
+            timeFormat={calendarTimeFormat}
+            onSelectDate={handleSelectDate}
+            onSelectEvent={handleSelectEvent}
+            onCreateAtTime={openCreate}
+          />
+        )}
+        {viewMode === 'week' && !freeScroll && (
           <WeekView
             weekDate={focus.date}
             selectedDate={selectedDate}
@@ -1245,7 +1291,7 @@ function makeStyles(c: ThemePalette) {
     padding: 2,
   },
   viewToggleBtn: {
-    width: 32,
+    width: 30,
     height: 32,
     alignItems: 'center',
     justifyContent: 'center',