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 :)