javascript - 访问导航方法 React-Big-Calendar 和 Typescript

Question

我很难使用带有 react-big-calendar 和 typescript 的自定义工具栏。我正在尝试访问“下一个、上一个”“月、日、周” View 的原始方法。我已经广泛阅读... 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

自定义 UI 呈现良好，没有错误，现在我需要访问原始方法以便我可以操作日历。

主要问题是我的按钮正在触发，但实际上并没有导航任何东西。

我认为的一些问题是...

-- 我实际上并没有像我想的那样使用 navigateMethod

--BigCalendar 中的默认日期和日期实际上并没有改变，因为我每次点击都会用同一天覆盖它？

-- 我需要从他们的文档中实现这个示例吗？

Custom views can be any React component, that implements the following interface:

interface View {
  static title(date: Date, { formats: DateFormat[], culture: string?, ...props }): string
  static navigate(date: Date, action: 'PREV' | 'NEXT' | 'DATE'): Date
}

谁有我可以看的例子？？？

这是我的完整源代码。

import React from 'react'
import { MainContent } from '../../../common/templates/partials'
import BigCalendar from 'react-big-calendar'
import ToolBar from 'react-big-calendar'
import Icon from 'app/common/components/Icon'
import moment from 'moment'
const styles = require('./CalendarUI.scss')

BigCalendar.momentLocalizer(moment) // or globalizeLocalizer

const events = [
  {
    start: new Date(),
    end: new Date(),
    title: 'Some title',
  },
]

class CustomToolbar extends ToolBar {

  render() {
    // tslint:disable-next-line:no-console
    console.log(this.props, this)
    /* tslint:disable-next-line */
    const {label, onNavigate} = this.props as any
    return (
      <div className="rbc-toolbar">
        <div>
          {/* tslint:disable-next-line  */}
          <button onClick={() => this.props.onNavigate ? onNavigate(null as any, 'PREV') : undefined}>
            <Icon icon="B" />
          </button>
          <label className="label-date">{label}</label>
          {/* tslint:disable-next-line  */}
          <button onClick={() => this.props.onNavigate ? onNavigate(null, 'NEXT') : undefined}>
            <Icon icon="A" />
          </button>
        </div>

        <div>
        <span className="rbc-btn-group">
          <button>Month</button>
          <button>Day</button>
          <button>Week</button>
        </span>

        <button className="btn btn-back">
          <Icon icon="R" />
        </button>
        <button className="btn btn-back">
          <Icon icon="meet_now" />
        </button>
        </div>
      </div>
    )
  }
}

const logger = (data: string) =>
  // tslint:disable-next-line:no-console
  console.log(data)
const CalendarUI = () => (
  <MainContent>
    <div className={styles.calendarContainer}>
      <BigCalendar
        defaultDate={moment().toDate()}
        defaultView="month"
        events={events}
        components={{ toolbar: CustomToolbar }}
        startAccessor="startDate"
        endAccessor="endDate"
        onView={logger}
        date={moment().toDate()}
      />
    </div>
  </MainContent>
)

export default CalendarUI

Answer 1

我想出了创建 CustomToolbar 组件的方法。查看以下代码:

import * as React from 'react';
import { css } from 'office-ui-fabric-react';

export interface ICustomTooolbarProps {
    view: string;
    views: string[];
    label: any;
    localizer: any;
    onNavigate: (action: any) => void;
    onView: (view: any) => void;
    onViewChange: (view: any) => void;
    messages: any;
}

export const navigateContants = {
    PREVIOUS: 'PREV',
    NEXT: 'NEXT',
    TODAY: 'TODAY',
    DATE: 'DATE'
};

export const views = {
    MONTH: 'month',
    WEEK: 'week',
    WORK_WEEK: 'work_week',
    DAY: 'day',
    AGENDA: 'agenda'
};

const CustomToolbar: React.SFC<ICustomTooolbarProps> = (props) => {
    function navigate(action) {
        props.onNavigate(action);
    }

    function viewItem(view) {
        props.onViewChange(view);
    }

    function viewNamesGroup(messages) {
        const viewNames = props.views;
        const view = props.view;

        if (viewNames.length > 1) {
            return viewNames.map((name) => (
                <button
                    type="button"
                    key={name}
                    className={css({ 'rbc-active': view === name })}
                    onClick={viewItem.bind(null, name)}>
                    {messages[name]}
                </button>
            ));
        }
    }

    return (
        <div className="rbc-toolbar">
            <span className="rbc-btn-group">
                <button type="button" onClick={navigate.bind(null, navigateContants.TODAY)}>
                    Current month
                </button>
                <button type="button" onClick={navigate.bind(null, navigateContants.PREVIOUS)}>
                    Previous month
                </button>
                <button type="button" onClick={navigate.bind(null, navigateContants.NEXT)}>
                    Next month
                </button>
            </span>

            <span className="rbc-toolbar-label">{props.label}</span>

            <span className="rbc-btn-group">{viewNamesGroup(props.messages)}</span>
        </div>
    );
};

export default CustomToolbar;

下面是使用这个组件的 BigCalendar 的代码

<BigCalendar
    popup
    onNavigate={(focusDate, flipUnit, prevOrNext) => this.updateCalendarData(focusDate, prevOrNext)}
    onSelectEvent={(data) => this.showModalInfo(data)}
    events={this.state.data}
    views={['month', 'week', 'agenda']}
    components={{ toolbar: CustomToolbar }} // <- Custom toolbar
/>

希望对您有所帮助;)