[Calendar] What's the exact type of selectedDates in the Calendar component

[SunnyWind]

In the storybook, it says the type of selectedDates property is unknown[], which is very unclear.

On the other side, my editor tells me the type of the selectedDates is number[].

If I set the selectedDates to [Date.now()/1000], I'll get an error:

What kind of data should I pass to the Calendar component if I want to specify an initial date?

[MarcusNotheis]

Hi @SunnyWind,

I'm not sure what the correct prop type is to be honest - I've created an issue (#1677) to clarify.

Best regards,
MArcus

[MarcusNotheis]

Hey @SunnyWind

I'm just copy-pasting Vladi's answer from the Web Components Team.
Looks like you have to attach a ref to the Calender and set the current date via Javascript in a useEffect or componentDidMount/Update. Could you please explain what your use case of the Calendar is?

Best regards,
Marcus

Indeed, ui5-calendar is intended to be a lower-level component, mainly used by other components. Therefore its API is not as user-friendly.

UI5 Web Components metadata entities of type Object or of multiple: true (hence Array) cannot be passed via attributes, but only via HTML properties. You can't bind them declaratively via React, only with JS.

myCalendar.selectedDates = [1588464000];

is what would work.

But if you have a strong case, we can redo the calendar to have calendar date items or something of that sort that you can pass as children.

Regards,
Vladi

Originally posted by @vladitasev in #1677 (comment)

[SunnyWind]

Thanks for your answer, which can solve my problem.

I want to replace the current calendar plugin (which is a YUI plugin) on our website with ui5-webcomponent calendar.

Just replacing the calendar widget will be easier compared with using the DatePicker (Less modifications to HTML construct).

[MarcusNotheis]

I think this is a valid use case to be honest - @vladitasev does this justify a rework of the Calender to have a more declarative API?

[MarcusNotheis]

As this issue is focusing on a UI5 Web Component, I'll forward this issue to the respective repository.

[vladitasev]

Hi @SunnyWind @MarcusNotheis

Yes, I think it makes sense to promote the Calendar as a real standalone component. We'll estimate what kind of effort will be required and we'll update you here.

Regards

[vladitasev]

The goal of the story is to make the calendar usable standalone. This would require all APIs to be re-evaluated and changed where necessary, it should have all necessary events, proper docs.

[ilhan007]

Phase 1 - Make the ui5-calendar standalone and public component.

There is а private ui5-calendar web component that is internally used by the DatePicker, DateTimePicker and DateRangePicker. The task is to make it public, to ensure it is completely usable standalone. But also to review the current API
and make it more user friendly if possible.

1. API to support

• Props
  minDate (already exists, public)
  maxDate (already exists, public)
  primaryCalendarType (already exists, public)
  selectedDates(already exists, public)
  hideWeekNumbers (already exists, public)
  selection: {
  type: CalendarSelection // enum of ["Single" (default), "Multiple" and "Range"]
  } (new, should be public)

• Events
  selected-dates-change (already exists, public)

Note: timestamp and formatPattern should be private.

2. We would like to have single range selection.

Currently if you set the following:

calComponent.selectedDates = [1600041600, 1600128000, 1600214400, 1600300800, 1600387200, 1600473600, 1600560000, 1600646400, 1600732800, 1600819200, 1600905600]

You will get:

But, it is not possible to get it via user interaction. We have DateRangePicker, so some of the logic should be extracted from the DateRangePicker and implemented on Calendar level and then DateRangePicker would rely on the Calendar for this. If both components should communicate in this regards, it should be done via events.

3. Upon TAB the focus should move to the "selected day" or "today".
Currently the button, that opens the Month Picker is the 1st element to get the focus. But as far as I researched, the order should be: the "selected day/today", Month Picker button and Year Picker button.

4. The components (DatePicker, DateTimePicker and DateRangePicker) using the Calendar should adopt the API changes (if any)

5. The component has a test page (Calendar.html) that need to be improved:

• Bind for the selected-dates-change event,
  display the result in an for example
• Showcase the minDate, maxDate and hideWeekNumbers properties.
• Showcase the Single, Multiple and Range selection modes.

6. The component has a test spec (Calendar.spec.js) that might has to be adjusted.

7. Properly document - add overview section, import info, etc (refer to the existing components and the openui5 equivalent for the text), remove all @ since tags and provide just one for the entire class @ since 1.0.0-rc.10

8. Playground sample - create Calendar.sample.html with few examples that showcase the component

[ilhan007]

Hello @SunnyWind

we introduced the Calendar as standalone component (ui5-calendar). The component is merged into the master, not yet released. This was the first step to achieve the goal. Now, we created a separate issue "Calendar: Declarative way of setting the selected days" that we will full-fill your request completely. You can track the progress here: #2528

BR,
ilhan

[ilhan007]

Hello @SunnyWind

we introduced the Calendar as standalone component (ui5-calendar). The component is merged into the master #2424, it is not yet released. This was the first step to achieve the goal. Now, we created a separate issue "Calendar: Declarative way of setting the selected days" that we will full-fill your request completely. You can track the progress here: #2528

BR,
ilhan

[SunnyWind]

Hi @ilhan007

Fantastic 👍

I use ui5-webcomponent-react instead of the base lib. I'll try it if the new feature is applied in that library.

BRs,
Ryan