Introduction

A simple and customizable React Native component for displaying and interacting with Gregorian calendar dates.

Features

• 💡 100% Typescript
• ⚡️ Build with @shopify/flashlist for faster list rendering
• 🕑 Works in all timezones
• 🎨 Fully customizable with example use cases
• 🈲 Supports localization
• 🚀 DX, UX and Performance in one lightweight bundle
• 🗓️ Multiview calendars (Week✅, Month✅, Yearly(coming soon)⚙️)
• 👨🏽‍💻 Works in every RN project including react native web

Examples

Vio.com	Airbnb

Priceline	Booking.com

Localized	Performance

Multiview (Week & Year)	Schedule

Installation

To install the package, use npm or yarn:

1npm install @fowusu/calendar-kit

or

1yarn add @fowusu/calendar-kit

or

1yarn expo add @fowusu/calendar-kit

⚠️ You need to install @shopify/flash-list

1yarn add @shopify/flash-list

1yarn expo add @shopify/flash-list

Usage

Here’s a basic example of how to use the @fowusu/calendar-kit package:

Calendar

1import React, { useCallback, useState } from "react";
2import { Calendar, toLocaleDateString } from "@fowusu/calendar-kit";
3
4const today = new Date();
5
6const todayDateString = toLocaleDateString(today);
7
8const CalendarComponent = () => {
9  const [selectedDay, setSelectedDay] = useState<string>();
10
11  const onDayPress = useCallback((dateString) => {
12    setSelectedDay(dateString);
13  }, []);
14
15  return (
16    <Calendar
17      date={todayDateString}
18      markedDates={[selectedDay]}
19      onDayPress={onDayPress}
20    />
21  );
22};

CalendarList

1import React, { useCallback, useState } from "react";
2import {CalendarList, toLocaleDateString} from "@fowusu/calendar-kit";
3
4const today = new Date();
5const todayDateString = toLocaleDateString(today);
6
7const CalendarListComponent = () => {
8    const [selectedDay, setSelectedDay] = useState<string>();
9    
10    const onDayPress = useCallback((dateString) => {
11        setSelectedDay(dateString);
12    }, []);
13
14  return (
15    <CalendarList
16      currentDate={todayDateString}
17      estimatedCalendarSize={{
18          fiveWeekCalendarSize: 400
19      }}
20      markedDates={[selectedDay]}
21      futureMonthsCount={12}
22      pastMonthsCount={0}
23      onDayPress={onDayPress}
24    />
25  );
26};

API Reference

See our API Reference docs

Contributing

Contributions are welcome! Please see the CONTRIBUTING.md for guidelines.