/revo-calendar

A React Event Calendar Component

Primary LanguageTypeScriptMIT LicenseMIT

revo-calendar

npm NPM npm bundle size

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: person icon

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"

License

MIT © gjmolter