Calendar doesn't switch view when pivoting on handset device

[claudiobosticco]

SmartClient Version: v13.0p_2024-02-23/AllModules Development Only (built 2024-02-23)
Safari on iOS 16.7.5 (iPhone 8)
Safari on iOS 17 (Simulator - iPhone 15Pro)

Hello, I need to develop a view with a Calendar to be used on mobile devices. So I'm trying the calendarMobileSample, but I don't see it switching view when I pivot it on a handset-sized device.





I'm pretty sure that it was working in the past.

[Isomorphic]

hi Claudio,

Thanks for the report - we've restored page-orientation behavior in Calendars for builds dated February 29 and later.

[claudiobosticco]

SmartClient Version: v13.0p_2024-02-29/AllModules Development Only (built 2024-02-29)

Hello, now I see it's working, thank you very much.

Another small glitch. The eventDialog is correctly maximized in the "quick" mode, but not when in "detail" mode:

[Isomorphic]

We've made a few changes here - the eventEditor should now fill the view as expected on handsets, and both the eventDialog and eventEditor Windows are now children of the Calendar, which fixes an issue where showing the eventEditor and then changing example tabs in the Showcase would not hide the eventEditor.

Please retest with a build dated March 12 or later.

[claudiobosticco]

SmartClient Version: v13.0p_2024-03-13/AllModules Development Only (built 2024-03-13)

Hello, I can confirm these fixes:

We've made a few changes here - the eventEditor should now fill the view as expected on handsets

but I'm not sure about this:

and both the eventDialog and eventEditor Windows are now children of the Calendar, which fixes an issue where showing the eventEditor and then changing example tabs in the Showcase would not hide the eventEditor.

did you mean changing between tabs day, week, month? Or "view"/"js code"/etc ? In both cases, I don't see the eventEditor hiding.

Also I've found another issue: after loading the sample, on the day view the eventEditor won't show up when touching a cell (neither when clicking on desktop), you have to change day, and then it will work.

[Isomorphic]

hi Claudio,

We meant that if you showed the detailed eventEditor in the simpleCalendar sample and then clicked the "simpleCalendar.js" tab, the eventEditor would not hide and the code window was obscured behind it. That should no longer happen.

On your second point, that's just because you're looking at a Sunday and disableWeekends is set to true - if you set it to false, you won't see this behavior.

[claudiobosticco]

hi Claudio,

We meant that if you showed the detailed eventEditor in the simpleCalendar sample and then clicked the "simpleCalendar.js" tab, the eventEditor would not hide and the code window was obscured behind it. That should no longer happen.

now i see it, much better, thank you very much

On your second point, that's just because you're looking at a Sunday and disableWeekends is set to true - if you set it to false, you won't see this behavior.

Thanks for the heads up, I didn't thought of disableWeekends, and in light skins the calendarDisabled style is similar to the calendar style.

A small glitch for the date chooser font icon in the Shiva skin, the font-size seems too big:

[Blama]

Hi claudiobosticco,

A small glitch for the date chooser font icon in the Shiva skin, the font-size seems too big:

Exactly my words :)

Best regards
Blama

[Isomorphic]

Thanks guys - for a number of reasons, we're actually going to be switching Shiva to use SVG versions of the skin media and that will address several issues like this with font-icons. We'll update here when that change happens.

[Blama]

Hi Isomorphic,

that's great - SVG everything! So impressed with the seamlessness of the two new SVG samples.

Best regards
Blama

[claudiobosticco]

SVG also for radio group!

[Blama]

And the checkboxes as well. Looking very smooth!

[Isomorphic]

As of tomorrow's builds, the Checkboxes will be filled green, with a white checkmark (rather than white with a green checkmark) - but we're making it easy to switch between such template SVG-sets.

Note that the icons in these two item-types now also have Error states - you can see them by setting showValueIconError to true on the CheckboxItem, and in the RadioGroupItem's checkboxItemProperties block. For example, replace the following two lines in the id=variousControls Showcase sample, and then run form1.getItem("checkbox" or "radioGroup").setErrors(["An error"]).

{name: "checkbox", title: "Checkbox", type: "checkbox", height: 25, showValueIconError: true},
{name: "radioGroup",title: "Radio Group", type: "radioGroup", checkboxItemProperties: { showValueIconError: true },

[claudiobosticco]

very nice!

[claudiobosticco]

even nicer :)