fix(NcDateTimePicker): change styling to look more like the native picker

[GretaD]

☑️ Resolves

• Fix # enhanc: keep calendar always open nextcloud/calendar#6322

🖼️ Screenshots

🏚️ Before | 🏡 After
after

🚧 Tasks

• ...

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[nimishavijay]

Looks really good! Very big improvement when we compare it to the current design :)

• Is it possible to hide the first row in this case? The topmost week that is shown should be the week containing the 1st of the month (eg. we are on September but the last week of August is also shown)
• Is it possible to hide the double arrows which skip to the same month next year (« and ») since I imagine that functionality is not used very often. This would also provide more horizontal space for the month name :)
• As @susnux mentioned the size should be a variable (--clickable-area-small should work here)
• Nice-to-have: Show full month name

[GretaD]

Looks really good! Very big improvement when we compare it to the current design :)

• Is it possible to hide the first row in this case? The topmost week that is shown should be the week containing the 1st of the month (eg. we are on September but the last week of August is also shown)

Unfortunately, i cannot find a way, but i removed the background color, so it doesnt look too crowded.

The rest is done. I updated to screenshot

[susnux]

Looks nice, but it is no longer possible to select a year that is more in the past / future as the buttons are removed:

before	now

Also when selecting the month the year should be centered like before:

before	now

[GretaD]

Looks nice, but it is no longer possible to select a year that is more in the past / future as the buttons are removed:

ahhh thanks for testing it, @nimishavijay i guess we need the buttons :D

[st3iny]

Please also have a look at #6125. I missed that you were also working on the date picker design 🙈

Ref nextcloud/calendar#6324

[GretaD]

Please also have a look at #6125. I missed that you were also working on the date picker design 🙈

Ref nextcloud/calendar#6324

we can merge them, no problem, the change is the same, with small difference, like the hover button state. Do you want to include mine at yours, or should i add yours here?

[ShGKme]

/backport to next