react-big-calendar

一个为React构建的事件日历组件，针对现代浏览器（阅读：IE10+），并在经典的table-ception方法上使用flexbox。

使用和设置

yarn add react-big-calendar 或npm install --save react-big-calendar

包括react-big-calendar/lib/css/react-big-calendar.css 的样式，并确保你的日历的容器元素有一个高度，否则日历将不可见。要提供你自己的自定义样式，请参见自定义样式主题。

启动器

在本地运行示例

$ git clone git@github.com:jquense/react-big-calendar.git
$

打开localhost:3000/examples/index.html。

本地化和日期格式化

react-big-calendar 包括三个处理日期格式化和文化本地化的选项，这取决于你对DateTime库的偏好。你可以使用Moment.js、Globalize.js或date-fns本地化器。

不管你的选择如何，你必须选择一个本地化器来使用这个库。

Moment.js

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const localizer = momentLocalizer(moment)

const MyCalendar = props => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

Globalize.js v0.1.1

import { Calendar, globalizeLocalizer } from 'react-big-calendar'
import globalize from 'globalize'

const localizer = globalizeLocalizer(globalize)

const MyCalendar = props => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

dat-fns v2

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import format from 'date-fns/format'
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'
import enUS from 'date-fns/locale/en-US'

const locales = {
  'en-US': enUS,
}

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
})

const MyCalendar = props => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

自定义样式

开箱即用，你可以包含编译好的CSS文件并开始运行。但是，有时候，你可能想让大日历的样式与你的应用程序的样式相匹配。出于这个原因，SASS文件被包含在Big Calendar中。

  @import 'react-big-calendar/lib/sass/styles';
  @import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD

SASS的实现提供了一个variables 文件，其中包含了颜色和大小的变量，你可以根据你的应用来更新。_注意：_改变和/或覆盖样式可能会导致你的大日历的渲染问题。仔细测试每个变化。

在Reactiflux Discord上加入我们

如果你有任何问题，请加入我们Reactiflux Discord社区的#libraries频道。