WeekCalendar

Horizontal scrollable week calendar component for displaying a weekly view

The WeekCalendar component displays a horizontal scrollable week view, perfect for showing a focused weekly calendar interface.

The WeekCalendar should be wrapped with CalendarProvider to work properly.

Basic usage

import { CalendarProvider, WeekCalendar } from 'react-native-calendars';

<CalendarProvider date="2023-05-16">
  <WeekCalendar
    firstDay={1}
    markedDates={{
      '2023-05-16': {marked: true}
    }}
  />
</CalendarProvider>

Props

WeekCalendar extends all CalendarList props.

Display options

allowShadow · boolean · default: "true"

Whether to have shadow/elevation for the calendar.

hideDayNames · boolean

Hide day names (Mon, Tue, etc.) at the top of the week calendar.

firstDay · number · default: "0"

First day of the week (0 = Sunday, 1 = Monday).

Calendar styling

theme · Theme

Theme object for styling the calendar.

{
  backgroundColor: '#ffffff',
  calendarBackground: '#ffffff',
  selectedDayBackgroundColor: '#00adf5',
  selectedDayTextColor: '#ffffff',
  todayTextColor: '#00adf5'
}

style · ViewStyle

Custom style for the week calendar container.

calendarWidth · number

Width of the calendar. Defaults to screen width.

Marking dates

markedDates · MarkedDates

Collection of dates that need to be marked. Only dates visible in the current week will be shown.

markedDates={{
  '2023-05-16': {
    marked: true,
    dotColor: 'red',
    selected: true,
    selectedColor: 'blue'
  }
}}

Event handlers

onDayPress · (date: DateData) => void

Handler which gets executed on day press. If not provided, the CalendarProvider’s setDate will be used.

onDayPress={(day) => {
  console.log('selected day', day);
}}

Context props

When used with CalendarProvider, the WeekCalendar automatically receives:

• date - Current selected date
• numberOfDays - Number of days to display (for custom day ranges)
• setDate - Function to update the selected date
• timelineLeftInset - Left inset for timeline integration

Accessibility

testID · string

Test identifier for automated testing.

Examples

Basic week calendar

import { CalendarProvider, WeekCalendar } from 'react-native-calendars';
import { useState } from 'react';

function MyWeekCalendar() {
  const [selected, setSelected] = useState('2023-05-16');

  return (
    <CalendarProvider date={selected}>
      <WeekCalendar
        firstDay={1}
        markedDates={{
          [selected]: {selected: true, selectedColor: 'blue'}
        }}
        onDayPress={(day) => setSelected(day.dateString)}
      />
    </CalendarProvider>
  );
}

Week calendar with custom theme

<CalendarProvider date="2023-05-16">
  <WeekCalendar
    theme={{
      backgroundColor: '#f5f5f5',
      calendarBackground: '#ffffff',
      selectedDayBackgroundColor: '#00adf5',
      selectedDayTextColor: '#ffffff',
      todayTextColor: '#00adf5',
      dayTextColor: '#2d4150',
      textDisabledColor: '#d9e1e8',
      dotColor: '#00adf5',
      selectedDotColor: '#ffffff'
    }}
  />
</CalendarProvider>

Week calendar without shadow

<CalendarProvider date="2023-05-16">
  <WeekCalendar
    allowShadow={false}
    style={{borderBottomWidth: 1, borderColor: '#e0e0e0'}}
  />
</CalendarProvider>

Week calendar with marked dates

<CalendarProvider date="2023-05-16">
  <WeekCalendar
    markedDates={{
      '2023-05-15': {marked: true, dotColor: 'red'},
      '2023-05-16': {selected: true, marked: true, selectedColor: 'blue'},
      '2023-05-17': {marked: true, dotColor: 'green'},
      '2023-05-18': {disabled: true, disableTouchEvent: true}
    }}
  />
</CalendarProvider>

Week calendar with custom day count

<CalendarProvider
  date="2023-05-16"
  numberOfDays={5} // Show only 5 days
>
  <WeekCalendar
    firstDay={1} // Start from Monday
  />
</CalendarProvider>

Week calendar without day names

<CalendarProvider date="2023-05-16">
  <WeekCalendar
    hideDayNames={true}
    style={{height: 80}}
  />
</CalendarProvider>

Complete example with timeline

import {
  CalendarProvider,
  WeekCalendar,
  TimelineList
} from 'react-native-calendars';
import { useState } from 'react';

function WeeklySchedule() {
  const [selected, setSelected] = useState('2023-05-16');
  const [events, setEvents] = useState({
    '2023-05-16': [
      {start: '2023-05-16 09:00:00', end: '2023-05-16 10:00:00', title: 'Meeting'}
    ]
  });

  return (
    <CalendarProvider date={selected}>
      <WeekCalendar
        firstDay={1}
        markedDates={{
          [selected]: {selected: true}
        }}
      />
      <TimelineList
        events={events}
        timelineProps={{
          start: 8,
          end: 18
        }}
      />
    </CalendarProvider>
  );
}

Internal behavior

The WeekCalendar component:

• Renders a horizontal FlatList with multiple weeks (6 pages before and after the current week)
• Automatically syncs with CalendarProvider’s date
• Handles week navigation through scrolling
• Updates the parent context when scrolling to a different week
• Supports custom number of days through CalendarProvider’s numberOfDays prop

Notes

Always wrap WeekCalendar with CalendarProvider. The component relies on the context provided by CalendarProvider to function properly.

The WeekCalendar only displays marked dates that are visible in the current week. Dates outside the visible week range will not show their markings.

When using numberOfDays in CalendarProvider, the WeekCalendar will display that number of days instead of the full week.

Related components

• CalendarProvider - Required wrapper component
• ExpandableCalendar - Uses WeekCalendar internally
• Timeline - Can be used together for a weekly schedule view