React Native DayView Calendar
DayView Calendar is a react-native
, themable, animated calendar that display carousel of days with possibility to add, remove or resize events.
Features
- Events are addable, removable, resizable and movable
- Carousel of days
- Themable
- Customisable
Getting started
Start by adding @uplet/react-native-dayview-calendar
as a dependency to your React Native project (use react-native init MyProject
to create one if you don't have a project):
yarn add @uplet/react-native-dayview-calendar
or
npm install @uplet/react-native-dayview-calendar
Documentation
Default component to use is<DaysCalendar />
Example
import DaysCalendar from "@uplet/react-native-dayview-calendar"
<DaysCalendar
date={'28-01-2019'}
disabledDates={() => {}}
dayStartShift={6}
dateRange={365}
interval={30}
events={(date: string) => {
...
}}
onDateChangeEvent={(date, { id }, startDate, endDate) => {
...
}}
onCreateEvent={(date, startDate, endDate) => {
...
}}
onDeleteEvent={(date, { id }) => {
...
}}
/>
Props
onCreateEvent
onDateChangeEvent
onDeleteEvent
onDayChangeEvent
date
disabledDates
events
dateRange
windowSize
calendarRecreateTreshold
theme
disablePast
customStartPosition
customStartPositionOffset
onCreateEvent
Callback that is triggered when event should be created
(date, startTime, endTime) => void;
Type | Required |
---|---|
function | Yes |
onDateChangeEvent
Callback that is triggered when event changes it's date
(date, event, startTime, endTime) => void;
Type | Required |
---|---|
function | Yes |
onDeleteEvent
Callback that is triggered when event should be deleted
(date, event) => void;
Type | Required |
---|---|
function | Yes |
onDayChangeEvent
Callback that is triggered when active day changed
(day) => void;
Type | Required |
---|---|
function | Yes |
date
Start Day, default is today
Type | Required |
---|---|
string | No |
disabledDates
Function that returns disabled dates for given day;
day => Array<{startDate, endDate}>
Type | Required |
---|---|
function | No |
events
Function that returns event dates for given day;
day => Array<{startDate, endDate}>
Type | Required |
---|---|
function | No |
dateRange
How many days user will be able to swipe calendar. By default it's 365
Type | Required |
---|---|
number | No |
windowSize
How many days out of the screen should be rendered in advance
Type | Required |
---|---|
number | No |
calendarRecreateTreshold
Percentage of the calendar days. If there is less days left after scroll it forces re-create calendar with new date
Type | Required |
---|---|
number | No |
theme
Set of styles properties that can customize the calendar appearance
{
accentColor, //used for event span trash icon and points used for resize
accentBackgroundColor, //color of event span
backgroundColor, //calendar background color
timeIndicator, // color of line that indicates current hour
labelColor, // color of labels ( i.e "11 AM")
minuteSplitColor, // color of line that split minutes
hourSplitColor, //color of line that split hours
disabledColor, // color of lines displaying disable dates
}
Type | Required |
---|---|
object | No |
disablePast
Whether calendar should allow to swipe to the past
Type | Required |
---|---|
boolean | No |
customStartPosition
Should scroll to current time on each day
Type | Required |
---|---|
boolean | No |
customStartPositionOffset
custom offset for custom start postion
Type | Required |
---|---|
number | No |
Publishing
First you need to have access to uplet organization on npm. Ask Harris for it.
Use one of the following yarn commands to publish package
yarn release #Release package with latest tag (This package will be used by default by 'yarn add' command)
yarn release:next #Release package with next tag
yarn release:beta #Release package with beta tag (use for testing calendar features)
❤️ at Uplet
Made with DayView calendar is an open source project. If you like it, please star it