Time grid

<Calendar
  mode="week"
  date={date}
  events={events}
  scrollOffsetMinutes={8 * 60} // open scrolled to 8am
  onChangeDate={setDate}
/>

​

Scroll to a time

import { useRef, useState } from "react";
import { Button } from "react-native";
import { Calendar, type CalendarEvent, type CalendarHandle } from "@super-calendar/native";

function WeekWithNowButton({ events }: { events: CalendarEvent[] }) {
  const [date, setDate] = useState(new Date());
  const calendar = useRef<CalendarHandle>(null);
  const scrollToNow = () => {
    const now = new Date();
    calendar.current?.scrollToTime(now.getHours() * 60 + now.getMinutes());
  };
  return (
    <>
      <Button title="Now" onPress={scrollToNow} />
      <Calendar ref={calendar} mode="week" date={date} events={events} onChangeDate={setDate} />
    </>
  );
}

​

The hour axis

• minHour / maxHour — clamp the visible window (e.g. 7–20) instead of the full day.
• hourHeight — initial pixels per hour.
• Zooming rescales it between minHourHeight and maxHourHeight: pinch on native, Ctrl/⌘ + wheel on the web.
• timeslots — sub-hour divider lines per hour (e.g. 2 for half-hours).
• ampm — 12-hour labels; hourComponent replaces the label entirely.
• hideHours — collapse the hour gutter (the grid lines stay).
• The hour column is a single column beside the day columns, in the same scroll view, so it scrolls and zooms with them and holds still while you swipe between pages. Style it through the hourGutter slot.
• showWeekNumber / weekNumberPrefix — ISO week number in the header gutter.
• hiddenDays — weekdays (0=Sunday…6=Saturday) dropped from the view, e.g. [0, 6] for a Monday–Friday business week. Count-based views keep their column count by skipping hidden days.

​

Event boxes

• minEventHeight — the floor on a box’s pixel height, so a 5-minute event stays legible and tappable. It is also the floor of the boxHeight passed to your renderEvent. Default 32 on native, 14 on the dom renderer. Pass 0 to size every box strictly by its duration.
• eventGap — the inset in pixels between a box and its slot on each side, so adjacent boxes and column edges get some breathing room. Default 2 on native, 1 on the dom renderer. Pass 0 to let events fill the full slot.

<Calendar
  mode="week"
  date={date}
  events={events}
  minEventHeight={0}
  eventGap={0}
  renderEvent={MyEvent}
  onChangeDate={setDate}
/>

​

Pull to refresh

​

The all-day lane

​

Now line and business hours

// Open 9-12 and 13-17: the 12-13 lunch hour shades closed too.
businessHours={() => [
  { start: 9, end: 12 },
  { start: 13, end: 17 },
]}

<Calendar
  mode="week"
  date={date}
  events={events}
  businessHours={() => ({ start: 9, end: 17 })}
  renderBusinessHours={({ start }) => <ClosedBand label={start === 0 ? "Opens 9am" : "Closed"} />}
  onChangeDate={setDate}
  onPressEvent={onPress}
/>

​

Interaction

​

Custom header (React Native)

• renderTimeGridHeader={(days: Date[]) => ReactNode} replaces the built-in day-header row with a single fixed header above the grid (it does not page). The week-number gutter and the tappable weekday/date buttons disappear, and your element renders full-width in their place. days is the visible page’s dates in column order. The all-day lane and the grid itself stay. To line your columns up with the grid’s, leave a leading spacer as wide as the hour gutter (hourColumnWidth, default 56, or 0 with hideHours). The built-in header, by contrast, pages with the columns.
• headerComponent={<YourToolbar />} inserts an element, unchanged, above the grid. It takes no arguments and replaces nothing, and it doesn’t scroll with the hours. The built-in day header now pages with the columns, so headerComponent sits above that paged weekday/date row. Use it for a filter row, an avatar strip, or your own toolbar.
• renderHeaderForMonthView={(weekDays: Date[]) => ReactNode} is the month-grid equivalent of renderTimeGridHeader: it replaces the weekday-label header; return null to hide it.

<Calendar
  mode="week"
  date={date}
  events={events}
  headerComponent={
    <View style={{ flexDirection: "row", padding: 8 }}>
      <TeamFilter value={team} onChange={setTeam} />
    </View>
  }
  onChangeDate={setDate}
  onPressEvent={onPress}
/>