react-native-weekly-calendar

React Native Weekly Calendar component with customization

Installation

yarn add react-native-weekly-calendar

Usage

import React from 'react';
import { StyleSheet, View } from 'react-native';
import WeeklyCalendar from 'react-native-weekly-calendar';

export default function App() {
  const sampleEvents = [
    { 'start': '2020-03-23 09:00:00', 'duration': '00:20:00', 'note': 'Walk my dog' },
    { 'start': '2020-03-24 14:00:00', 'duration': '01:00:00', 'note': 'Doctor\'s appointment' },
    { 'start': '2020-03-25 08:00:00', 'duration': '00:30:00', 'note': 'Morning exercise' },
    { 'start': '2020-03-25 14:00:00', 'duration': '02:00:00', 'note': 'Meeting with client' },
    { 'start': '2020-03-25 19:00:00', 'duration': '01:00:00', 'note': 'Dinner with family' },
    { 'start': '2020-03-26 09:30:00', 'duration': '01:00:00', 'note': 'Schedule 1' },
    { 'start': '2020-03-26 11:00:00', 'duration': '02:00:00', 'note': 'Schedule 2' },
    { 'start': '2020-03-26 15:00:00', 'duration': '01:30:00', 'note': 'Schedule 3' },
    { 'start': '2020-03-26 18:00:00', 'duration': '02:00:00', 'note': 'Schedule 4' },
    { 'start': '2020-03-26 22:00:00', 'duration': '01:00:00', 'note': 'Schedule 5' }
  ]

  return (
    <View style={styles.container}>
      <WeeklyCalendar events={sampleEvents} style={{ height: 400 }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

Select Date

Change Week

Pick Date (iOS & Android)

Properties

All properties are optional. | Prop | Default | PropTypes | Description | | :------------ |:---------------:| :---------------:| :-----| | selected | moment() | string or Date or Moment | Set initially selected day. Format for string: 'YYYY-MM-DD'. Date and Moment instance are allowed as well. Default provides Moment instance of today| | startWeekday | 7 | number | Set which weekday to render first. If firstDay = 1, week starts from Monday. If firstDay = 7, week starts from Sunday. | | titleFormat | undefined | string | Set format to display title (e.g. titleFormat='MMM YYYY' displays "Jan 2020") | | weekdayFormat | 'ddd' | string | Set format to display weekdays (e.g. weekdayFormat='dd' displays "Mo" and weekdayFormat='ddd' displays "Mon") | | locale | 'en' | string | Set locale (e.g. Korean='ko', English='en', Chinese(Mandarin)='zh-cn', etc.) | | events | [] | array | Set list of events you want to display below weekly calendar. Default is empty array []. | | renderEvent | undefined | func | Specify how each event should be rendered below weekly calendar. Event & index are given as parameters. | | renderFirstEvent | undefined | func | Specify how first event should be rendered below weekly calendar. Event & index are given as parameters. | | renderLastEvent | undefined | func | Specify how last event should be rendered below weekly calendar. Event & index are given as parameters. | | renderDay | undefined | func | Specify how day should be rendered below weekly calendar. Event Views, day (Moment object), index are given as parameters. | | renderFirstDay | undefined | func | Specify how first day should be rendered below weekly calendar. Event Views, day (Moment object), index are given as parameters. | | renderLastDay | undefined | func | Specify how last day should be rendered below weekly calendar. Event Views, day (Moment object), index are given as parameters. | | onDayPress | undefined | func | Handler which gets executed on day press. Default = undefined | | themeColor | '#46c3ad' | string | Set theme color. Either color code or color name that is registered in RN StyleSheet works. | | style | {} | object | Set style of WeeklyCalendar component | | titleStyle | {} | object | Set text style of calendar title | | dayLabelStyle | {} | object | Set text style of weekday labels |

Customization

<WeeklyCalendar
  events={sampleEvents} 
  selected='2020-03-23'
  startWeekday={7}
  weekdayFormat='ddd'
  locale='ko'
  renderEvent={(event, j) => {
    let startTime = moment(event.start).format('LT').toString()
    let duration = event.duration.split(':')
    let seconds = parseInt(duration[0]) * 3600 + parseInt(duration[1]) * 60 + parseInt(duration[2])
    let endTime = moment(event.start).add(seconds, 'seconds').format('LT').toString()
    return (
      <View key={j}>
        <View style={styles.event}>
          <View style={styles.eventDuration}>
            <View style={styles.durationContainer}>
              <View style={styles.durationDot} />
              <Text style={styles.durationText}>{startTime}</Text>
            </View>
            <View style={{ paddingTop: 10 }} />
            <View style={styles.durationContainer}>
              <View style={styles.durationDot} />
              <Text style={styles.durationText}>{endTime}</Text>
            </View>
            <View style={styles.durationDotConnector} />
          </View>
          <View style={styles.eventNote}>
            <Text style={styles.eventText}>{event.note}</Text>
          </View>
        </View>
        <View style={styles.lineSeparator} />
      </View>
    )
  }}
  renderLastEvent={(event, j) => {
    let startTime = moment(event.start).format('LT').toString()
    let duration = event.duration.split(':')
    let seconds = parseInt(duration[0]) * 3600 + parseInt(duration[1]) * 60 + parseInt(duration[2])
    let endTime = moment(event.start).add(seconds, 'seconds').format('LT').toString()
    return (
      <View key={j}>
        <View style={styles.event}>
          <View style={styles.eventDuration}>
            <View style={styles.durationContainer}>
              <View style={styles.durationDot} />
              <Text style={styles.durationText}>{startTime}</Text>
            </View>
            <View style={{ paddingTop: 10 }} />
            <View style={styles.durationContainer}>
              <View style={styles.durationDot} />
              <Text style={styles.durationText}>{endTime}</Text>
            </View>
            <View style={styles.durationDotConnector} />
          </View>
          <View style={styles.eventNote}>
            <Text style={styles.eventText}>{event.note}</Text>
          </View>
        </View>
      </View>
    )
  }}
  renderDay={(eventViews, weekdayToAdd, i) => (
    <View key={i.toString()} style={styles.day}>
      <View style={styles.dayLabel}>
        <Text style={[styles.monthDateText, { color: 'pink' }]}>{weekdayToAdd.format('M/D').toString()}</Text>
        <Text style={[styles.dayText, { color: 'pink' }]}>{weekdayToAdd.format('ddd').toString()}</Text>
      </View>
      <View style={[styles.allEvents, eventViews.length === 0 ? { width: '100%', backgroundColor: 'pink' } : {}]}>
        {eventViews}
      </View>
    </View>
  )}
  onDayPress={(weekday, i) => {
    console.log(weekday.format('ddd') + ' is selected! And it is day ' + (i+1) + ' of the week!')
  }}
  themeColor='pink'
  style={{ height: 400 }}
  titleStyle={{ color: 'blue' }}
  dayLabelStyle={{ color: 'green' }}
/>

Author

• Minjae Oak - LinkedIn

License

This project is licenced under the MIT License.