react-native-weekly-view

Calendars made simple!

Device mockups created at deviceframes.

Installation

Use npm or yarn.

npm install react-native-weekly-view
yarn add react-native-weekly-view

Usage

Import WeeklyView and add some events.

import { WeeklyView } from "react-native-weekly-view";

<WeeklyView
  events={EVENTS}
  onEventPress={(event) => {
    // Do something with the calendar event.
  }}
/>

The events should be formatted in the following way. Please check types at the bottom for more details.

const EVENTS = [
  {
    id: 1,
    isoStart: "2023-06-23T07:00:00.000+03:00",
    isoEnd: "2023-06-23T08:00:00.000+03:00",
    name: "Breakfast",
    icon: <Icon name={"food"} size={14} />,
    disabled: true,
  },
  {
    id: 2,
    isoStart: "2023-06-23T08:30:00.000+03:00",
    isoEnd: "2023-06-23T09:00:00.000+03:00",
    name: "Lunch",
    color: "pink",
    icon: <Icon name={"food"} size={14} />,
    disabled: false,
  }, ...]

Customization

WeeklyView is highly customizable and allows you to change colors, font sizes and much more through the following props:

  locale,
  timezone,
  theme,
  eventContainerStyle,
  style,
  timetableStartHour,
  timetableEndHour,
  intervalLengthMinutes,
  intervalHeight,
  translationWeek,
  showWeekend

Please check props below for more information.

Device mockup created at deviceframes.

Example

To run the example, clone the project git clone https://github.com/emilje/react-native-weekly-view.git, navigate into the example folder cd example and run npm i.
If you want to run the project using Expo, also install expo npm i expo and when the installation is finished run npx expo start.

Development (Expo + Typescript)

Fork the project and install dependancies npm i.
Create a new branch.
In package.json switch the "main" to "node_modules/expo/AppEntry.js".
Run npm start and have fun!
Remember to change main field back to "dist/index.js" before making any pull requests. 👀

Props

Name	Type	Description	Required
events	array	An array of calendarEvent objects. Check the types below.	Yes
locale	string	Iana subtag of a language - en, fi, hr, sv. Used to translate weekdays in the header. For more information: https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry	No
onEventPress	function	A callback function that has access to a clicked calendar event. (event) => { Do something cool here! }	Yes
timezone	string	Iana timezone identifier - Europe/Helsinki for example.. You can see a list of the codes here: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones	No
theme	string	You can choose one of the premade themes "light" or "dark" and then customize them if needed. Defaults to dark theme	No
timetableStartHour	number	At which hour the timetable starts.	No
timetableEndHour	number	At which hour the timetable ends.	No
intervalLengthMinutes	number	Minutes between intervals.	No
intervalHeight	number	Vertical space between intervals.	No
eventContainerStyle	object	Style object used for customizing the events. Check the types below.	No
style	object	Style object used for customizing the general look of the header and the timetable. Check the types below.	No
translationWeek	string	How the word "Week" will appear.	No
showWeekend	boolean	`Will hide saturday and sunday if false.	No

Types

calendarEvent

Property	Type	Description	Required
id	number/string	Unique identifier of an event	Yes
isoStart	string	Event start in ISO format - 1993-02-24T10:00:00.000+01:00	Yes
isoEnd	string	Event end in ISO format - 2023-02-24T11:00:00.000+01:00	Yes
name	string	Name of the event. Appears under the icon in the calendar.	Yes
disabled	boolean	Affects how the event is rendered. Default is gray colored with a line through. Disabled color can be adjusted in props.	Yes
icon	JSX Element	A JSX element. Can be some custom component or an icon library component <MaterialCommunityIcons name="food-fork-drink" size={12} />	No
color	string	Change the event background color. Useful for color coding events.	No

eventContainerStyle

Property	Type	Description	Required
backgroundColor	string	Background color for all events non disabled events. Can be overriden in the calendarEvent object.	No
disabledColor	string	Background color for a disabled/cancelled event.	No
borderWidth	number/undefined	Change the border width around an event. Undefined for no border.	No
borderColor	string	Border color.	No
borderRadius	number	Border radius.	No
fontSize	number	Font size used for showing event name.	No
textColor	string	Color used for showing the event name.	No

style

Property	Type	Description	Required
headerColor	string	Header background color.	No
headerTextColor	string	Header text color.	No
fontSizeHeader	number	Header font size.	No
timetableColor	string	Timetable background color.	No
timetableTextColor	string	Timetable text color.	No
fontSizeTimetable	number	Timetable font size.	No
dropdownColor	string	Color for the week dropdown.	No
dropdownCurrentWeekColor	string	Background color of the current week in the list.	No
accentColor	string	Color of the current weekday highlight, week dropdown arrow color and the currently selected week eye icon color	No
weekButtonColor	string	Color of the week dropdown button.	No
weekButtonIconColor	string	Color of the down arrow circular background in the week dropdown button.	No
dropdownSelectedWeekIcon	JSX Element	Icon next to the currently selected week in the dropdown.	No
arrowColor	string	Color of the left/right arrows.	No