How to change to week and days according to current views

Question

I am customizing react big calendar toolbar, and it's working fine for switching month, but the issue is i am unable to switch week and days according to the current views. In every views next , prev button change the month. This is custom toolbar for navigating

const CustomToolbar = (toolbar, open, setOpen) => {
  const goToBack = () => {
    toolbar.date.setMonth(toolbar.date.getMonth() - 1);
    toolbar.onNavigate("prev");
  };
  const goToNext = () => {
    toolbar.onNavigate("next");
    toolbar.date.setDays(toolbar.date.getDay() + 1);
    //i want to change the dates state according to current view 
   
  };
  const goToWeekView = () => {
    toolbar.onView("week");
  };
  const goToMonthView = () => {
    toolbar.onView("month");
  };
  const goToDayView = () => {
    toolbar.onView("day");
  };
  const goToAgendaView = () => {
    toolbar.onView("agenda");
  };
  return (
    <Stack>
      <Box className="back-next-buttons">
        <Stack direction="row" alignItems="center">
          <IconButton onClick={goToBack} className="btn-back">
            <ArrowBackIosIcon />
          </IconButton>
          <Typography
            onClick={goToCurrent}          >
            Today
          </Typography>

          <IconButton onClick={goToNext} className="btn-back">
            <ArrowForwardIosIcon/>
          </IconButton>
        </Stack>
      </Box>
      {/* date label */}
      <Typography>
        {label()}
      </Typography>
      {/* view buttons */}
      <Stack direction="row" flexWrap="wrap" alignItems="center">
        <SmallButton
          onClick={goToWeekView}
          label="Week"/>
        <SmallButton
          onClick={goToMonthView}
          label="Month"/>
        <SmallButton
          onClick={goToDayView}
          label="Day"/>
        <SmallButton
          onClick={goToAgendaView}
          label="All Events"/>
      </Stack>
    </Stack>
  );
};

I don't understand what you mean by "to switch week and days according to the current views". Please further brief me on what you are accomplishing. — Adam Turaj, Sep 19 '22 at 12:23
@AdamTuraj i mean when i was in week view , and when i am navigating to next or previous, it is changing whole month instead of changing week. — Bijay Poudel, Sep 19 '22 at 12:34
From what I see in the code you posted, you will always be updating the month when going forward, and day when going back. Unless I am missing something — Adam Turaj, Sep 19 '22 at 12:45

score 1 · Accepted Answer · answered Sep 19 '22 at 12:36

When building custom components for Big Calendar it is helpful to look at the source code of the actual components, or of components used in the documentation. Looking at the source of the custom toolbar in the components prop, you'll see that the toolbar is passed the internal onNavigate method, and uses the exported {navigate} constants to help you navigate to the proper views.

The internal onNavigate method is not well documented (yet), but is very easy to work with.

const today = () => onNavigate(navigate.TODAY);
const next = () => onNavigate(navigate.NEXT);
const previous = () => onNavigate(navigate.PREVIOUS);
// must be JS Date, and only if controlling `date` prop
const toThisDay = (newDate) => onNavigate(navigate.DATE, newDate);

If you happen to be controlling view and date in the same method, then setting both simultaneously can be a challenge due to the internal logic of onView and state rerendering, and may require you to wait a tic between setting each variable.

const toThisDay = (newDate) => {
  onView('day');
  window.setTimeout(() => {
    onNavigate(navigate.DATE, newDate);
  }, 100);
};

How to change to week and days according to current views

1 Answers1