Package Exports

rn-weekly-calendar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rn-weekly-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

select_dates

Change Week

change_weeks

Pick Date (iOS & Android)

pick_dates_ios pick_dates_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' }}
/>

customized

Author

Minjae Oak - LinkedIn

License

This project is licenced under the MIT License.