- Notifications
You must be signed in to change notification settings - Fork0
gcal/outlook like calendar component
License
Deep-Consulting-Solutions/react-big-calendar
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An events calendar component built for React and designed for modern browsers (read: not IE) and uses flexbox over the classic tables-caption approach.
Inspired byFull Calendar.
yarn add react-big-calendar ornpm install --save react-big-calendar
Includereact-big-calendar/lib/css/react-big-calendar.css for styles, and make sure your calendar's containerelement has a height, or the calendar won't be visible. To provide your own custom styling, see theCustom Styling topic.
- react-big-calendar
- react-big-calendar with drag and drop
- react-big-calendar with TypeScript and React hooks bundled with Vite
$ git clone git@github.com:jquense/react-big-calendar.git$cd react-big-calendar$ yarn$ yarn storybookreact-big-calendar includes four options for handling the date formatting and culture localization, dependingon your preference of DateTime libraries. You can use either theMoment.js,Globalize.js,date-fns,Day.js localizers.
Regardless of your choice, youmust choose a localizer to use this library:
import{Calendar,momentLocalizer}from'react-big-calendar'importmomentfrom'moment'constlocalizer=momentLocalizer(moment)constMyCalendar=(props)=>(<div><Calendarlocalizer={localizer}events={myEventsList}startAccessor="start"endAccessor="end"style={{height:500}}/></div>)
import{Calendar,globalizeLocalizer}from'react-big-calendar'importglobalizefrom'globalize'constlocalizer=globalizeLocalizer(globalize)constMyCalendar=(props)=>(<div><Calendarlocalizer={localizer}events={myEventsList}startAccessor="start"endAccessor="end"style={{height:500}}/></div>)
import{Calendar,dateFnsLocalizer}from'react-big-calendar'importformatfrom'date-fns/format'importparsefrom'date-fns/parse'importstartOfWeekfrom'date-fns/startOfWeek'importgetDayfrom'date-fns/getDay'importenUSfrom'date-fns/locale/en-US'constlocales={'en-US':enUS,}constlocalizer=dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales,})constMyCalendar=(props)=>(<div><Calendarlocalizer={localizer}events={myEventsList}startAccessor="start"endAccessor="end"style={{height:500}}/></div>)
Note that the dayjsLocalizer extends Day.js with the following plugins:
import{Calendar,dayjsLocalizer}from'react-big-calendar'importdayjsfrom'dayjs'constlocalizer=dayjsLocalizer(dayjs)constMyCalendar=(props)=>(<div><Calendarlocalizer={localizer}events={myEventsList}startAccessor="start"endAccessor="end"style={{height:500}}/></div>)
Out of the box, you can include the compiled CSS files and be up and running. But, sometimes, you may want to styleBig Calendar to match your application styling. For this reason, SASS files are included with Big Calendar.
@import 'react-big-calendar/lib/sass/styles'; @import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnDSASS implementation provides avariables file containing color and sizing variables that you canupdate to fit your application.Note: Changing and/or overriding styles can cause rendering issues with yourBig Calendar. Carefully test each change accordingly.
Help us improve Big Calendar! Join us onSlack.(Slack invite links do expire. If you can't get in, just file an issue and we'll get a new link.)
About
gcal/outlook like calendar component
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Languages
- JavaScript82.3%
- MDX14.1%
- SCSS3.4%
- Other0.2%