Flash Calendar

https://marceloprado.github.io/flash-calendar
Admin
Flash Calendar is a fast and flexible React Native library for building customizable calendars with...
Tokens:8,490
Snippets:73
Trust Score:9.7
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Flash Calendar Package

Source: https://marceloprado.github.io/flash-calendar

Add the Flash Calendar package to your project using npm.

```bash
npm add @marceloterreiro/flash-calendar  

```

--------------------------------

### Slow Calendar.List with Date Ranges (Problematic)

Source: https://marceloprado.github.io/flash-calendar/fundamentals/troubleshooting

This example demonstrates performance issues with Calendar.List due to excessive re-renders when date ranges change. Avoid this pattern; it's for illustrating the problem.

```typescript
import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";
import { addMonths } from "date-fns";
import { Text } from "react-native";

const todayId = toDateId(new Date());
const maxDateId = toDateId(addMonths(new Date(), 12));

export const SlowExample = () => {
  const [dateIds, setDateIds] = useState<string[]>([]);
  const dateRanges = dateIds.map((dateId) => ({
    startId: dateId,
    endId: dateId,
  }));

  return (
    <Calendar.VStack alignItems="stretch" grow spacing={12}>
      <Text>⚠️ Don't copy-paste this example, it has performance issues</Text>

      <Calendar.List
        calendarActiveDateRanges={dateRanges}
        calendarInitialMonthId={todayId}
        calendarMaxDateId={maxDateId}
        calendarMinDateId={todayId}
        onCalendarDayPress={(dateId) => {
          if (dateIds.includes(dateId)) {
            setDateIds(dateIds.filter((id) => id !== dateId));
          } else {
            setDateIds([...dateIds, dateId]);
          }
        }}
      />
    </Calendar.VStack>
  );
};

```

--------------------------------

### FlashList Integration for Scroll Performance

Source: https://marceloprado.github.io/flash-calendar/fundamentals/principles

The `<Calendar.List />` component is a wrapper around FlashList, inheriting its performance characteristics. Performance tuning guides for FlashList apply directly.

```javascript
import { FlashList } from '@shopify/flash-list';

const CalendarList = () => (
  <FlashList
    data={/* your dates */}
    renderItem={({ item }) => <CalendarItem item={item} />}
    estimatedItemSize={100} // Example size
  />
);
```

--------------------------------

### Apply Linear Theme to Calendar - JavaScript

Source: https://marceloprado.github.io/flash-calendar/fundamentals/customization

This example demonstrates how to create a custom theme object to style the calendar, mimicking the appearance of Linear's calendar. It defines styles for various calendar elements like month headers, week names, and day items, including active and today states.

```javascript
import { CalendarTheme } from "@marceloterreiro/flash-calendar";

const linearAccent = "#585ABF";

const linearTheme: CalendarTheme = {
  rowMonth: {
    content: {
      textAlign: "left",
      color: "rgba(255, 255, 255, 0.5)",
      fontWeight: "700",
    },
  },
  rowWeek: {
    container: {
      borderBottomWidth: 1,
      borderBottomColor: "rgba(255, 255, 255, 0.1)",
      borderStyle: "solid",
    },
  },
  itemWeekName: { content: { color: "rgba(255, 255, 255, 0.5)" } },
  itemDayContainer: {
    activeDayFiller: {
      backgroundColor: linearAccent,
    },
  },
  itemDay: {
    idle: ({ isPressed, isWeekend }) => ({
      container: {
        backgroundColor: isPressed ? linearAccent : "transparent",
        borderRadius: 4,
      },
      content: {
        color: isWeekend && !isPressed ? "rgba(255, 255, 255, 0.5)" : "#ffffff",
      },
    }),
    today: ({ isPressed }) => ({
      container: {
        borderColor: "rgba(255, 255, 255, 0.5)",
        borderRadius: isPressed ? 4 : 30,
        backgroundColor: isPressed ? linearAccent : "transparent",
      },
      content: {
        color: isPressed ? "#ffffff" : "rgba(255, 255, 255, 0.5)",
      },
    }),
    active: ({ isEndOfRange, isStartOfRange }) => ({
      container: {
        backgroundColor: linearAccent,
        borderTopLeftRadius: isStartOfRange ? 4 : 0,
        borderBottomLeftRadius: isStartOfRange ? 4 : 0,
        borderTopRightRadius: isEndOfRange ? 4 : 0,
        borderBottomRightRadius: isEndOfRange ? 4 : 0,
      },
      content: {
        color: "#ffffff",
      },
    }),
  },
};

export const LinearCalendar = memo(() => {
  return (
    <Calendar
      calendarDayHeight={30}
      calendarFirstDayOfWeek="sunday"
      calendarMonthId={toDateId(new Date())}
      calendarRowHorizontalSpacing={16}
      calendarRowVerticalSpacing={16}
      onCalendarDayPress={(dateId) => console.log(`Pressed date ${dateId}`)}
      theme={linearTheme}
    />
  );
});

```

--------------------------------

### Demonstrate Scrolling Backwards Limitation in Calendar

Source: https://marceloprado.github.io/flash-calendar/fundamentals/limitations

This example shows the limitation where the calendar does not scroll past the initial month when attempting to scroll backwards. It highlights the expected versus actual behavior.

```javascript
export const ScrollingBackwardsLimitation = () => {
  return (
    <VStack alignItems="stretch" grow spacing={12}>
      <Text>Notice how it doesn't scroll past January</Text>

      <Calendar.List
        calendarFutureScrollRangeInMonths={1}
        calendarInitialMonthId="2024-02-01"
        calendarMaxDateId="2024-05-01"
        calendarPastScrollRangeInMonths={1}
        onCalendarDayPress={loggingHandler("onCalendarDayPress")}
      />
    </VStack>
  );
};

```

--------------------------------

### Optimized Calendar.List with Date Ranges (Solution)

Source: https://marceloprado.github.io/flash-calendar/fundamentals/troubleshooting

This example shows the corrected approach for Calendar.List performance issues using a memoized `onCalendarDayPress` handler and the updater function pattern. This prevents unnecessary re-renders.

```typescript
import type { CalendarOnDayPress } from "@marceloterreiro/flash-calendar";
import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";
import { addMonths } from "date-fns";
import { useCallback, useState } from "react";
import { Text } from "react-native";

const todayId = toDateId(new Date());
const maxDateId = toDateId(addMonths(new Date(), 12));

export const SlowExampleAddressed = () => {
  const [dateIds, setDateIds] = useState<string[]>([]);
  const dateRanges = dateIds.map((dateId) => ({
    startId: dateId,
    endId: dateId,
  }));

  // This is the fix: memoized onCalendarDayPress and updater function pattern
  // It keeps `BaseCalendar` props stable, allowing each month to skip re-renders
  const handleCalendarDayPress = useCallback<CalendarOnDayPress>((dateId) => {
    setDateIds((dateIds) => {
      if (dateIds.includes(dateId)) {
        return dateIds.filter((id) => id !== dateId);
      } else {
        return [...dateIds, dateId];
      }
    });
  }, []);

  return (
    <Calendar.VStack alignItems="stretch" grow spacing={12}>
      <Text>✅ This is safe to copy, perf issues addressed</Text>

      <Calendar.List
        calendarActiveDateRanges={dateRanges}
        calendarInitialMonthId={todayId}
        calendarMaxDateId={maxDateId}
        calendarMinDateId={todayId}
        onCalendarDayPress={handleCalendarDayPress}
      />
    </Calendar.VStack>
  );
};

```

--------------------------------

### Customize Calendar Theme with Interaction States

Source: https://marceloprado.github.io/flash-calendar/fundamentals/customization

Leverage `isHovered` and `isFocused` alongside `isPressed` to support web Pressable InteractionStates. This example defines a custom theme for a linear calendar appearance.

```typescript
import { CalendarTheme } from "@marceloterreiro/flash-calendar";

const linearAccent = "#585ABF";

const linearTheme: CalendarTheme = {
  rowMonth: {
    content: {
      textAlign: "left",
      color: "rgba(255, 255, 255, 0.5)",
      fontWeight: "700",
    },
  },
  rowWeek: {
    container: {
      borderBottomWidth: 1,
      borderBottomColor: "rgba(255, 255, 255, 0.1)",
      borderStyle: "solid",
    },
  },
  itemWeekName: { content: { color: "rgba(255, 255, 255, 0.5)" } },
  itemDayContainer: {
    activeDayFiller: {
      backgroundColor: linearAccent,
    },
  },
  itemDay: {
    idle: ({ isPressed, isHovered, isWeekend }) => ({
      container: {
        backgroundColor: isPressed || isHovered ? linearAccent : "transparent",
        borderRadius: 4,
      },
      content: {
        color: isWeekend && !isPressed ? "rgba(255, 255, 255, 0.5)" : "#ffffff",
      },
    }),
    today: ({ isPressed, isHovered }) => ({
      container: {
        borderColor: "rgba(255, 255, 255, 0.5)",
        borderRadius: isPressed || isHovered ? 4 : 30,
        backgroundColor: isPressed || isHovered ? linearAccent : "transparent",
      },
      content: {
        color: isPressed || isHovered ? "#ffffff" : "rgba(255, 255, 255, 0.5)",
      },
    }),
    active: ({ isEndOfRange, isStartOfRange }) => ({
      container: {
        backgroundColor: linearAccent,
        borderTopLeftRadius: isStartOfRange ? 4 : 0,
        borderBottomLeftRadius: isStartOfRange ? 4 : 0,
        borderTopRightRadius: isEndOfRange ? 4 : 0,
        borderBottomRightRadius: isEndOfRange ? 4 : 0,
      },
      content: {
        color: "#ffffff",
      },
    }),
  },
};

export const LinearCalendar = memo(() => {
  return (
    <Calendar
      calendarDayHeight={30}
      calendarFirstDayOfWeek="sunday"
      calendarMonthId={toDateId(new Date())}
      calendarRowHorizontalSpacing={16}
      calendarRowVerticalSpacing={16}
      onCalendarDayPress={(dateId) => console.log(`Pressed date ${dateId}`)}
      theme={linearTheme}
    />
  );
});

```

--------------------------------

### Basic Calendar Usage

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Renders a minimal Calendar component. Use this for a standard calendar view. Ensure `toDateId` is imported for date formatting.

```javascript
import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";
import { useState } from "react";
import { Text, View } from "react-native";

const today = toDateId(new Date());

export function BasicCalendar() {
  const [selectedDate, setSelectedDate] = useState(today);
  return (
    <View>
      <Text>Selected date: {selectedDate}</Text>
      <Calendar
        calendarActiveDateRanges={[
          {
            startId: selectedDate,
            endId: selectedDate,
          },
        ]}
        calendarMonthId={today}
        onCalendarDayPress={setSelectedDate}
      />
    </View>
  );
}

```

--------------------------------

### Recommended Date ID Conversion with toDateId

Source: https://marceloprado.github.io/flash-calendar/fundamentals/tips-and-tricks

This is the recommended approach for converting dates to Date IDs and back, ensuring consistency and avoiding timezone pitfalls.

```javascript
const endOfJanuaryId = toDateId("2024-01-31");  
const endOfJanuary = fromDateId(endOfJanuaryId); // Date object  
```

--------------------------------

### Basic Calendar List Usage

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Renders a minimal Calendar.List component for a scrollable month view. Use this when you need a list of calendar days. Ensure `toDateId` is imported for date formatting.

```javascript
import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";
import { useState } from "react";
import { Text, View } from "react-native";

const today = toDateId(new Date());

export function BasicCalendarList() {
  const [selectedDate, setSelectedDate] = useState(today);

  return (
    <View style={{ flex: 1 }}>
      <Text>Selected date: {selectedDate}</Text>
      <Calendar.List
        calendarActiveDateRanges={[
          {
            startId: selectedDate,
            endId: selectedDate,
          },
        ]}
        calendarInitialMonthId={today}
        onCalendarDayPress={setSelectedDate}
      />
    </View>
  );
}

```

--------------------------------

### Render Two Calendars

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Use the `calendarInstanceId` prop to render multiple independent calendars on the same screen. This allows for managing separate states and interactions for each calendar instance.

```javascript
import { Calendar, useDateRange } from "@marceloterreiro/flash-calendar";
  
export const TwoCalendarsMounted = () => {
  const dateRangeOne = useDateRange();
  const dateRangeTwo = useDateRange();
  return (
    <VStack grow spacing={48}>
      <VStack grow spacing={4}>
        <Text>First calendar</Text>
        <Calendar
          calendarInstanceId="First"
          calendarMonthId="2024-08-01"
          {...dateRangeOne}
        />
      </VStack>
      <VStack grow spacing={4}>
        <Text>Second calendar</Text>
        <Calendar
          calendarInstanceId="Second"
          calendarMonthId="2024-08-01"
          {...dateRangeTwo}
        />
      </VStack>
    </VStack>
  );
};

```

--------------------------------

### Bring Your Own Date Formatting Library

Source: https://marceloprado.github.io/flash-calendar/fundamentals/principles

Flash Calendar allows users to integrate their preferred date formatting library (e.g., `date-fns`, `dayjs`) to avoid adding bloat and provide full control over localization.

```javascript
import { Calendar } from 'flash-calendar';
import { format } from 'date-fns'; // Example using date-fns

const MyCalendar = () => (
  <Calendar
    date={new Date()}
    renderDateCell={({ date }) => (
      <div className="date-cell">
        {format(date, 'dd')}
      </div>
    )}
  />
);
```

--------------------------------

### Programmatically Scroll Calendar to Date, Month, or Offset

Source: https://marceloprado.github.io/flash-calendar/fundamentals/tips-and-tricks

Use the `ref` to imperatively scroll the calendar. Pass `true` as the second argument to animate the scroll. The `scrollToDate` method accepts a date, `scrollToMonth` accepts a date representing the month, and `scrollToOffset` accepts a pixel value.

```javascript
import { addMonths, subMonths, startOfMonth } from "date-fns";  
import type { CalendarListRef } from "@marceloterreiro/flash-calendar";  
import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";  
import { useRef, useState } from "react";  
import { Button, Text, View } from "react-native";  
  
export function ImperativeScrolling() {  
  const [currentMonth, setCurrentMonth] = useState(startOfMonth(new Date()));  
  const ref = useRef<CalendarListRef>(null);  
  
  const onCalendarDayPress = useCallback((dateId: string) => {  
    ref.current?.scrollToDate(fromDateId(dateId), true);  
  }, []);  
  
  return (  
    <View style={{ paddingTop: 20, flex: 1 }}>  
      <View style={{ flexDirection: "row", gap: 12 }}>  
        <Button  
          onPress={() => {  
            const pastMonth = subMonths(currentMonth, 1);  
            setCurrentMonth(pastMonth);  
            ref.current?.scrollToMonth(pastMonth, true);  
          }}  
          title="Past month"  
        />  
        <Text>Current: {toDateId(currentMonth)}</Text>  
        <Button  
          onPress={() => {  
            const nextMonth = addMonths(currentMonth, 1);  
            setCurrentMonth(nextMonth);  
            ref.current?.scrollToMonth(nextMonth, true);  
          }}  
          title="Next month"  
        />  
      </View>  
      <View style={{ flex: 1, width: "100%" }}>  
        <Calendar.List  
          calendarInitialMonthId={toDateId(currentMonth)}  
          onCalendarDayPress={onCalendarDayPress}  
          ref={ref}  
        />  
      </View>  
    </View>  
  );  
}  

```

--------------------------------

### Custom Date Formatting with getCalendarFormat Props

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Gain full control over date display by providing custom formatting functions to `getCalendarDayFormat`, `getCalendarMonthFormat`, and `getCalendarWeekDayFormat`. These props accept functions compatible with date libraries like `date-fns`.

```javascript
import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";  
import { subMonths } from "date-fns";  
import { format } from "date-fns/fp";  
  
const threeMonthsAgo = subMonths(new Date(), 3);  
  
export const CalendarCustomFormatting = () => {  
  return (  
    <Calendar  
      calendarMonthId={toDateId(threeMonthsAgo)}  
      getCalendarDayFormat={format("dd")}  
      getCalendarMonthFormat={format("MMMM yyyy (LL/yyyy)")}  
      getCalendarWeekDayFormat={format("E")}  
      onCalendarDayPress={(dateId) => {  
        console.log(`Clicked on ${dateId}`);  
      }}  
    />  
  );
};

```

--------------------------------

### Listen to Visible Months with onViewableItemsChange

Source: https://marceloprado.github.io/flash-calendar/fundamentals/tips-and-tricks

Track which months are currently visible in the Calendar.List by using the onViewableItemsChanged prop. This allows you to react to changes in the visible month.

```javascript
export const ListenToVisibleMonth = () => {
  const [selectedDate, setSelectedDate] = useState(today);
  const [visibleMonth, setVisibleMonth] = useState(today);

  const handleViewableItemsChanged = useCallback<NonNullable<FlashListProps<CalendarMonth>["onViewableItemsChanged"]>>(({ viewableItems }) => {
    const firstVisibleItem = viewableItems.find((item) => item.isViewable);

    if (firstVisibleItem) {
      setVisibleMonth(firstVisibleItem.item.id);
    }
  }, []);

  return (
    <View style={{ flex: 1, gap: 24 }}>
      <View style={{ gap: 12 }}>
        <Text>Selected date: {selectedDate}</Text>
        <Text>Visible month: {visibleMonth}</Text>
      </View>
      <Calendar.List
        calendarActiveDateRanges={[{ startId: today, endId: today }]}
        calendarInitialMonthId="2024-11-01"
        onCalendarDayPress={setSelectedDate}
        onViewableItemsChanged={handleViewableItemsChanged}
      />
    </View>
  );
};
```

--------------------------------

### Customize Calendar Spacing and Size

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Adjust the visual spacing and dimensions of the calendar components using props like `calendarDayHeight`, `calendarMonthHeaderHeight`, `calendarRowHorizontalSpacing`, `calendarRowVerticalSpacing`, and `calendarSpacing`. Refer to the Customization docs for more details.

```javascript
import { Calendar } from "@marceloterreiro/flash-calendar";  
import { View } from "react-native";  
  
export const CalendarListCompact = () => {  
  return (  
    <View style={{ width: 300, flex: 1 }}>  
      <Calendar.List  
        calendarDayHeight={28}  
        calendarMonthHeaderHeight={20}  
        calendarRowHorizontalSpacing={0}  
        calendarRowVerticalSpacing={4}  
        calendarSpacing={10}  
        onCalendarDayPress={(dateId) => console.log(`Pressed ${dateId}`)}  
      />  
    </View>  
  );
};  

```

--------------------------------

### Optimized Re-renders in Flash Calendar

Source: https://marceloprado.github.io/flash-calendar/fundamentals/principles

Demonstrates how only affected dates re-render, ensuring component responsiveness even with lengthy calendar lists. This is a core performance optimization.

```javascript
const Calendar = () => {
  const [date, setDate] = useState(new Date());

  return (
    <FlashCalendar
      date={date}
      onDateChange={setDate}
      // ... other props
    />
  );
};
```

--------------------------------

### Workaround for Scrolling Backwards Limitation

Source: https://marceloprado.github.io/flash-calendar/fundamentals/limitations

This workaround preloads a specified number of past months to allow backward scrolling, mitigating the limitation. It demonstrates using `calendarMinDateId` and `calendarPastScrollRangeInMonths` to preload months, which may impact performance due to memory usage.

```javascript
export const ScrollingBackwardsWorkaround = () => {
  return (
    <VStack alignItems="stretch" grow spacing={12}>
      <Text>This preloads all past months between Jan 1st 2020 and today</Text>

      <Calendar.List
        calendarFutureScrollRangeInMonths={1}
        calendarInitialMonthId="2024-02-01"
        calendarMaxDateId="2024-05-01"
        calendarMinDateId="2020-01-01"
        calendarPastScrollRangeInMonths={50}
        onCalendarDayPress={loggingHandler("onCalendarDayPress")}
      />
    </VStack>
  );
};

```

--------------------------------

### Implement Date Range Picker with useDateRange Hook

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Use the `useDateRange` hook to easily build a date range picker component. It provides state management for active date ranges and a handler for day presses.

```javascript
import { Calendar, useDateRange } from "@marceloterreiro/flash-calendar";  
  
export const CalendarListDateRange = () => {  
  const {  
    calendarActiveDateRanges,  
    onCalendarDayPress,  
    // Also available for your convenience:  
    // dateRange, // { startId?: string, endId?: string }  
    // isDateRangeValid, // boolean  
    // onClearDateRange, // () => void  
  } = useDateRange();  
  return (  
    <Calendar.List  
      calendarActiveDateRanges={calendarActiveDateRanges}  
      onCalendarDayPress={onCalendarDayPress}  
    />  
  );
};  

```

--------------------------------

### DON'T: Inline Formatting Function (Breaks Referential Equality)

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Avoid inlining formatting functions directly within the JSX. This breaks referential equality and can lead to performance issues, as the function will be recreated on every render.

```javascript
<Calendar  
  calendarMonthId={today}  
  getCalendarWeekDayFormat={(date) =>  
    // prettier-ignore  
    format(date, "EEEEEE")  
  }  
/>  

```

--------------------------------

### Set Border Radius for Calendar.Item.Day

Source: https://marceloprado.github.io/flash-calendar/fundamentals/tips-and-tricks

Apply a border radius to all four corners of the Calendar.Item.Day component by specifying individual radius properties.

```javascript
itemDay: {
  base: () => ({
    container: {
      borderTopRightRadius: 10,
      borderBottomRightRadius: 10,
      borderTopLeftRadius: 10,
      borderBottomLeftRadius: 10,
    },
  }),
}
```

--------------------------------

### DO: Stable Formatting Function for Referential Equality

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Ensure formatting functions are stable by defining them outside the component scope to maintain referential equality. This prevents unnecessary re-renders and adheres to Flash Calendar's architectural requirements.

```javascript
const today = toDateId(new Date());  
  
const Example = () => {  
  return (  
    <View style={{ flex: 1 }}>  
      <Calendar  
        calendarMonthId={today}  
        getCalendarWeekDayFormat={formatWeekDay}  
      />  
    </View>  
  );
};
  
const formatWeekDay = (date: Date) =>  
  format(date, "EEEEEE");  

```

--------------------------------

### Set Different Locale with calendarFormatLocale Prop

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Easily change the displayed locale for dates, weeks, and months by using the `calendarFormatLocale` prop. This is useful for internationalization.

```javascript
import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";  
import { useState } from "react";  
  
const today = toDateId(new Date());  
  
export function BrazilianCalendar() {  
  const [selectedDate, setSelectedDate] = useState(today);  
  return (  
    <Calendar  
      calendarActiveDateRanges={[  
        {  
          startId: selectedDate ?? undefined,  
          endId: selectedDate ?? undefined,  
        },  
      ]}  
      calendarMonthId={today}  
      calendarFormatLocale="pt-BR"  
      onCalendarDayPress={setSelectedDate}  
    />  
  );
}

```

--------------------------------

### Convert Between Date and Date ID in Flash Calendar

Source: https://marceloprado.github.io/flash-calendar/fundamentals/tips-and-tricks

Use `toDateId` and `fromDateId` for reliable date conversions to avoid timezone issues. Import these functions from the library.

```javascript
import { toDateId, fromDateId } from "@marceloterreiro/flash-calendar";  
  
const januaryFirstAsDate = fromDateId("2024-01-01"); // Date object  
const januaryFirstAsId = toDateId(januaryFirstAsDate); // "2024-01-01"  
```

--------------------------------

### Fine-tune Scroll Position with Additional Offset

Source: https://marceloprado.github.io/flash-calendar/fundamentals/tips-and-tricks

When scrolling programmatically, you can provide an `additionalOffset` object to adjust the final scroll position. This is useful for precise alignment.

```javascript
.scrollToDate(fromDateId("2024-07-01"), true, { additionalOffset: 4 })  

```

--------------------------------

### Integrate Calendar with Bottom Sheet

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Replace the default `FlashList` with a custom scroll component, such as `BottomSheetFlashList`, by passing it to the `CalendarScrollComponent` prop. This is particularly useful for implementing the calendar within Android bottom sheets.

```javascript
import BottomSheet from "@gorhom/bottom-sheet";  
import { Calendar } from "@marceloterreiro/flash-calendar";  
import { FlashList } from "@shopify/flash-list";  
import React, { useCallback, useMemo, useRef } from "react";  
import { Platform, StyleSheet, View } from "react-native";  
  
import { BottomSheetFlashList } from "./components/BottomSheetFlashList";  
  
/**  
 * iOS works fine with default flash list. Is better to keep it  
 * since it's more performant.  
 */  
const SafeFlashList = Platform.select({
  android: BottomSheetFlashList,
  ios: FlashList,
});  
  
export const BottomSheetCalendar = () => {  
  const bottomSheetRef = useRef<BottomSheet>(null);  
  const snapPoints = useMemo(() => ["25%", "50%"], []);  
  
  return (  
    <View style={styles.container}>  
      <BottomSheet index={1} ref={bottomSheetRef} snapPoints={snapPoints}>  
        <View style={styles.contentContainer}>  
          <Calendar.List  
            CalendarScrollComponent={SafeFlashList}  
            calendarInitialMonthId="2024-02-01"  
            onCalendarDayPress={(dateId) => console.log(`Pressed ${dateId}`)}  
          />  
        </View>  
      </BottomSheet>  
    </View>  
  );
};  

```

--------------------------------

### Configure Expo to use Hermes JS Engine

Source: https://marceloprado.github.io/flash-calendar/fundamentals/troubleshooting

Update your Expo app.json to use the Hermes JavaScript engine for Android to resolve Intl-related errors. Hermes offers better performance and supports Intl primitives.

```json
{
  "expo": {
    "jsEngine": "hermes"
  }
}

```

--------------------------------

### Force Light Mode in Calendar

Source: https://marceloprado.github.io/flash-calendar/fundamentals/tips-and-tricks

Override the default theme to force a light mode in the Calendar component by passing the 'light' value to the calendarColorScheme prop. This is an escape hatch for apps not supporting dynamic themes.

```javascript
export const LightModeOnly = () => {
  const { calendarActiveDateRanges, onCalendarDayPress } = useDateRange({
    startId: "2024-02-04",
    endId: "2024-02-09",
  });

  return (
    <Calendar
      calendarActiveDateRanges={calendarActiveDateRanges}
      calendarColorScheme="light"
      calendarMonthId={toDateId(startOfThisMonth)}
      onCalendarDayPress={onCalendarDayPress}
    />
  );
};
```

--------------------------------

### Avoid Direct Date String Conversion for Date IDs

Source: https://marceloprado.github.io/flash-calendar/fundamentals/tips-and-tricks

Directly converting a Date object to an ISO string and slicing can lead to unexpected results due to timezones. Always use `toDateId` for converting dates to the library's expected ID format.

```javascript
const endOfJanuary = new Date("2024-01-31");  
  
// ❌ Don't do this, for some dates and timezones, this will return unexpected results  
const endOfJanuaryId = endOfJanuary.toISOString().slice(0, 10); // 2024-02-01 or 2024-01-31, depending on the timezone  
```

--------------------------------

### Limit Selectable Dates in Calendar

Source: https://marceloprado.github.io/flash-calendar/fundamentals/usage

Use `calendarMinDateId`, `calendarMaxDateId`, and `calendarDisabledDateIds` to control the selectable date range. This applies to both `Calendar` and `Calendar.List` components.

```javascript
import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";  
  
const calendarDisabledDateIds = ["2024-03-14", "2024-03-15"];  
  
export const CalendarCustomFormatting = () => {  
  return (  
    <Calendar  
      calendarDisabledDateIds={calendarDisabledDateIds}  
      calendarMaxDateId="2024-03-20"  
      calendarMinDateId="2024-03-10"  
      calendarMonthId="2024-03-01"  
      onCalendarDayPress={(dateId) => {  
        console.log(`Clicked on ${dateId}`);  
      }}  
    />  
  );
};  

```

--------------------------------

### Disable Font Scaling for Calendar Day Text

Source: https://marceloprado.github.io/flash-calendar/fundamentals/customization

Override `textProps` to control nested Text components, such as disabling font scaling for accessibility on a Calendar's Day.

```typescript
import {
  Calendar,
  useOptimizedDayMetadata,
} from "@marceloterreiro/flash-calendar";
import { Text } from "react-native";
import type { CalendarItemDayWithContainerProps } from "@/components/CalendarItemDay";

import { useRenderCount } from "./useRenderCount";

export const PerfTestCalendarItemDayWithContainer = ({
  children,
  metadata: baseMetadata,
  onPress,
  theme,
  dayHeight,
  daySpacing,
  containerTheme,
}: CalendarItemDayWithContainerProps) => {
  const metadata = useOptimizedDayMetadata(baseMetadata);
  const renderCounter = useRenderCount();

  return (
    <Calendar.Item.Day.Container
      dayHeight={dayHeight}
      daySpacing={daySpacing}
      isStartOfWeek={metadata.isStartOfWeek}
      shouldShowActiveDayFiller={
        metadata.isRangeValid && !metadata.isEndOfWeek
          ? !metadata.isEndOfRange
          : false
      }
      theme={containerTheme}
    >
      <Calendar.Item.Day
        textProps={{ allowFontScaling: false }}
        height={dayHeight}
        metadata={metadata}
        onPress={onPress}
        theme={theme}
      >
        {children}
        <Text
          style={{
            fontSize: 8,
            fontStyle: "italic",
            textAlign: "center",
            color: metadata.state === "active" ? "white" : "black",
          }}
        >
          {"\n"}render: {renderCounter}x
        </Text>
      </Calendar.Item.Day>
    </Calendar.Item.Day.Container>
  );
};

```
Tokens:
Raw