revo-calendar-jzepeda v3.5.1
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
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago