react-big-calendar一个比较好的日历(schedule)添加事件标注插件

最新推荐文章于 2024-08-09 08:27:31 发布

胖鹅68

最新推荐文章于 2024-08-09 08:27:31 发布

阅读量4.9k

点赞数 3

分类专栏： jquery/js库/Jest

本文链接：https://blog.csdn.net/hbiao68/article/details/115125728

版权

jquery/js库/Jest 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

本文档介绍了如何使用react-big-calendar组件在React应用中创建一个用户可以选择时间创建会议的日历功能。通过设置`selectable`属性为true，用户可以在日历上选择时间。`events`数组用于展示日历上的事件，而`onSelectSlot`回调则在用户选择时间后触发，允许添加新的事件。示例代码展示了如何配置国际化、默认日期和事件，并提供了交互式日历的截图。

摘要由CSDN通过智能技术生成

文章目录

文章参考

问题描述

最近想做一个用户根据日历（schedule）选择时间创建会议的功能，千挑万选最终找到 “react-big-calendar” 组件

快速入门

import React, { Component } from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
import 'moment/locale/zh-cn';
// 将日历选择为国际化
moment.locale('zh-cn');
const localizer = momentLocalizer(moment);


class SchedulePage extends Component {

  constructor(...args) {
    super(...args)

    this.state = {
      events: [
        {
          start: moment().toDate(),
          end: moment()
            .add(1, "days")
            .toDate(),
          title: "Some title"
        }
      ]
    };  
  }
  handleSelect = ({ start, end }) => {
    const title = window.prompt('New Event name')
    console.log(start, end)
    debugger
    if (title)
      this.setState({
        events: [
          ...this.state.events,
          {
            start,
            end,
            title,
          },
        ],
      })
  }

  render() {
    return (
      <div className="App">
        <Calendar
          selectable
          onSelectSlot={this.handleSelect}
          localizer={localizer}
          defaultDate={new Date()}
          defaultView="month"
          events={this.state.events}
          style={{ height: "100vh" }}
        />
      </div>
    );
  }
}

export default SchedulePage;