react-week-events

A React.js responsive week calendar to show/handle events

Install

npm install --save react-week-events
yarn add react-week-events

Usage

import React, { Component } from 'react'
import WeekCalendar from 'react-week-events'
import 'react-week-calendar/dist/styles.css'

class Example extends Component {
  state = {
    events: [
      { name: 'Event 1', date: new Date() },
      { name: 'Event 2', date: new Date() },
      { name: 'Event 3', date: new Date() }
    ]
  }

  eventRender = (event, i) => (
    <div onClick={() => console.log(`Event: ${event.name} on position: ${i}`)}>
      {event.name}
    </div>
  )

  emptyRender = () => <div>No events</div>

  render() {
    const { events } = this.state
    return (
      <WeekCalendar
        events={events}
        emptyRender={this.emptyRender}
        eventRender={this.eventRender}
        past={true}
      />
    )
  }
}

Important: This component needs moment.js :tw-203c:

Props

| Prop | Type | Default | Description | | ----------- | -------- | --------------------- | --------------------------------------------------------- | | dateLabel | String | 'date' | Object date value name for render event on respective day | | events | [] | [] | List of events to render | | emptyRender | Function | () => 'No event' | Message to show when no event | | eventRender | Function | (event) => event.name | Function to render and handle the event | | past | Boolean | true | Option to show past dates |

License

MIT © bernagl