Skip to main content
Date picking lives on MonthList, the vertically-scrolling month list. It takes the selection props and renders the selection as a background band across the span (no per-day circle), so it stays distinct from the “today” badge.

​
Range selection with useDateRange

useDateRange owns the start/end state machine: the first press sets the start, the second sets the end (auto-swapping if you tap an earlier day), and a third press starts over. 
import { MonthList, useDateRange } from "react-native-super-calendar";

function RangePicker() {
  const [date, setDate] = useState(new Date());
  const { range, onPressDate, selectRange } = useDateRange();

  return (
    <MonthList
      date={date}
      weekStartsOn={1}
      selectedRange={range ?? undefined}
      onPressDay={onPressDate}
      onSelectDrag={selectRange}
      onChangeVisibleMonth={setDate}
    />
  );
}
Tap two days to set the ends, or drag to sweep out a range: long-press a day and drag, and the list auto-scrolls at the edges so a range can span months. Wire onSelectDrag to useDateRange’s selectRange.

​
Single and multiple days

selectedDates marks discrete days. Drive it from onPressDay: 
const [picked, setPicked] = useState<Date[]>([]);

<MonthList
  date={date}
  weekStartsOn={1}
  selectedDates={picked}
  onPressDay={(day) => setPicked((prev) => [...prev, day])}
  onChangeVisibleMonth={setDate}
/>;

​
Disabled days

minDate, maxDate, and isDateDisabled render days dimmed, ignore taps, and keep them out of any selection (drag included). Pass the same constraints to useDateRange so a rejected day never opens a range: 
const minDate = useMemo(() => new Date(), []); // no past dates
const { range, onPressDate, selectRange } = useDateRange({ minDate });

<MonthList
  date={date}
  weekStartsOn={1}
  selectedRange={range ?? undefined}
  minDate={minDate}
  isDateDisabled={(d) => d.getDay() === 0} // also block Sundays
  onPressDay={onPressDate}
  onSelectDrag={selectRange}
/>;
Selection is a rangeBackground band over the span; there is no per-day selected circle by default, so the “today” badge stays distinct. See Theming for the token.