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...



Mirzarashid Abbasov


Hi Mirzarashid,

Here you have the official documentation about the 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:

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:

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:

Hope this can help.


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


Hi Mirzarashid,

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

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

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:

It can change event background styling:

Fullcalender2 forge component is based on so there you can see full functions available.



Eduardo, Daniel

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


Mirzarashid Abbasov