Calendars Rework

[bdlukaa]

The current implementation of both date and time pickers are old and have many issues.

• [x] They still use Acrylic as their base implementation, making it look like it's not native (https://github.com/bdlukaa/fluent_ui/pull/241)
• [x] They only saves last changed dialer (https://github.com/bdlukaa/fluent_ui/issues/161)
• [x] They do not make use of the FluentLocalizations (https://github.com/bdlukaa/fluent_ui/issues/213)
• [x] The popup isn't positioned correctly over the button when there is space. Instead, it's either above or below.

---

• [ ] Implement CalendarView
• [ ] Implement CalendarDatePicker, based on CalendarView

[henry2man]

Following DRY principles, can we ever consider use something curated like table_calendar as a base?

I have some experience with this one and this could simplify the ulterior development if we are able to render the calendar as expected in the spec.

@bdlukaa Do we have any specific policy about third party packages?

[bdlukaa]

As long as it's able to allow us to customizate it for our needs, I don't see any problem!

[henry2man]

@bdlukaa So, in order to make things clear prior to any development:

• Upstream references:
  • https://docs.microsoft.com/es-es/windows/apps/design/controls/calendar-view
  • https://docs.microsoft.com/es-es/windows/apps/design/controls/calendar-date-picker
• We want to create a new CalendarView, potentially based on table_calendar.
• For this very first implementation we're going to have a minimal API:
  • CalendarView
  • initialValue: Show a defined month & Focus into that day (or DateTime.now() if not set)
  • minDate & maxDate: two optional DateTime args that limits min & max date (they will be unbounded if unset)
  • mandatory onSelect callback: function to be called when a day is selected
  • weekStartDay: First day of week (normally Sunday or Monday, depending on localization), defaults to Sunday.
  • UI: Change month using "up" and "down" buttons
  • UI: Use current locale to show current month & weekday tiles and also for formatting.
  • CalendarDatePicker
  • Display a form field with initialValue date (or DateTime.now() if not set)
  • On click, display a flyout with a CalendarView inside
  • When a day is clicked, hide the flyout and execute mandatory onChange callback

[henry2man]

@bdlukaa Can we close this issue? What is missing?

[bdlukaa]

CalendarView:

[henry2man]

Related: https://github.com/bdlukaa/fluent_ui/issues/417