react-agenda-calendar

Shows month, week, or day schedule

Made for a project I'm working on, but I thought it could be usefully in other projects, so I decided to make it as a separate project. I plan to add more, but if there are any desired features, feel free to create an issue, or make a merge request.

Install

npm install --save react-agenda-calendar
yarn add react-agenda-calendar

Usage

import React, { Component } from 'react'

import AgendaCalender from 'react-agenda-calendar'
import 'react-agenda-calendar/dist/index.css'

class Example extends Component {
  const agenda = [
    {
      title: "Title",
      startDate: {day: 1, month: 2, year: 2020},
      endDate: {day: 5, month: 2, year: 2020},
    }
  ]

  render() {
    return <AgendaCalender containerStyle={{height: "calc(100% - 51x)"}} containerClassName={styles.calenderContainer} agenda={agenda} currentDate={new Date(2004, 0, 6)} /></div>
  }
}

| Prop Name | Description | Default Value | Example Value | | ------------------- | ----------------------------- | ------------- | --------------- | | containerStyle | inline styling for container | N/A | {height: "50%"} | | containerClassName | css className for container | N/A | css className, or css module | | agenda | Array of events to be displayed. | [] | [{ title: "Title", startDate: {day: 1, month: 2, year: 2020}, endDate: {day: 5, month: 2,year: 2020}}, { title: "Title 2", startDate: {day: 23, month: 5, year: 2020}}] | | currentDate | Date displayed on the calendar | Today | new Date(2004, 0, 6) |

License

MIT © Jhamali