@uplet/react-native-dayview-calendar

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)

Made with ❤️ at Uplet

DayView calendar is an open source project. If you like it, please star it 🌟.