CODEWITHSUNDEEP
javascriptreactjsfullcalendarreact-big-calendar
Rahul Gupta
Rahul Gupta

Reputation: 98

How to create Custom View in React-Big-Calender?

i am trying to create custom Agenda view, but i am getting error 'View.title is not a function'. I referred to documentation example and this github issue also (https://github.com/jquense/react-big-calendar/issues/1544#issuecomment-699951170), but still no success.
I came across this codeSandox where Year view was implemented (https://codesandbox.io/s/jjmky5047y), i tried to do the same but still having the same error. Please help
Link to my codeSandbox: https://codesandbox.io/s/react-big-calendar-custom-year-view-forked-ji8sc?file=/src/index.js

Upvotes: 1

Views: 3168

Answers (2)

Valarmathi Visu
Valarmathi Visu

Reputation: 1

 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>
        );
      };

Upvotes: 0

Steve -Cutter- Blades
Steve -Cutter- Blades

Reputation: 5432

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.

Upvotes: 2

Related Questions