React JS 大日历 - Javascript

React JS 大日历是一个用于 React 应用程序的高度可定制和易于使用的组件，用于呈现可交互式和可扩展的日历和日程表。

特性

• 多种视图：月度、周度、日程，可以用于不同的应用场景
• 事件支持：可以添加、编辑和删除事件
• 时间区间支持：可以显示一个时间段内的事件
• 国际化支持：可以支持不同的语言和地区
• 完全可定制：可以轻松自定义样式和行为
• 易于使用：可直接使用，无需其他依赖项

安装

你可以使用 npm 或 yarn 进行安装：

npm install @zachary-react/big-calendar

或者

yarn add @zachary-react/big-calendar

使用

使用大日历非常方便，只需要引用组件并传递必要的参数即可。下面是一个简单的示例：

import React from 'react';
import { Calendar, momentLocalizer } from '@zachary-react/big-calendar';
// moment.js 是必须的
import moment from 'moment';
import 'moment/locale/zh-cn';
import '@zachary-react/big-calendar/lib/css/styles.css';

moment.locale('zh-cn');
// localizer 必须是 momentLocalizer
const localizer = momentLocalizer(moment);
 
const events = [
  {
    start: new Date(),
    end: new Date(new Date().setHours(new Date().getHours() + 1)),
    title: '示例事件'
  }
];
 
const MyCalendar = () => (
  <div>
    <Calendar
      localizer={localizer}
      defaultDate={new Date()}
      defaultView="month"
      events={events}
      style={{ height: '100vh' }}
    />
  </div>
);

export default MyCalendar;

自定义事件处理

为了在事件发生时触发事件处理程序，您必须在创建组件时将相应的回调函数传递给 BigCalendar 组件。

下面是一个事件提醒的简单示例：

import React, { useState } from 'react';
import { Calendar, momentLocalizer } from '@zachary-react/big-calendar';
import moment from 'moment';
import 'moment/locale/zh-cn';
import '@zachary-react/big-calendar/lib/css/styles.css';

moment.locale('zh-cn');
const localizer = momentLocalizer(moment);

const MyCalendar = () => {
  const [events, setEvents] = useState([
    {
      start: new Date(),
      end: new Date(new Date().setHours(new Date().getHours() + 1)),
      title: '示例事件'
    }
  ]);

  const handleSelect = ({ start, end }) => {
    const title = window.prompt('请输入事件标题');
    if (title) {
      setEvents([...events,{ start, end, title }]);
    }
  };

  return (
    <div>
      <Calendar 
        selectable
        localizer={localizer}
        events={events}
        defaultView="week"
        scrollToTime={new Date(1970, 1, 1, 6)}
        defaultDate={new Date()}
        onSelectEvent={event => alert(event.title)}
        onSelectSlot={handleSelect}
        style={{ height: '100vh' }}
      />
    </div>
  )
}

export default MyCalendar;

自定义事件样式

您可以通过设置 prop "eventPropGetter" 来自定义事件的样式，下面是一个简单的示例：

import React from 'react';
import { Calendar, momentLocalizer } from '@zachary-react/big-calendar';
import moment from 'moment';
import 'moment/locale/zh-cn';
import '@zachary-react/big-calendar/lib/css/styles.css';

moment.locale('zh-cn');
const localizer = momentLocalizer(moment);

const events = [
  {
    start: new Date(),
    end: new Date(new Date().setHours(new Date().getHours() + 1)),
    title: '示例事件',
    type: 'important'
  }
];

const eventStyleGetter = (event, start, end, isSelected) => {
  let backgroundColor = '#ffffff';

  if (event.type === 'important') {
    backgroundColor = '#faa';
  }

  return {
    style: {
      backgroundColor
    }
  };
};

const MyCalendar = () => (
  <div>
    <Calendar
      localizer={localizer}
      events={events}
      defaultView="week"
      scrollToTime={new Date(1970, 1, 1, 6)}
      defaultDate={new Date()}
      eventPropGetter={eventStyleGetter}
      style={{ height: '100vh' }}
    />
  </div>
);

export default MyCalendar;

总结

React JS 大日历是一个高度可定制和易于使用的组件，可以用于构建各种不同类型的日历和日程表应用程序。您可以使用它来呈现多种视图、添加事件、控制时间区间、支持国际化，并使用回调函数自定义事件处理和样式。