DayPicker 8: outside days buttons enabled

[daniele-serfilippi]

Hi, is there a way to make outside (of the current month) days buttons enabled?

Thank you!

[gpbl]

There was is a enableOutsideDaysClick prop in v7 we can evaluate to add to v8 too. I have some accessibility / UX concerns tho. How do other calendars work with the "outside days"?

Glad to have a feedback you want it back!

[daniele-serfilippi]

Well I think if you add that prop in v8 too it would be great.
When you are selecting an entire week or a range is very useful to have the outside days selectable too.
In my project it's a very important feature and I had to create a CustomComponent 'OutsideSelectableDay' to have it working.

Thank you!

[gpbl]

@sermicromegas in the latest beta, the days out of the month are clickable when showOutsideDays is set.

However I remember your point about selecting weeks, and I tried to implement something
https://codesandbox.io/s/daypicker-start-example-forked-mecn4?file=/example.tsx

Still isn't elegant as it should be, I'm curious to know what is your use case.

[daniele-serfilippi]

@gpbl Thank you for your implementation.
I'm developing a production level application that allows job providers to provide workers to their clients.
Clients have to select the days they need the workers. It's very common that the days are among two months.
So it's good to be able to select outside days.

This is my implementation, also with the feature of range selection with shift key:
https://codesandbox.io/s/dark-smoke-ur5l4

[gpbl]

@sermicromegas thanks for the sandbox that was an inspiring use case!

I wanted to find out a way for implementing something similar – without all that boilerplate you had to write. Writing a range selection combined with the single selection is a not an easy requirement.

DayPicker is already able to handle range selections, with mode="range". It would be nice to reuse that part in your app and augment it with the shift key condition.

To do that, you have to access to some DayPicker internals. In the last beta version they have been extracted in the useDay hook.

With that hook it has been relatively easy then to implement a shift-only range selection:

https://codesandbox.io/s/qoisy?module=/example.tsx

import { Button, DayPicker, DayProps, useDay } from 'react-day-picker';
import 'react-day-picker/style.css';

/**
 * A custom `Day` component that will enable a range selection only when the
 * shift key is pressed.
 */
function Day(props: DayProps) {
  const buttonRef = React.useRef<HTMLButtonElement>(null);

  const { buttonProps, nonInteractiveProps, selected, modifiers } = useDay(
    props.date,
    props.displayMonth,
    buttonRef
  );

  if (!buttonProps && !nonInteractiveProps) return <></>;

  if (nonInteractiveProps) return <div {...nonInteractiveProps} />;

  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
    // implement here more logic for the shift key adding single selections
    if (!selected || modifiers.selected || e.shiftKey) {
      buttonProps.onClick(e);
    }
  };

  return <Button {...buttonProps} ref={buttonRef} onClick={handleClick} />;
}

export default function Example() {
  return <DayPicker components={{ Day }} mode="range" />;
}

[gpbl]

Some notes about your sandbox :)

• in your code you can skip the KeyboardThing, the shift key condition is already available in the click event: e.shiftKey
• do not use // @ts-ignore because you may have unexpected results. If something in the types is not working as expected please file an issue.
• try to focus the code on a single task per time, debugging all these custom components could give some headache...