Inline datepicker calendar widget

[JohannesHansen]

New feature motivation

The current date picker calendar is only accessible through a dropdown from the date input field. It would be useful to be able to use the calendar widget inline. Also, greater control over how its rendered would allow preventing dropdown clipping in overflowing containers etc.

New feature description

Use the calendar widget as a stand alone component.

[anderssonjohan]

Hey @adrianschmidt @JohannesHansen, I made one, and when trying to find an issue about the bug with 1 pixel wide flatpickr I found this issue.

I made a component in a limepkg that uses the limel-flatpickr-adapter to make a datepicker that I could place in a popover.

Here's a capture from an example page in our limepkg using a button and a popover as the container for the picker:

https://user-images.githubusercontent.com/435885/112374516-806c2280-8ce2-11eb-98a9-cb35d568028b.mov

    renderDatePickerButton() {
        return (
            <limel-popover
                open={this.isDatePickerOpen}
                onClose={() => this.isDatePickerOpen = false}
            >
                {this.renderToolbarButton({
                    click: () =>
                        (this.isDatePickerOpen = !this.isDatePickerOpen),
                    iconRight: 'angle_down',
                    label: this.datePickerButtonLabel(),
                    slot: 'trigger',
                })}
                <lwc-limepkg-fullcalendar-date-picker
                    isOpen={this.isDatePickerOpen}
                    value={this.selectedDate}
                    onChanged={(ev: CustomEvent<Date>) => {
                        if (ev.detail !== this.selectedDate) {
                            this.selectedDateChanged?.emit(ev.detail);
                        }
                        this.isDatePickerOpen = false;
                     }}/>
            </limel-popover>
        );
    }

Without the popover it's simple as this:

public render() {
    return (
        <lwc-limepkg-fullcalendar-date-picker
            value={this.selectedDate}
            onChanged={(ev: CustomEvent<Date>) => {
                if (ev.detail !== this.selectedDate) {
                    this.selectedDateChanged?.emit(ev.detail);
                }
            }}
        />
    );
}

@adrianschmidt The fix in the flatpickr-adapter does not work for me so I made another fix that is ugly as hell. The thing is that some of the parts of the picker gets the inline style width: 1px, and I guess that is the bug you were mentioning when you wrote the comment in the flatpickr-adapter. The following fix executed from componentDidRender fixes that. When I tried to manually remove the style from the DOM using dev tools, the issue was fixed, so I'm just ensuring that those inline styles are removed.

            const adapter = this.element.shadowRoot.querySelector(
                'limel-flatpickr-adapter'
            );
            if (adapter) {
                ['.flatpickr-calendar', '.flatpickr-days'].forEach(selector => {
                    const elementWithStyleWidthOnePixel = adapter.shadowRoot.querySelector(
                        selector
                    );
                    if (
                        elementWithStyleWidthOnePixel.attributes.getNamedItem(
                            'style'
                        )
                    ) {
                        elementWithStyleWidthOnePixel.attributes.removeNamedItem(
                            'style'
                        );
                    }
                });
            }

Perhaps you also figured out the source of the issue but not the actual problem? I just found the source that sets the width, but I still have no clue why it fails to update it to a proper width (like it does when it works!).

https://github.com/flatpickr/flatpickr/blob/cf77c7ce8f635f0f2757b704d0a8554276e16fe3/src/index.ts#L147-L154

And btw, if it looks like this, the width = 1px is still set on the days container but not the calendar container.

Question 1: Should I post the inline picker to this repo? (<limel-inline-date-picker/> ?) Question 2: Do we have an issue somewhere on the 1px bug or should I open a new issue and move the discussion to that?