react-native-event-week v1.0.8

Simple ScrollSpy

react-native-event-week

Cross-platform gcal/outlook like calendar component for React Native.

Features

• Cross Platform: Runs on the Web, iOS, Android with the power of React
• Type-safe: Fully written in TypeScript
• Customizable: Adjust styles of components
• Lightweight: ~15kb, only one dependency is dayjs

Install

npm install --save react-native-event-week

Or if you use Yarn:

yarn add react-native-event-week

Getting Started

import { Calendar } from "react-native-event-week";

const events = [
  {
    title: "Important meeting",
    start: "2020-10-06 14:45",
    end: "2020-10-06 18:15",
    backgroundColor: "#41CAC0",
  },
  {
    title: "Coffee break",
    start: "2020-10-06 06:45",
    end: "2020-10-06 07:15",
    backgroundColor: "#41CAC0",
  },
];

function App() {
  return <Calendar events={events} height={600} />;
}

API Documentation

Summary

interface CalendarProps<T = {}> {
  events: Event<T>[];
  height: number;
  mode?: Mode;
  style?: ViewStyle;
  eventCellStyle?: EventCellStyle<T>;
  scrollOffsetMinutes?: number;
  date?: Date;
  swipeEnabled?: boolean;
  showTime?: boolean;
  refreshing: boolean;
  weekStartsOn?: WeekNum;
  locale?: string;
  onChangeDate?: DateRangeHandler;
  onPressEvent?: (event: Event<T>) => void;
  onPressDateHeader?: (date: Date) => void;
  onPressEventHeder?: (event: Event<T>) => void;
  onPressCell?: (date: Date) => void;
  onRefresh?: () => void;
}

<Calendar /> Props are:

I18n

Please specity your locale via locale prop and import day.js locale file:

import 'dayjs/locale/ja'

<Calendar
  locale="ja"
  {/* ... */}
/>

You can find your dayjs locale here:

https://github.com/iamkun/dayjs/tree/dev/src/locale

Screenshots

If you are using this library, please send a PR to add your organization!

TODO

• Add API Documentation
• Add onClickCell feature
• Add onDrugCell feature
• Style customize
  • Blue active day
  • Blue active day text
  • Today indicator
• Support the month view layout