4
Calendar component for react native project
source link: https://reactnativeexample.com/calendar-component-for-react-native-project/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
📅 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 | Default | Description |
---|---|---|---|---|
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
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK