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-kit
import { 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