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"

License

MIT © gjmolter