Hide week by default

[deezyomar]

Is it possible to hide the week view on the calendar? I want users to be able to pan to view the week and then the month, rather than having the week view displayed by default.

The week view is displayed by default.

[mensonones]

Week not displayed by default. Follow example

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Calendar } from 'react-native-calendars';

const BasicCalendar = () => {
  return (
    <View style={styles.container}>
      <Calendar
        style={{ width: 300 }}
        current={'2025-01-07'}
        onDayPress={(day) => {
          console.log('Selected day:', day.dateString);
        }}
        markedDates={{
          '2025-01-07': { selected: true, marked: true, selectedColor: 'blue' },
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default BasicCalendar;

Change view from month to week

import React, {useState} from 'react';
import {View, Button, StyleSheet} from 'react-native';
import {
  CalendarProvider,
  WeekCalendar,
  Calendar,
} from 'react-native-calendars';

const WeeklyMonthlyCalendar = () => {
  const [selected, setSelected] = useState('2025-01-07');
  const [isWeeklyView, setIsWeeklyView] = useState(true);

  return (
    <View style={styles.container}>
      <Button
        title={isWeeklyView ? 'Month View' : 'Week View'}
        onPress={() => setIsWeeklyView(!isWeeklyView)}
      />

      <CalendarProvider date={selected}>
        {isWeeklyView ? (
          <WeekCalendar
            firstDay={1}
            theme={{
              calendarBackground: '#ffffff',
              textSectionTitleColor: '#b6c1cd',
              selectedDayBackgroundColor: '#00adf5',
              selectedDayTextColor: '#ffffff',
              todayTextColor: '#00adf5',
              dayTextColor: '#2d4150',
              textDisabledColor: '#d9e1e8',
              dotColor: '#00adf5',
              selectedDotColor: '#ffffff',
              arrowColor: 'orange',
              monthTextColor: 'blue',
              indicatorColor: 'blue',
              textDayFontFamily: 'monospace',
              textMonthFontFamily: 'monospace',
              textDayHeaderFontFamily: 'monospace',
              textDayFontWeight: '300',
              textMonthFontWeight: 'bold',
              textDayHeaderFontWeight: '300',
              textDayFontSize: 16,
              textMonthFontSize: 16,
              textDayHeaderFontSize: 16
            }}
          />
        ) : (
          <Calendar
            style={{width: 343}}
            current={'2025-01-07'}
            onDayPress={(day: { dateString: string }) => {
              console.log('Selected day:', day.dateString);
            }}
            markedDates={{
              '2025-01-07': {
                selected: true,
                marked: true,
                selectedColor: 'blue',
              },
            }}
          />
        )}
      </CalendarProvider>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20,
  },
});

export default WeeklyMonthlyCalendar;

There must be better examples, but the idea is this?

[deezyomar]

Hey thanks for the reply. I am looking to configure the expandable calendar to something like my edited photo listed below. This when I can hide the week and then expand it to the week and then the month.

Before:

After: