React Native Timeline Calendar

A React Native timeline calendar component kit, fully implemented using @shopify/flash-list, react-native-gesture-handler, and react-native-reanimated. Support pinch to zoom, drag and drop to create/update events.

How to use it:

1. Install & import.

# Yarn
$ yarn add @howljs/calendar-kit

# NPM
$ npm i @howljs/calendar-kitimport { TimelineCalendar } from '@howljs/calendar-kit';

2. Create calendars.

// Week View
<TimelineCalendar viewMode="week" />;

// Day View
<TimelineCalendar viewMode="day" />;

// 3-days
<TimelineCalendar viewMode="threeDays" />;

// Work week
<TimelineCalendar viewMode="workWeek" />;

3. Available props.

VIEW_MODE: 'week' as const,
FIRST_DAY: 1,
MIN_DATE: dayjs().subtract(1, 'y').format('YYYY-MM-DD'),
MAX_DATE: dayjs().add(1, 'y').format('YYYY-MM-DD'),
INITIAL_DATE: dayjs().format('YYYY-MM-DD'),
START: 0,
END: 24,
TIME_INTERVAL: 60,
INIT_TIME_INTERVAL_HEIGHT: 60,
MIN_TIME_INTERVAL_HEIGHT: 29,
MAX_TIME_INTERVAL_HEIGHT: 116,
CELL_BORDER_COLOR: '#E8E9ED',
PRIMARY_COLOR: '#1973E7',
CREATE_ITEM_BACKGROUND_COLOR: 'rgba(25, 115, 231, 0.1)',
SECONDARY_COLOR: '#5F6369',
WHITE_COLOR: '#FFFFFF',
HOUR_WIDTH: 53,
DAY_BAR_HEIGHT: 60,
SPACE_CONTENT: 16,
DRAG_CREATE_INTERVAL: 60,
DRAG_STEP: 10,
UNAVAILABLE_BACKGROUND_COLOR: '#F5F5F5',
RIGHT_EDGE_SPACING: 1,
OVERLAP_EVENTS_SPACING: 1,
BLACK_COLOR: '#000000',

Preview:

Download Details:

Author: howljs

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/howljs/react-native-calendar-kit

License: MIT

#react-native #react #reactjs