npmpackage.info

react-big-calendar

gcal/outlook like calendar component

1.16.3

7,932

MIT

JavaScript

50.24 kB

48,246,232 4.6

Installations

npm install react-big-calendar

Pull Requests

Open

63

Total

876

Closed

363

Merged

450

Issues

Open

302

Total

1,791

Closed

1,489

Releases

127

v1.16.3

Published on 26 Nov 2024

v1.16.2

Published on 25 Nov 2024

v1.16.1

Published on 25 Nov 2024

v1.16.0

Published on 21 Nov 2024

v1.15.0

Published on 01 Oct 2024

v1.14.1

Published on 16 Sept 2024

View all 127 releases

Contributors

247

View all 247 contributors

Developer

jquense

Developer Guide

BETA

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

Bundlephobia

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

Versions

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.

Big Calendar Demo Image

DEMO and Docs

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

Run examples locally

1$ git clone git@github.com:jquense/react-big-calendar.git
2$ cd react-big-calendar
3$ yarn
4$ yarn storybook

Open localhost:3000/examples/index.html.

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.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

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

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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 More

Other packages similar to react-big-calendar

@types/react-big-calendar

1.16.0

TypeScript definitions for react-big-calendar

@roopendra/react-big-calendar

0.19.12

Fork of react-big-calendar with timezone support (depends on moment-timezone)

react-big-calendar-like-google

0.0.3

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

0.39.5-beta.4

TypeScript definitions for react-big-calendar

react-big-calendar

Installations

Pull Requests

63

876

363

450

Issues

302

1,791

1,489

Releases

Contributors

Developer

Developer Guide

CommonJS

No

22.11.0

10.9.0

Statistics

Bundle Size

176.27 kB

50.24 kB

Languages

Total Downloads

48,246,232

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-big-calendar

Use and Setup

Starters

Run examples locally

Localization and Date Formatting

Moment.js

Globalize.js v0.1.1

date-fns v2

Day.js

Custom Styling

Join The Community

Translations

10

10

10

10

10

4

0

0

0

0

0

0

0

4.6

/10

Other packages similar to react-big-calendar