react-native-weekly-view v1.1.0

react-native-weekly-view

Calendars made simple!

Device mockups created at deviceframes.

Installation

Use npm or yarn.

npm install react-native-weekly-view
yarn add react-native-weekly-view

Usage

Import WeeklyView and add some events.

import { WeeklyView } from "react-native-weekly-view";

<WeeklyView
  events={EVENTS}
  onEventPress={(event) => {
    // Do something with the calendar event.
  }}
/>

The events should be formatted in the following way. Please check types at the bottom for more details.

const EVENTS = [
  {
    id: 1,
    isoStart: "2023-06-23T07:00:00.000+03:00",
    isoEnd: "2023-06-23T08:00:00.000+03:00",
    name: "Breakfast",
    icon: <Icon name={"food"} size={14} />,
    disabled: true,
  },
  {
    id: 2,
    isoStart: "2023-06-23T08:30:00.000+03:00",
    isoEnd: "2023-06-23T09:00:00.000+03:00",
    name: "Lunch",
    color: "pink",
    icon: <Icon name={"food"} size={14} />,
    disabled: false,
  }, ...]

Customization

WeeklyView is highly customizable and allows you to change colors, font sizes and much more through the following props:

  locale,
  timezone,
  theme,
  eventContainerStyle,
  style,
  timetableStartHour,
  timetableEndHour,
  intervalLengthMinutes,
  intervalHeight,
  translationWeek,
  showWeekend

Please check props below for more information.

Device mockup created at deviceframes.

Example

To run the example, clone the project git clone https://github.com/emilje/react-native-weekly-view.git, navigate into the example folder cd example and run npm i. If you want to run the project using Expo, also install expo npm i expo and when the installation is finished run npx expo start.

Development (Expo + Typescript)

Fork the project and install dependancies npm i. Create a new branch. In package.json switch the "main" to "node_modules/expo/AppEntry.js". Run npm start and have fun! Remember to change main field back to "dist/index.js" before making any pull requests. 👀

Props

Types

calendarEvent

eventContainerStyle

style