Installations
npm install react-big-calendarReleases
Contributors
Developer
Developer Guide
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
22.11.0
NPM Version
10.9.0
Statistics
7,932 Stars
904 Commits
2,242 Forks
81 Watching
36 Branches
247 Contributors
Updated on 27 Nov 2024
Bundle Size
176.27 kB
Minified
50.24 kB
Minified + Gzipped
Languages
JavaScript (80.31%)
MDX (16.42%)
SCSS (2.96%)
Less (0.26%)
Shell (0.03%)
HTML (0.03%)
Total Downloads
Cumulative downloads
Total Downloads
48,246,232
Last day
-2.3%
61,489
Compared to previous day
Last week
2.4%
313,970
Compared to previous week
Last month
13.8%
1,336,343
Compared to previous month
Last year
30.9%
13,766,582
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
16
Dev Dependencies
59
react-big-calendar
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 by Full Calendar.
Use and Setup
yarn add react-big-calendar or npm install --save react-big-calendar
Include react-big-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. To provide your own custom styling, see the Custom Styling topic.
Starters
- react-big-calendar
- react-big-calendar with drag and drop
- react-big-calendar with TypeScript and React hooks bundled with Vite
Run examples locally
1$ git clone git@github.com:jquense/react-big-calendar.git 2$ cd react-big-calendar 3$ yarn 4$ yarn storybook
Localization and Date Formatting
react-big-calendar includes four options for handling the date formatting and culture localization, depending
on your preference of DateTime libraries. You can use either the Moment.js, Globalize.js, date-fns, Day.js localizers.
Regardless of your choice, you must choose a localizer to use this library:
Moment.js
1import { Calendar, momentLocalizer } from 'react-big-calendar' 2import moment from 'moment' 3 4const localizer = momentLocalizer(moment) 5 6const MyCalendar = (props) => ( 7 <div> 8 <Calendar 9 localizer={localizer} 10 events={myEventsList} 11 startAccessor="start" 12 endAccessor="end" 13 style={{ height: 500 }} 14 /> 15 </div> 16)
Globalize.js v0.1.1
1import { Calendar, globalizeLocalizer } from 'react-big-calendar' 2import globalize from 'globalize' 3 4const localizer = globalizeLocalizer(globalize) 5 6const MyCalendar = (props) => ( 7 <div> 8 <Calendar 9 localizer={localizer} 10 events={myEventsList} 11 startAccessor="start" 12 endAccessor="end" 13 style={{ height: 500 }} 14 /> 15 </div> 16)
date-fns v2
1import { Calendar, dateFnsLocalizer } from 'react-big-calendar' 2import format from 'date-fns/format' 3import parse from 'date-fns/parse' 4import startOfWeek from 'date-fns/startOfWeek' 5import getDay from 'date-fns/getDay' 6import enUS from 'date-fns/locale/en-US' 7 8const locales = { 9 'en-US': enUS, 10} 11 12const localizer = dateFnsLocalizer({ 13 format, 14 parse, 15 startOfWeek, 16 getDay, 17 locales, 18}) 19 20const MyCalendar = (props) => ( 21 <div> 22 <Calendar 23 localizer={localizer} 24 events={myEventsList} 25 startAccessor="start" 26 endAccessor="end" 27 style={{ height: 500 }} 28 /> 29 </div> 30)
Day.js
Note that the dayjsLocalizer extends Day.js with the following plugins:
1import { Calendar, dayjsLocalizer } from 'react-big-calendar' 2import dayjs from 'dayjs' 3 4const localizer = dayjsLocalizer(dayjs) 5 6const MyCalendar = (props) => ( 7 <div> 8 <Calendar 9 localizer={localizer} 10 events={myEventsList} 11 startAccessor="start" 12 endAccessor="end" 13 style={{ height: 500 }} 14 /> 15 </div> 16)
Custom Styling
Out of the box, you can include the compiled CSS files and be up and running. But, sometimes, you may want to style Big 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 DnD
SASS implementation provides a variables file containing color and sizing variables that you can
update to fit your application. Note: Changing and/or overriding styles can cause rendering issues with your
Big Calendar. Carefully test each change accordingly.
Join The Community
Help us improve Big Calendar! Join us on Slack. (Slack invite links do expire. If you can't get in, just file an issue and we'll get a new link.)
Translations
No vulnerabilities found.
Reason
12 commit(s) and 6 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/release.yml:9
Reason
Found 12/30 approved changesets -- score normalized to 4
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/issue-close-require.yml:1
- Warn: no topLevel permission defined: .github/workflows/issue-labeled.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/storybook.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/issue-close-require.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/jquense/react-big-calendar/issue-close-require.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/issue-labeled.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/jquense/react-big-calendar/issue-labeled.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/jquense/react-big-calendar/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/jquense/react-big-calendar/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/storybook.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/jquense/react-big-calendar/storybook.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/storybook.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/jquense/react-big-calendar/storybook.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/storybook.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/jquense/react-big-calendar/storybook.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/jquense/react-big-calendar/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/jquense/react-big-calendar/test.yml/master?enable=pin
- Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 3 third-party GitHubAction dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 15 are checked with a SAST tool
Reason
22 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
4.6
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to react-big-calendar
@types/react-big-calendar
TypeScript definitions for react-big-calendar
@roopendra/react-big-calendar
Fork of react-big-calendar with timezone support (depends on moment-timezone)
react-big-calendar-like-google
Forked from Jason Quense <monastic.panic@gmail.com> (https://github.com/intljusticemission/react-big-calendar). Changed calendar style! with events
@fedotxxl/react-big-calendar-types
TypeScript definitions for react-big-calendar