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
