react-native-week-view-week-index-only v0.12.3

react-native-week-view

The week view component for react-native.

Key features

• Supported in Android and iOS
• Many user interactions supported: drag and drop events, swipe through pages, event press and long-press, grid press and long-press
• Customizable styles
• Multiple locale support

Installation

npm install --save react-native-week-view

or

yarn add react-native-week-view

Requires react-native 0.59 or above (from react-native-week-view >= 0.7.0)

Basic usage

import WeekView from 'react-native-week-view';

const myEvents = [
  {
    id: 1,
    description: 'Event',
    startDate: new Date(2021, 3, 15, 12, 0),
    endDate: new Date(2021, 3, 15, 12, 30),
    color: 'blue',
    // ... more properties if needed,
  },
  // More events...
];

const MyComponent = () => (
  <WeekView
    events={myEvents}
    selectedDate={new Date(2021, 3, 15)}
    numberOfDays={7}
  />
);

Full API

Props

Event Item

{
  id: 1,
  description: 'Event',
  startDate: new Date(2021, 3, 15, 12, 0),
  endDate: new Date(2021, 3, 15, 12, 30),
  color: 'blue',
  // ... more properties if needed,
}

Methods

To use the component methods save a reference to it:

<WeekView
  // ... other props
  ref={(ref) => { this.weekViewRef = ref; }}
/>

• goToDate(date, animated = true): the component navigates to a custom date. Note: if the target date has not been rendered before, there may be a delay on the animation. See this issue for details.
• goToNextPage(animated = true): the component navigates to the next page (to the future). Note: if prependMostRecent is true, and the component is near the last page rendered, there may be a delay on the animation.
• goToPrevPage(animated = true): the component navigates to the previous page (to the past). Note: if prependMostRecent is false (the default), and the component is near the first page rendered, there may be a delay on the animation.

Custom EventComponent

The custom component will be rendered inside a TouchableOpacity, which has the background color set to event.color, and is placed with absolute position in the grid. The component receives two props:

• event (Event) - Event item as described before.
• position: (Object) - object containing top, left, height and width values in pixels.

For example, to display an icon inside each event, such as a react-native-elements Icon:

const MyEventComponent = ({ event, position }) => (
  <Icon
    name={event.iconName}
    type={event.iconType}
    color={event.color}
    size={position.height}
  />
);

<WeekView
  // ... other props
  EventComponent={MyEventComponent}
/>

Custom day components

(Note: first you should check if the props headerStyle, headerTextStyle and/or formatDateHeader are enough for your use case).

Use these props to fully customize the days in the header.

• TodayHeaderComponent: to highlight today in the header, by rendering it differently from the other days.
• DayHeaderComponent: to render every day in the header. Overrides the prop TodayHeaderComponent.

Both components would receive these props:

• date (moment Date) - moment date object containing today's date.
• formattedDate (String) - day formatted according to formatDateHeader, e.g. "Mon 3".
• textStyle (Object) - text style used for every day.
• isToday (Bool) - indicate if the date is today or not.

Examples:

// Highlight today with a bold font
const MyTodayComponent = ({ formattedDate, textStyle }) => (
  <Text style={[textStyle, { fontWeight: 'bold' }]}>{formattedDate}</Text>
);

// Add text to the header
const MyDayComponent = ({ formattedDate, textStyle, isToday }) => (
  <Text style={textStyle}>Some text - {formattedDate}</Text>
);

<WeekView
  TodayHeaderComponent={MyTodayComponent}
  // or:
  DayHeaderComponent={MyDayComponent}
/>

Locales customization

There's a addLocale function to add customized locale for the component. The component depends on momentjs, you can refer to https://momentjs.com/docs/#/customization/ for more information.

Example:

export WeekView, { addLocale } from 'react-native-week-view';
// add customized localed before using locale prop.
addLocale('fr', {
  months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
  monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
  weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
  weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
});

Custom RefreshComponent

• RefreshComponent is a ReactComponent that receives a style prop that must be used (since it sets the component position).
• Note: the ActivityIndicator default color in some devices may be white.

Example:

const MyRefreshComponent = ({ style }) => (
  <Text style={style}>loading...</Text>
);

<WeekView
  // ... other props
  RefreshComponent={MyRefreshComponent}
/>

Other example usages

Fixed week

The WeekView component can be used to display a fixed week (as a timetable):

• Use the prop fixedHorizontally={true}. This prop should not be changed after the first render

• To set startDate and endDate in each event, you should use the function provided: createFixedWeekDate(day, hour, minutes=0, seconds=0), where:

  • day: (Number|String) - specify day of the week as number (1 is monday, 2 is tuesday, etc) or as string (will be parsed with the current locale, e.g. "Monday", "Tuesday", etc. for english).
  • hour: (Number) - specify hour of the day as number (from 0 to 23)
  • minutes: (Number) - specify minutes of the day as number (from 0 to 59), defaults to 0
  • seconds: (Number) - specify seconds of the day as number (from 0 to 59), defaults to 0

  If you choose to not use createFixedWeekDate(), make sure that startDate and endDate are Date objects within this week, otherwise the events will not be displayed correctly in the timetable.

• If the numberOfDays is other than 7, will display the first days of the week. E.g. if numberOfDays === 5, will display from monday to friday.

import WeekView, { createFixedWeekDate } from 'react-native-week-view';

const myEvents = [
  {
    id: 1,
    description: 'Event 1',
    startDate: createFixedWeekDate('Monday', 12), // Day may be passed as string
    endDate: createFixedWeekDate(1, 14), // Or as number, 1 = monday
    color: 'blue',
  },
  {
    id: 2,
    description: 'Event 2',
    startDate: createFixedWeekDate('wed', 16),
    endDate: createFixedWeekDate(3, 16, 30),
    color: 'red',
  },
];

const MyComponent = () => (
  <WeekView
    events={myEvents}
    fixedHorizontally={true}
    // Recommended props:
    showTitle={false} // if true, shows this month and year
    numberOfDays={7}
    formatDateHeader="ddd" // display short name days, e.g. Mon, Tue, etc
    // ... other props
  />
);