https://github.com/hoangnm/react-native-week-view

Week View Component for react-native
https://github.com/hoangnm/react-native-week-view

calendar calendar-view component react-native weekview

Last synced: 5 months ago
JSON representation

Week View Component for react-native

• Host: GitHub
• URL: https://github.com/hoangnm/react-native-week-view
• Owner: hoangnm
• License: mit
• Created: 2017-12-10T08:25:06.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-11-21T05:38:09.000Z (11 months ago)
• Last Synced: 2025-05-02T00:32:24.014Z (6 months ago)
• Topics: calendar, calendar-view, component, react-native, weekview
• Language: JavaScript
• Homepage:
• Size: 9.61 MB
• Stars: 327
• Watchers: 3
• Forks: 98
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![tests](https://github.com/hoangnm/react-native-week-view/actions/workflows/tests.yml/badge.svg) ![linter](https://github.com/hoangnm/react-native-week-view/actions/workflows/linter.yml/badge.svg) ![codeql](https://github.com/hoangnm/react-native-week-view/actions/workflows/codeql-analysis.yml/badge.svg)

# react-native-week-view

The week view component for react-native.

* Supported in Android and iOS

* Many user interactions supported: **drag and drop events**, edit events, swipe through pages, event press, grid press, etc

* Customizable styles

* Multiple locale support

Checkout the full [documentation site](https://hoangnm.github.io/react-native-week-view), including [guides](https://hoangnm.github.io/react-native-week-view/category/full-api), [full API](https://hoangnm.github.io/react-native-week-view/category/full-api) and [known issues](https://hoangnm.github.io/react-native-week-view/troubleshoot#known-issues).

![basic-example](webdocs/static/img/weekview-example.gif) ![drag-drop](webdocs/docs/guides/img/drag-drop.gif)

## Installation

> `npm install --save react-native-week-view`

or

> `yarn add react-native-week-view`

**Requirements:** install peer dependencies [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation/) >= 2.4.1 and [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) >=2.0.0, which we use to provide smoother interactions and animations (e.g. drag and drop).

## Basic usage

```js

import WeekView from 'react-native-week-view';

const myEvents = [

 {

 id: 1,

 description: 'Event',

 startDate: new Date(2021, 3, 15, 12, 0),

 endDate: new Date(2021, 3, 15, 12, 30),

 color: 'blue',

 // ... more properties if needed,

 },

 // More events...

];

const MyComponent = () => (

 

);

```

See the [full documentation](https://hoangnm.github.io/react-native-week-view) with more examples and details!

## Changelog

API is still unstable, minor updates before v1.0.0 can include breaking changes, adhering to Semantic Versioning.

See [CHANGELOG.md](./CHANGELOG.md) for details.

## Contributors



 



Made with [contrib.rocks](https://contrib.rocks).