react-calendar-from-scratch's Introduction

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

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

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

react-calendar-from-scratch's People

Contributors

Stargazers

Watchers

react-calendar-from-scratch's Issues

How to configure the package with webpack

I would like to plot all my trips requests dates on the calendar. I want to use your package. However, webpack failed to bundle it.

   ERROR in ./src/views/trips/ViewCalendar.js
   Module not found: Error: Can't resolve 'react-full-event-calendar' in 
   '/Users/niyo/Documents/Andela/project/team-odd-bn-frontend/src/views/trips'
   @ ./src/views/trips/ViewCalendar.js 10:15-51
   @ ./src/App.js
   @ ./src/index.js