'ej2 反应日历 - Javascript'

ej2-react-schedule 是一款功能强大的 Javascript 日历组件库，它可以帮助你快速构建漂亮、交互性强、高度自定义的日历功能模块，在企业级 Web 应用中得到广泛应用。

特性

• 完整的日历功能支持：支持多种类型的日历视图，包括日、周、月视图。同时支持日程管理、事件提示、拖拽放置等多种功能；
• 高度自定义：ej2-react-schedule 提供了丰富的 API 接口和组件样式设置来支持高度个性化的日历设计；
• 多语言支持：支持国际化和多语言；
• 开箱即用：ej2-react-schedule 完全基于 React 实现，你只需要安装它并按照文档描述使用即可快速接入应用。

安装

使用 npm 安装 ej2-react-schedule：

npm install @syncfusion/ej2-react-schedule --save

使用 React 导入

import {
  ScheduleComponent,
  Day,
  Week,
  Month,
  Agenda,
  Inject
} from "@syncfusion/ej2-react-schedule";

//...

render() {
  return (
    <ScheduleComponent currentView="Month">
      <Inject services={[Day, Week, Month, Agenda]} />
    </ScheduleComponent>
  );
}

//...

快速开始

import React, { Component } from 'react';
import { ScheduleComponent, Day, Week, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ScheduleComponent height="80vh" selectedDate={new Date(2022, 1, 15)} currentView="Month">
          <Inject services={[Day, Week, Month, Agenda]} />
        </ScheduleComponent>
      </div>
    );
  }
}

export default App;

使用样式

@import '~@syncfusion/ej2-base/styles/material.css';
@import '~@syncfusion/ej2-buttons/styles/material.css';
@import '~@syncfusion/ej2-calendars/styles/material.css';
@import '~@syncfusion/ej2-dropdowns/styles/material.css';
@import '~@syncfusion/ej2-inputs/styles/material.css';
@import '~@syncfusion/ej2-lists/styles/material.css';
@import '~@syncfusion/ej2-navigations/styles/material.css';
@import '~@syncfusion/ej2-popups/styles/material.css';
@import '~@syncfusion/ej2-react-schedule/styles/material.css';

参考文档

• ej2-react-schedule
• Github ej2-react-schedule