How I can customize DataPicker pattern?

Hi there,

Could you please clarify me how I can modify pattern of @DataPicker

For example, if the @Day has some @Events we need to change the background color and add badge with number of events and etc...

Thanks


Regards,

Mirzarashid Abbasov

Solution

Hi Mirzarashid,

Here you have the official documentation about the DatePicker:

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Controls/DatePicker

One of the properties is this one, where you can set up advanced formatting through the use of the AdvancedFormatJSON:

You can find the possibilities in the official documentation of the JavaScript component that is the base of it: 

https://github.com/Pikaday/Pikaday

There is also information that is originally for Mobile, but now in O11 and with the introduction of the events, being the same library, maybe can have something useful:

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Mobile_Patterns/DatePicker_Pattern

While it seems that there is no official way of doing this, you could use the events to pass the dates and use CSS to style. Here is some idea: https://stackoverflow.com/questions/31406727/pikaday-mark-or-highlight-certain-dates

Hope this can help.

Cheers.

P.S. So, I think you will have to apply some custom JavaScript / CSS to make what you want to work.

Solution

Hi Mirzarashid,

First of all OutSystems UI has good documentation on its widgets, for the date picker you can find it here:

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Controls/DatePicker

On the properties of the DatePicker you can add on the AdvancedFormat an EventsList and AdvancedFormatJSON. With the latter you can customize the widget beyond what OutSystems has implemented.

For the options that you can provide in the AdvancedFormatJSON you can look at 

https://github.com/Pikaday/Pikaday

I quickly read through the configuration options of Pickaday, but could not quickly identify any options for custom styling adding badges and background of selected days.

Maybe you should consider if the Calendar2 Forge component is more usable for your desired functionality:

https://www.outsystems.com/forge/component-overview/966/fullcalendar-2

It can change event background styling: https://www.outsystems.com/forums/discussion/48858/change-event-background-color/

Fullcalender2 forge component is based on https://fullcalendar.io/ so there you can see full functions available.


Regards,

Daniel




Eduardo, Daniel

Thanks for your support and answers. It's very clear.


Regads,

Mirzarashid Abbasov