标签: react-big-calendar

我正在尝试逐月更改视图，但同时它给了我一个错误。我是反应和反应大日历的新手，有人可以帮助我如何解决这个问题。当我将日历视图更改为月时，它工作正常，但是当我将其更改为周或日时，它给了我一个错误。请帮助我谢谢

代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import MyCalendar from 'react-big-calendar';
import CustomToolbar from './toolbar';
import Popup from 'react-popup';
import Input from './input';
import moment from 'moment';
import { fetchEvents, createEvent, updateEvent, deleteEvent } from '../actions';


// Setup the localizer by providing the moment (or globalize) Object to the correct localizer.
const localizer = MyCalendar.momentLocalizer(moment); // or globalizeLocalizer

class Calendar extends Component {

    componentDidMount() {
        this.props.fetchEvents(); …

文档提到能够创建自定义组件:http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components

我尝试过:

<BigCalendar
  events={this.state.bookings}
  step={60}
  timeslots={1}
  defaultView='week'
  defaultDate={new Date()}
  min={new Date(this.state.today.getFullYear(), this.state.today.getMonth(), this.state.today.getDate(), 8)}
  components={{
    event: <EventComponent />
  }}
/>

在哪里EventComponent:

class EventComponent extends React.Component {
  render() {
    return <h1>here we go!</h1>
  }
}

但我得到的错误是:

Warning: Failed prop type: Invalid prop `components.event` of type ReactElement supplied to `Calendar`, expected an element type (a string or a ReactClass).
    in Calendar (created by Uncontrolled(Calendar))
    in Uncontrolled(Calendar) (at calendar.jsx:50)
    in div (at calendar.jsx:48)
    in Calendar (created by RouterContext) …

使用react-big-calendar.js和moment.js

setLocalizer代码

moment.locale('ko');
BigCalendar.setLocalizer(
  BigCalendar.momentLocalizer(moment)
);

一周的第一天总是星期天

我希望从星期一开始看.

相关网址.

https://github.com/intljusticemission/react-big-calendar/issues/28

但没有例子.

我该怎么办？

找到答案

moment.locale('ko',{
  week:{
    dow : 1
  }
});

http://momentjs.com/docs/#/i18n/changing-locale/

我试图在月视图的标题上获取全天名称，但无法这样做。

我很确定它在本地化功能中，但在网上找不到解决方案。到目前为止，这是我的代码：

import { Calendar, momentLocalizer } from "react-big-calendar";
import Toolbar from "react-big-calendar/lib/Toolbar";
import "react-big-calendar/lib/css/react-big-calendar.css";

moment.locale("en-gb", {
   week: {
    format: "dddd"
  }
});
const localizer = momentLocalizer(moment);

<Calendar
   localizer={localizer}
   components={{ toolbar: CalendarToolbar }}
   events={eventsList}
   eventPropGetter={this.eventStyleGetter}
   startAccessor="start"
   endAccessor="end"
/>

我在上面没有收到错误消息，但它不起作用。任何帮助，将不胜感激。

因此，如图所示，我想对单个事件进行样式设置。

外观示例

使用slotpropgetter可以有条件地渲染样式。

slotPropGetter = date => {
    const CURRENT_DATE = moment().toDate();
    let backgroundColor;

    if (moment(date).isBefore(CURRENT_DATE, "month")) {
        backgroundColor = "#f7f8f9";
    }

    var style = {
        backgroundColor
    };
    return {
        style: style
    };
};

因此，“解决方案”是DateCellWrapper，它要么对我不起作用，要么我以错误的方式实现了它

const DateCellWrapper = ({ value, children }) => {
    console.log("DateCellWrapper")
    const style = {
        backgroundColor: "#000",
    };

    return (
        <div style={style}>{children}</div>
    );
}

它甚至不输出我的console.log，所以..有人知道吗？：p

I am having a hard time using a custom toolbar with react-big-calendar and typescript. I am trying to access the original methods of 'next, prev' 'month, day, week' views. I have extensively read... https://github.com/intljusticemission/react-big-calendar/issues/623 https://github.com/intljusticemission/react-big-calendar/issues/818 http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components

The custom UI is rendering fine, without errors, Now I need access to the original methods so I can manipulate the calendar.

The main problem is that my button is firing, but not actually navigating anything.

Some Issues that I think is...

-- I'm …

我正在为我的非营利组织开发一个基于大日历的应用程序。我需要使用拖放功能。我可以将事件从插槽拖动到另一个位置，但事件不会留在原处并返回到之前的位置。\n所有其他功能都工作正常：创建和编辑事件。\n这里是代码

import React, { useState, useEffect } from 'react';\nimport { Calendar, momentLocalizer } from 'react-big-calendar';\nimport withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';\nimport moment from 'moment';\nimport 'moment/locale/fr';\nimport Modal from 'react-bootstrap/Modal';\nimport CalendarForm from './CalendarForm';\nimport { observer } from 'mobx-react';\nimport { getCalendar } from './requests';\n\nconst localizer = momentLocalizer(moment);\nconst DnDCalendar = withDragAndDrop(Calendar);\nconst HomePage = ({ calendarStore }) => {\n  const [showAddModal, setShowAddModal] = useState(false);\n  const [showEditModal, setShowEditModal] = useState(false);\n  const [calendarEvent, setCalendarEvent] = useState({});\n  const [initialized, setInitialized] = useState(false);\n  let today = new Date();\n  const hideModals = …

我只是通过BigCalendar拖放例如去这里。我试图自己创建一个本地拖放示例，以了解拖放如何与BigCalendar一起使用。我创建了以下内容：

Dnd.js

import React from 'react'
import events from './events'
import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContext } from 'react-dnd'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import 'react-big-calendar/lib/css/react-big-calendar.css';

import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';

const DragAndDropCalendar = withDragAndDrop(BigCalendar)

class Dnd extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      events: events,
    }

    this.moveEvent = this.moveEvent.bind(this)
  }

  moveEvent({ event, start, end }) {
    const { events } = this.state

    const idx = events.indexOf(event)
    const updatedEvent = { ...event, start, end } …

我正在使用 React Big Calendar 和自定义事件组件。

在我的自定义组件中，我需要显示一些用户可以单击的按钮（通过弹出窗口）。我让弹出窗口工作正常，但我也希望渲染 BigCalendar 的类在单击弹出窗口中的按钮时收到通知。我们如何将“onButtonClick”事件作为道具传递给我的自定义组件？这是我的代码的简化版本

class Parent extends Component {

    popoverButtonClickHandler = (e) => {
        //handle button click
    }

    render() {
        return (
            <BigCalendar
                ...
                events={myEvents}
                components={{
                    event: CustomEvent
                }}
            />
        );
    }
}

这是我的 CustomEvent 类

class CustomEvent extends Component {
    render() {
        return (
            <div>
                <p>My event title: {this.props.title}</p>
                <MyPopover>
                    <Button onClick={this.props.onPopoverButtonClick}>
                </MyPopover>
            </div>
        )
    }
}

我正在想办法怎样才能通过

onPopoverButtonClick={this.popoverButtonClickHandler}

到我的 CustomEvent，以便在单击按钮时通知家长。

我有什么想法可以实现这一目标吗？谢谢

我有一个简单的系统，在节点创建表单上，允许用户选择开始和结束日期以及小时和分钟：

问题是日期在中间的某个地方被搞乱了，或者我不知道如何转换它。

在数据库中，保存两个值，如下所示：

start: "2019-08-01T14:00:00.000Z"
end: "2019-08-01T16:00:00.000Z"

似乎是正确的，因为在日期选择器中我选择了下午 2 点和下午 4 点。然后，使用momentjs和react-big-calendar，我尝试将该事件放入日历中。好像每次都会+3小时。我想，这是因为它以 UTC 格式保存，而我住在东欧，距 UTC 时间+3 小时。

奇怪的是，当我向数据库发出请求时，我已经将时间转换为我自己的时间：

Thu Aug 01 2019 17:00:00 GMT+0300 (Eastern European Summer Time)

有人可以帮我吗？我希望在保存时返回并显示相同的时间，这意味着如果我选择下午 2 点，则应该是下午 2 点。我认为这里的解决方案是忽略时区，并始终以 UTC 显示所有内容？但如何做到这一点呢？momentjs如果有帮助的话我可以访问。我尝试过这样的事情：

moment.utc(event.start);

但它仍然返回相同的值，即：

Thu Aug 01 2019 17:00:00 GMT+0300 (Eastern European Summer Time)