[OutSystems UI Mobile] Calendar - Initialize the calendar with a range

Forge Component
Published on 4 Feb by OutSystems R&D
49 votes
Published on 4 Feb by OutSystems R&D

Hello Guys,

I was developing an Mobile application where the user can submit his vacation period and I used a regular calendar with the select interval. After the user picks the dates I have them to the DB, everything is ok until now. 

My problem starts when I try to open the calendar again with the previous selected interval. At this moment I have now away to set the interval again.

  1. Advanced format setting startRange, EndRange, didn't work. 
  2. Tried to use the picker.setStartRange() picker.setEndRange(), couldn't get this to work.

So I don't have any further solutions without customizing the component, which I would like to avoid.

  1. I have some workarounds (hail the hammer) that would do the trick pick the DOM and set the classes manually
  2. Customize the calendar and enable these 2 parameter, as inputs.

Any advice, has someone had this need?

Thank you

Hey Davide!

Can you please upload the oml with a sample example of what is going on? :)

Hello Rita,

Sorry for the delay.

Attached a demo example, of course with the "missing" functionality. It has a screen with a list of vacation periods and the equivalent detail screen, which I am not able to correctly initialize with the interval previously saved.

Please let me know if i was clear?

Hey Davide,

Sorry for the delay, yes it was perfectly clear. After looking around the issue you are right and there is no way of doing this without modifying the pattern itself (by cloning it).

While I know you wanted to avoid cloning the pattern, it's the only way that I see this working. We're currently reworking the way that the advanced format works and I can tell you that once we make these changes that the solution that I have attached will still work once we have made the changes that we need.

Hopefully this will be ok and thanks for the feedback!

If you want to know what was changed here's a quick rundown:

We removed the eval from the Init JavaScript node on the OnReady of the Calendar. 

if(str.length > 0) {     var json = JSON.parse(str);       if(json.startRange || json.endRange) { // done to make sure that you create the date in a way that it can be read by the library. My server is with the YYYY-MM-DD date format, please make sure this works for what you have on yours         json.startRange = new Date(json.startRange);         json.endRange = new Date(json.endRange);     }     options = mergeJSON(options, json); }

By doing this we had to force the keys of the AdvancedFormat to be ". So like this:

    ""startRange"": """ +  NewDate(Year(GetLocalVacationById.List.Current.LocalVacation.StartDate), Month(GetLocalVacationById.List.Current.LocalVacation.StartDate), Day(GetLocalVacationById.List.Current.LocalVacation.StartDate)) + """,
    ""endRange"": """ +   NewDate(Year(GetLocalVacationById.List.Current.LocalVacation.EndDate), Month(GetLocalVacationById.List.Current.LocalVacation.EndDate), Day(GetLocalVacationById.List.Current.LocalVacation.EndDate)) + """

What this actually looks like in 'human':
"startRange": "whatever-date-youwanted",
"endRange": "whatever-other-dateyouwanted"