revo-calendar

A modern-looking React Event Calendar component.

Very much inspired on Evo Calendar. If you're not using React on your project, I recommend this calendar plugin that runs on jQuery.

Demo 👀

Live Demo and Playground: https://gjmolter.github.io/revo-calendar

Install 📦

#NPM
npm i revo-calendar

#YARN
yarn add revo-calendar

Usage ✍️

//Import the component
import RevoCalendar from "revo-calendar";

const Index = () => {
  return <RevoCalendar {...props} />;
};

Available Props 🎛️

Prop	Type	Default	Description	Options
events	array	`[]`	List of events to be added to the calendar	See detailed explanation below
date	Date	`new Date()`	Default current date	Any JS Date object
className	string	`''`	Adds extra CSS classes to the calendar	Any class name
style	CSS-in-JS	`{}`	Adds extra CSS using CSS-in-JS	Any CSS-in-JS
highlightToday	bool	`true`	If `true`, will show a ring around today's date on calendar	`true` or `false`
lang	string	`'en'`	Calendar's language	`en`, `pt`, `fr`, `es`, `de`, `ru` or any other if custom `languages` is used
primaryColor	string	`'#4F6995'`	Background color for the side panels and text color for current month name	Hex, RGB, RGBA, CSS color name
secondaryColor	string	`'#4F6995'`	Calendar background color and side panels text color	Hex, RGB, RGBA, CSS color name
todayColor	string	`'#4F6995'`	Color of today's highlight ring (Will only be used if `highlightToday` is `true`	Hex, RGB, RGBA, CSS color name
textColor	string	`'#4F6995'`	Text color for weekday names and day numbers	Hex, RGB, RGBA, CSS color name
indicatorColor	string	`'orange'`	Text color for event indicator	Hex, RGB, RGBA, CSS color name
animationSpeed	number	`300`	Speed in milliseconds for all transitions and animations	Any number
sidebarWidth	number	`180`	Size in pixels of the left panel (month/year selection)	Any number
detailWidth	number	`280`	Size in pixels of the right panel (current day's events)	Any number
showSidebarToggler	bool	`true`	If `true`, will show left panel's toggling button	`true` or `false`
sidebarDefault	bool	`true`	If `true`, will have left panel open by default	`true` or `false`
showDetailToggler	bool	`true`	If `true`, will show right panel's toggling button	`true` or `false`
detailDefault	bool	`true`	If `true`, will have right panel open by default	`true` or `false`
onePanelAtATime	bool	`false`	If `true`, won't allow two panels to be open simultaneously	`true` or `false`
openDetailsOnDateSelection	bool	`true`	If `true`, will open right panel when date is selected	`true` or `false`
timeFormat24	bool	`true`	If `true`, will display dates in 24H format instead of 12 (21:41 instead of 9:41 PM)	`true` or `false`
detailDateFormat	string	`'DD/MM/YYYY'`	The way that current selected date will be displayed on right panel	Any string. See details below
languages	object	translation object with `en`, `pt`, `es`, `fr`, `ru` and `de`	If the current supported languages are not enough or you want to modify one of the translations, you can add your own translations object. See details below
dateSelected	function	`date => {}`	Use this function to get current selected date on your parent component	Any function that receives an object with `day`, `month` and `year` keys
eventSelected	function	`index => {}`	Use this function to get clicked event's index	Any function that receives a `number` parameter (event index on `events` array)
allowDeleteEvent	bool	`false`	If `true`, will display delete button when event is clicked	`true` or `false`
allowAddEvent	bool	`false`	If `true`, will display add event button on right panel	`true` or `false`
addEvent	function	`date => {}`	Use this function to add Events to `events` array	Any function that receives an object with `day`, `month` and `year` keys
deleteEvent	function	`index => {}`	Use this function to delete events from the `events` array	Any function that receives a `number` parameter (index to be deleted from `events` array)

events Prop

events should receive an array of event objects. Events have two mandatory parameters and two optionals

Event object:

Key	Type	Mandatory	Descrition
name	string	✔️	Event name
date	unix timestamp	✔️	13 character timestamp. Can be obtained from adding operator `+` before JS `Date` object.
allDay	bool		If `true`, will ignore `Date` object's time and show `allDay` string from current language's translation object
extra	object		If exists, will add one extra event information next to time. The object needs to contain strings: `icon` and `text`. `icon` will be passed as an `svg` `path` `d` parameter.

Example:

var events = [
  {
    name: "Buyout",
    date: Date.now(),
    allDay: true,
  },
  {
    name: "Reservation",
    date: 1594422992000,
    extra: {
      icon: "M20.822 18.096c-3.439-.794-6.64-1.49-5.09-4.418 4.72-8.912 1.251-13.678-3.732-13.678-5.082 0-8.464 4.949-3.732 13.678 1.597 2.945-1.725 3.641-5.09           4.418-3.073.71-3.188 2.236-3.178 4.904l.004 1h23.99l.004-.969c.012-2.688-.092-4.222-3.176-4.935z",
      text: "7 People",
    },
  },
];

The example's extra.icon will render this:

languages Prop

You can create an object where each key is a language (key needs to match lang atribute), each language needs to have the keys: days, daysShort, daysMin, months, monthsShort, noEventForThisDay and allDay.

Here is an example of the Esperanto language:

const translations = {
  esperanto: {
    days: ["Dimanĉo", ..."Sabato"],
    daysShort: ["Dim", ..."Sab"],
    daysMin: ["Di", ..."Sa"],
    months: ["Januaro", ..."Decembro"],
    monthsShort: ["Jan", ..."Dec"],
    noEventForThisDay: "Neniu evento por ĉi tiu tago ... do ripozu!",
    allDay: "Tuta tago",
    addEvent: "Aldoni eventon",
    delete: "Forigi",
    eventTime: "Tempo de evento",
    previousYear: "Pasintjare",
    nextYear: "Venonta jaro",
    toggleSidebar: "Baskulu flanka kolumno",
    toggleDetails: "Ŝaltu Detalojn",
  },
};

To render the calendar using custom esperanto language, pass the translations object and the key to languages and lang respectivelly.

Example:

<RevoCalendar languages={translations} lang="esperanto" />

detailDateFormat Prop

detailDateFormat can be any string, with the following placeholders being replaced:

placeholder	replacement	example
`MMMM`	Full month name	November
`MMM`	Short month name	Nov
`MM`	Month number	11
`DD`	Day number	18
`nth`	Ordinal day number	18th
`dddd`	Weekday name	Thursday
`ddd`	Short weekday name	Thu
`dd`	Tiny weekday name	Th
`YYYY`	Full year	1997
`YY`	Year's last 2 digits	97

Example

"MMM nth, YYYY" => "Nov 18th, 1997"

gjmolter/revo-calendar