Add custom element to calendar

[valtism]

Hi there!

Firstly, just want to say that I am loving this library, it's clear how much care and effort have been put into creating a great API.

---

I want to be able to add a clear selection button to the bottom of the calendar, seen in this design as "None"

I saw the closed issue about this wojtekmaj/react-calendar#167 where you said you weren't going to implement this, but also said "there are easy enough ways to add this button on your own if you need to".

I understand how to clear the input via controlled props, but how would I go about attaching my custom div to the bottom of the calendar?

[wojtekmaj]

I'd use a wrapper (a flex box, perhaps?) that holds both React-Calendar and the bar with the button you want to add :)

[valtism]

I'm actually using react-date-picker (I should have posted this over there). That makes it tricky because the input lives in a td table cell, and the calendar pops out with absolute positioning. Both of the components, however, live inside a the single <DatePicker> component which means that if I add something to the bottom of a wrapper, the calendar no longer drops down.

What I wish I had is composable components, so that I could do something like:

<DatePicker>
  <div>
    <Calendar />
    <MyCloseButton />
  </div>
</DatePicker>

[wojtekmaj]

Oh shoot, yeah, that's an entirely different story. Let me move this ticket there.

I suppose we would need to add a method to render custom calendar or at least some things next to the calendar.

[fabianallendorf]

This would be a very interesting feature. I am facing a similar problems. I want to render presets, e.g. a button to "Last Month" or "Last Year" which automatically sets the desired dates. Is this feature still relevant?

[wojtekmaj]

Relevant? Yes. Coming soon? Unfortunately no way. Too busy as a new dad :)

[lowcozy]

do we have new update for this feature :(

[zapbampow]

I would also love this feature. I've had trouble getting local linking working with yarn to test out some ideas, but my guess is that something like adding new customCalendarHeader/customCalendarFooter props to be used in renderCalendar would work.

// in renderCalendar method
return portalContainer ? (
      createPortal(
        <div ref={this.calendarWrapper} className={classNames}>
          {customCalendarHeader}
          {calendar}
          {customCalendarFooter}
        </div>,
        portalContainer,
      )
    ) : (
      <Fit>
        <div
          ref={(ref) => {
            if (ref && !isOpen) {
              ref.removeAttribute('style');
            }
          }}
          className={classNames}
        >
          {customCalendarHeader}
          {calendar}
          {customCalendarFooter}
        </div>
      </Fit>
    );