genie-react-calendar v0.13.1
genie-react-calendar
React events calendar built on top of react-big-calendar
(https://github.com/intljusticemission/react-big-calendar)
Inspired by Full Calendar.
Use and Setup
npm install genie-react-calendar --save
Include genie-react-calendar/lib/css/react-big-calendar.css
for styles, and make sure your calendar's container
element has a height, or the calendar won't be visible.
Localization and Date Formatting
react-big-calendar
includes two options for handling the date formatting and culture localization, depending
on your preference of DateTime libraries. You can use either the Moment.js or Globalize.js localizers.
Regardless of your choice, you must choose a localizer to use this library:
Moment.js
import BigCalendar from 'react-big-calendar'
import moment from 'moment'
const localizer = BigCalendar.momentLocalizer(moment)
const MyCalendar = props => (
<div>
<BigCalendar
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
/>
</div>
)
Globalize.js v0.1.1
import BigCalendar from 'react-big-calendar'
import globalize from 'globalize'
const localizer = BigCalendar.globalizeLocalizer(globalize)
const MyCalendar = props => (
<div>
<BigCalendar
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
/>
</div>
)
Making changes
To test changes to the calendar in website, build the calendar then copy it into node_modules
in website. The easiest way to do this is with a script in the genie-react-calendar
folder, something like:
yarn build
cp -rf lib/* ../website/node_modules/genie-react-calendar/lib
If you have yarn watch
running in website, it should immediately pick up the changes to node_modules
and rebuild.
1 year ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago