? React Native Calendar Kit

Calendar component for react native project

RPReplay_Final1667537767.MP4

Installation

Using Yarn:

$ yarn add @howljs/calendar-kit

Using NPM:

$ npm install --save @howljs/calendar-kit

Installing dependencies into a bare React Native project

Using Yarn:

$ yarn add @shopify/flash-list react-native-gesture-handler react-native-reanimated

Using NPM:

$ npm install --save @shopify/flash-list react-native-gesture-handler react-native-reanimated

Follow installation instructions for React Native Reanimated v2 and React Native Gesture Handler. This library needs these dependencies to be installed in your project

Example Usage

import { TimelineCalendar } from '@howljs/calendar-kit';

// ...
<TimelineCalendar
  viewMode="week"
  allowPinchToZoom
  allowDragToCreate
  minDate="2022-01-01"
  maxDate="2022-12-31"
  initialDate="2022-11-30"
  holidays={['2022-11-05', '2022-11-02']}
  onDragCreateEnd={(date) => {
    console.log(date);
  }}
/>;

Available props

Name	Type	Default	Description
viewMode	day, week, threeDays, workWeek	week	Calendar view mode
firstDay	number	1	First day of the week
minDate	string (YYYY-MM-DD)	2 year ago	Minimum display date
maxDate	string (YYYY-MM-DD)	2 year later	Maximum display date
initialDate	string (YYYY-MM-DD)	Today	Initial display date
start	number	0	Day start time
end	number	24	Day end time
hourWidth	number	53	Width of hour column
timeInterval	number	60	The interval of time slots in timeline
allowPinchToZoom	boolean	false	Pinch to change time interval height
initialTimeIntervalHeight	number	60	Initial time interval height
minTimeIntervalHeight	number	None	Min time interval height
maxTimeIntervalHeight	number	116	Width of hour column
allowDragToCreate	boolean	false	Drag to create a event
dragCreateInterval	number	60	Default duration when create event
dragStep	number	10	Default step
isShowHalfLine	boolean	false	Show half line
spaceFromTop	number	false
spaceFromBottom	number	false
syncedLists	boolean	true
unavailableHours	UnavailableHour	true	Unavailable hours
holidays	string[]	None	Unavailable days
showNowIndicator	boolean	true
rightEdgeSpacing	number
overlapEventsSpacing	number
theme	ThemeProperties
renderDayBarItem	function
onPressDayNum	function
onDragCreateEnd	function
onPressBackground	function
onLongPressBackground	function
onPressOutBackground	function
onDateChanged	function
isLoading	boolean
events	EventItem[]
onPressEvent	function
onLongPressEvent	function
renderEventContent	function
selectedEvent	PackedEvent
onEndDragSelectedEvent	function

EventItem

{
  id: string;
  start: string;
  end: string;
  title?: string;
  color?: string;
};

PackedEvent

type PackedEvent = {
  id: string;
  start: string;
  end: string;
  title?: string;
  color?: string;
  left: number;
  top: number;
  width: number;
  height: number;
  leftByIndex?: number;
};

UnavailableHour

An array of objects to apply full week:

[
  { start: 0, end: 8 },
  { start: 19, end: 24 },
];

An object to customize by week day

{
  //Sunday
  0: [{ start: 0, end: 24 }],
  //Monday
  1: [
    { start: 0, end: 8 },
    { start: 19, end: 24 },
  ],
}

ThemeProperties

Name	Type	Required
cellBorderColor	string	Optional
todayTextColor	string	Optional
todayBackgroundColor	string	Optional
dayTextColor	string	Optional
backgroundColor	string	Optional
dragHourColor	string	Optional
dragHourBorderColor	string	Optional
dragHourBackgroundColor	string	Optional
dragCreateItemBackgroundColor	string	Optional
loadingBarColor	string	Optional
unavailableBackgroundColor	string	Optional

Available methods

Name	Props
goToDate	goToDateProps
goToNextPage
goToPrevPage

goToDateProps

{
    date?: string;
    hourScroll?: boolean;
    animatedDate?: boolean;
    animatedHour?: boolean;
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

GitHub

View Github