如何在 React Big Calendar 中获取第一个和最后一个可见日期？

Question

如何在React Big Calendar中获取第一个和最后一个可见日期？这将有助于数据库查询以查看事件。我正在尝试调用 onNavigate () 函数并使用 moment 库获取 start 和 end，但这两个值都是 undefined.

更新

我得到开始的值。只有当我按下后退，下一个箭头时才结束。如何在日历出现时自动获取这些值？

class App extends Component {
  constructor() {
    super();
    this.state = {
      current_date: '',
      events: [{
          id: 0,
          title: 'All Day Event very long title',
          allDay: true,
          start: new Date(2019, 3, 0),
          end: new Date(2019, 3, 1),
        },
        {
          id: 1,
          title: 'Long Event',
          start: new Date(2019, 3, 7),
          end: new Date(2019, 3, 10),
        }
      ]
    };  
  }


onNavigate =(date, view) => {
  let start, end;

  if (view === 'month') {
    start = moment(date).startOf('month').startOf('week')
    console.log(start)
    end = moment(date).endOf('month').endOf('week')
  }
  console.log(start, end);

  return console.log({ start, end });
}

  render() {
    console.log(this.state.current_date)
    return (
      <div>
        <Calendar
           localizer={localizer}
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
            onNavigate={this.onNavigate()}
          />
        </div>
    );
  }
}

Answer 1

您因此得到 undefined：onNavigate={this.onNavigate()}

这将导致使用 ()（无参数）调用 this.onNavigate，并且 date 将是 undefined，因此，start 和 end 将是 undefined,

You're calling the function instead of passing it

你应该传递 this.onNavigate 或者像：

onNavigate={this.onNavigate}

或：

onNavigate={(date, view) => this.onNavigate(date, view)}

参见：navigate to a specific date

Answer 2

你在 React 组件中使用箭头函数时犯了一个常见错误。只需将 onNavigate={this.onNavigate()} 更改为 onNavigate={this.onNavigate} 即可解决您的问题。我会给你一个简单的例子来发现这里发生了什么。如果您只是想将函数传递给 onClick 处理程序，您可以定义函数并通过三种方式将其传递给 onClick：

1-定义一个箭头函数并传递给它：

class Example extends Component {

    clickHandler=()=>{
        console.log('I am clickHandler');

    }


    render() {

        return (
            <div onClick={this.clickHandler}>
                Example
            </div>
        );
    }
}

2-定义一个普通函数并传递给它：

class Example extends Component {

    clickHandler(){
        console.log('I am clickHandler');

    }


    render() {

        return (
            <div onClick={()=>this.clickHandler()}>
                Example
            </div>
        );
    }
}

3- 定义一个函数并绑定它（这是旧的，在 ES6 中不再常见）：

class Example extends Component {

    clickHandler(){
        console.log('I am clickHandler');

    }


    render() {

        return (
            <div onClick={this.clickHandler.bind(this)}>
                Example
            </div>
        );
    }
}

希望对您有所帮助。

Answer 3

由于您没有将任何 date 道具传递给日历，因此默认日期为当前日期。模拟来自 componentDidMount 的 onNavigate 调用，例如：

componentDidMount() {
    this.onNavigate(new Date(), "month");
}

顺便说一句，onNavigate 仅调用 back/next 导航。您还想处理 onView，因为从周视图更改为月视图会扩大显示的日期范围。

Answer 4

您可以使用此方法获取第一个和最后一个可见日期

组件：

    import dates from 'react-big-calendar/lib/utils/dates';
...
        onNavigate = (date, view, action) => {
            console.log(dates.firstVisibleDay(date), dates.lastVisibleDay(date));
        }
...

Answer 5

您可以在组件中使用它：

useEffect(() => {
    toolbar.onNavigate('TODAY');
}, []);

在日历中：

onNavigate={(event, view, action) => { 
    console.log(event, view, action}); 
    // Fri Jun 11 2021 03:06:06 GMT-0300 (Brasilia Standard Time)
    // week
    // TODAY
}}

Answer 6

我试图应用我在这里看到的答案，但最后，打开源文件并找到了一个简单的 onRangeChange 道具，returns 可见范围。

onRangeChange={range => {
    console.log(range)
}}

此外，请注意，对于月视图，它 returns 结构类似于 { start, end }，但对于周视图，您将收到一个数组 [0, ..., 6]一周中的所有日子。它不适用于日程视图。

我没有找到如何在初始化时得到这个范围，但我相信开始日期不少于月初的-7天，相应的结束日期是+7天，所以我的解决方案是：

 // I use dayjs, but you can use moment or anything else
 const start = dayjs().startOf('month').subtract(7, 'day')
 const end = dayjs().endOf('month').add(7, 'day')

如何在 React Big Calendar 中获取第一个和最后一个可见日期？

How to get the first and last visible date in React Big Calendar?

javascript

momentjs

reactjs

react-big-calendar

组件：