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:

npm install @fowusu/calendar-kit

or

yarn add @fowusu/calendar-kit

⚠️ If you plan using CalendarList then you need to install @shopify/flash-list

yarn add @shopify/flash-list

# pod installation for iOS before building app
cd ios; pod install

Usage

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

Calendar

import React, { useCallback, useState } from "react";
import { Calendar, toLocaleDateString } from "@fowusu/calendar-kit";

const today = new Date();

const todayDateString = toLocaleDateString(today);

const CalendarComponent = () => {
  const [selectedDay, setSelectedDay] = useState<string>();

  const onDayPress = useCallback((dateString) => {
    setSelectedDay(dateString);
  }, []);

  return (
    <Calendar
      date={todayDateString}
      markedDates={[selectedDay]}
      onDayPress={onDayPress}
    />
  );
};

CalendarList

import React, { useCallback, useState } from "react";
import {CalendarList, toLocaleDateString} from "@fowusu/calendar-kit";

const today = new Date();
const todayDateString = toLocaleDateString(today);

const CalendarListComponent = () => {
    const [selectedDay, setSelectedDay] = useState<string>();
    
    const onDayPress = useCallback((dateString) => {
        setSelectedDay(dateString);
    }, []);

  return (
    <CalendarList
      currentDate={todayDateString}
      estimatedCalendarSize={{
          fiveWeekCalendarSize: 400
      }}
      markedDates={[selectedDay]}
      futureMonthsCount={12}
      pastMonthsCount={0}
      onDayPress={onDayPress}
    />
  );
};

API Reference

See our API Reference docs

Contributing

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