REACT EVENT CALENDAR FROM SCRATCH

This package has been deprecated, use https://www.npmjs.com/package/react-full-event-calendar instead

An event calendar like the google's calendar with generic style.

Installation

npm i react-full-event-calendar

or

yarn add react-full-event-calendar

Day Calendar

Week Calendar

Month Calendar

Usage

const Calendar = require('react-full-event-calendar');

const titleText = 'working in the weekend';

const events = [
  {
    startTime: new Date(moment().add(2, 'hour')),
    endTime: new Date(moment().add(3, 'hour')),
    title: 'working in the weekend',
  },
  {
    startTime: new Date(moment().add(-3, 'hour')),
    endTime: new Date(moment().add(-2, 'hour')),
    title: 'working in the weekend',
  },
  {
    startTime: new Date(),
    endTime: new Date(moment().add(1, 'hour')),
    title: 'working in the weekend',
  },
];

<Calendar
  events={events}
/>

Props

Property	Type	Default	Description
events	Array	Required	Events to display on the calendar
dayOrientation	String	horizontal	The orientation of the day calendar, either 'vertical' or 'horizontal'
defautlCalendarView	String	week	The default calendar to show, either 'day', 'week' or 'month'
defaultDate	Date	new Date()	The date to start on when mounted
onDayChange	func(day, newDay)		Callback when the day change on day calendar
onWeekChange	func(newStartOfTheWeek, newEendOfTheWeek)		Callback when the week change on week calendar
onMonthChange	func(newMonth, newYear)		Callback when the month change on month calendar

Event Objects

Key	Type	Required	Description
title	String	true	The title of the event
startTime	Date	true	The start time of the event
endTime	Date	true	The end time of the event

DEMO

Demo

Authors

• Karl Musingo
• Emmanuel Rukundo

See also the list of contributors who participated in this project.