score:0

custom 'views', in react-big-calendar, require two static methods, navigate, and title, as well as an optional third method for range.

the navigate method allow custom navigation applied to your view

agenda.navigate = (
  date,
  action,
  { length = agenda.defaultprops.length, localizer }
) => {
  switch (action) {
    case navigate.previous:
      return localizer.add(date, -length, 'day')

    case navigate.next:
      return localizer.add(date, length, 'day')

    default:
      return date
  }
}

and the title method is used to localize your view title.

agenda.title = (start, { length = agenda.defaultprops.length, localizer }) => {
  let end = localizer.add(start, length, 'day')
  return localizer.format({ start, end }, 'agendaheaderformat')
}

the range method returns the start and end dates of your view. this is required if you expect onrangechange to be called from your custom view during navigation.

agenda.range = (start, { length = agenda.defaultprops.length, localizer }) => {
  let end = localizer.add(start, length, 'day')
  return { start, end }
}

this pattern is outlined in the documentation for the 'views' prop.

score:0

 customtoolbar = (toolbar) => {
        const gotoback = () => {
          toolbar.onnavigate('prev');
        };
        const gotonext = () => {
          toolbar.onnavigate('next');
        };
        const gotocurrent = () => {
          toolbar.onnavigate('today');
        };
        const date = moment(toolbar.date);
        const year = date.format('yyyy');
        const label = toolbar.label.match(/\d/g).join('');
    
        return (
          <div classname="rbc-toolbar">
            <span classname="rbc-btn-group">
              <span classname="rbc-btn-group">
                <button type="button" onclick={gotocurrent}>
                  <span classname="next-icon">today</span>
                </button>
                <button type="button" onclick={gotoback}>
                  <span classname=" fa fa-chevron-left" />
                </button>
                <button type="button" onclick={gotonext}>
                  <span classname=" fa fa-chevron-right" />
                </button>
              </span>
            </span>
            <span classname="rbc-toolbar-label">
              {label} {year}
            </span>
            <span classname="rbc-btn-group" />
          </div>
        );
      };

Related Query

More Query from same tag