enhanc: keep calendar always open

[GretaD]

fixes #6321

• requires: fix(NcDateTimePicker): change styling to look more like the native picker nextcloud-libraries/nextcloud-vue#6095

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 16 lines in your changes missing coverage. Please review.

Project coverage is 23.33%. Comparing base (56ee073) to head (454e65d).
Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
src/views/Appointments/Booking.vue	0.00%	16 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #6322   +/-   ##
=========================================
  Coverage     23.33%   23.33%           
  Complexity      453      453           
=========================================
  Files           248      248           
  Lines         11777    11777           
  Branches       2257     2257           
=========================================
  Hits           2748     2748           
  Misses         8705     8705           
  Partials        324      324           

Flag	Coverage Δ
javascript	14.95% <0.00%> (ø)
php	59.29% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[nimishavijay]

Nice! :) Also see #6324 for how we can improve the design for this as it looks a bit outdated atm

[GretaD]

@nimishavijay please have another look at the screenshot. In the appointment case, we cannot use the native datetimepicker, because the native one doesnt allow for the dropdown to be always open, because that is browser defined behavior.

I tried to adopt the normal one, as much as i could, to your mockup in the other ticket.

[jancborchardt]

Looks quite good! :)

• One of the most important improvements UX-wise is: "disable dates for which no slots are available", is that possible to grey out the dates with no slots? added them to the general list, not to be delivered with this pr
• The time zone picker doesn’t need a full heading, or just "Time zone", not "Select a time zone"
• The "Select a date and time slot" would be good to split, or if the time slots are shifted a bit down so it fits with the layout in @nimishavijay’s mockup
• Regarding the third column: Currently the vertical gap seems rather large, it could be reduced a little bit
• There can be a larger gap for every hour as a little divider. In many cases like here, there would then be slots of 4 grouped together to get a better feeling for the time rather than a long list. added them to the general list, not to be delivered with this pr

[SebastianKrupinski]

Tested. Looks and works great

[st3iny]

Tested and works.

Looks a bit weird on dark mode though but I think that's a problem in the upstream date picker component.

[GVodyanov]

Yeah it's the same now even without this PR, I just discovered it, I will open an issue for it.

#6521

[SebastianKrupinski]

Yeah it's the same now even without this PR, I just discovered it, I will open an issue for it.

Yeah, I noticed that and thought it was a new feature!

[st3iny]

Yeah it's the same now even without this PR, I just discovered it, I will open an issue for it.

Yeah, I noticed that and thought it was a new feature!

Can't click the dates if you can't seem em 😆