https://github.com/f0wu5u/calendar-kit
A simple JS only calendar UI for react native
https://github.com/f0wu5u/calendar-kit
react react-native react-native-calendar-ui
Last synced: 6 months ago
JSON representation
A simple JS only calendar UI for react native
- Host: GitHub
- URL: https://github.com/f0wu5u/calendar-kit
- Owner: f0wu5u
- License: mit
- Created: 2024-05-28T09:43:24.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-10T07:39:29.000Z (over 1 year ago)
- Last Synced: 2025-03-31T18:18:41.550Z (over 1 year ago)
- Topics: react, react-native, react-native-calendar-ui
- Language: TypeScript
- Homepage:
- Size: 12.1 MB
- Stars: 53
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
npm install @fowusu/calendar-kit
```
or
```bash
yarn add @fowusu/calendar-kit
```
or
```bash
yarn expo add @fowusu/calendar-kit
```
> ⚠️ You need to install `@shopify/flash-list`
```bash
yarn add @shopify/flash-list
```
```bash
yarn expo add @shopify/flash-list
```
# Usage
Here’s a basic example of how to use the `@fowusu/calendar-kit` package:
## Calendar
```typescript jsx
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();
const onDayPress = useCallback((dateString) => {
setSelectedDay(dateString);
}, []);
return (
);
};
```
## CalendarList
```typescript jsx
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();
const onDayPress = useCallback((dateString) => {
setSelectedDay(dateString);
}, []);
return (
);
};
```
# API Reference
See our [API Reference docs](API_REFERENCE.md)
# Contributing
Contributions are welcome! Please see the [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.