Grommet: Grommet Calendar showing two months

[mhatreD]

Hi,

My requirement is to show two months in calendar with next previous button.

Below is the screenshot:

The code:

<Calendar
          animate={false}
          showAdjacentDays={false}
          range={false}
          date={this.state.date}
          onSelect={this.onSelect}
          reference={this.state.firstReference.toISOString()}
          onReference={reference => {
            const referenceDate = new Date(reference);
            const nextDate = addMonths(new Date(referenceDate), 1);
            this.state.setFirstReference(referenceDate);
            this.state.setSecondReference(nextDate);
          }}
          header={({
            date: currentDate,
            locale,
            onPreviousMonth,
            previousInBound,
          }) => (
            <Box direction="row" align="center" justify="between">
              <Button
                disabled={!previousInBound}
                icon={<Previous />}
                onClick={onPreviousMonth}
              />
              <Heading level={3} margin="none">
                {currentDate.toLocaleDateString(locale, {
                  month: 'long',
                  year: 'numeric',
                })}
              </Heading>
              <Blank />
            </Box>
          )}
        />
        <Calendar
          animate={false}
          showAdjacentDays={false}
          range={false}
          date={this.state.date}
          onSelect={this.onSelect}
          reference={this.state.secondReference.toISOString()}
          onReference={reference => {
            const referenceDate = new Date(reference);
            const previousDate = subMonths(new Date(referenceDate), 1);
            this.state.setFirstReference(previousDate);
            this.state.setSecondReference(referenceDate);
          }}
          header={({ date: currentDate, locale, onNextMonth, nextInBound }) => (
            <Box direction="row" align="center" justify="between">
              <Blank />
              <Heading level={3} margin="none">
                {currentDate.toLocaleDateString(locale, {
                  month: 'long',
                  year: 'numeric',
                })}
              </Heading>
              <Button
                disabled={!nextInBound}
                icon={<Next />}
                onClick={onNextMonth}
              />
            </Box>
          )}
        />

The issue that next & previous is not working.

[ShimiSun]

Have you tried to look at the Calender Dual storybook example, next/prev works well https://storybook.grommet.io/?path=/story/calendar--dual

[mhatreD]

Hi Shimi,

Thanks for the URL, that helped me.