[OutSystems UI] Assignment variable colors for different events in OustsystemsUI DatePicker
Question
Forge component by OutSystems R&D

Good afternoon,

Im am using the OutsystemsUI Date picker to create a calendar on a website. I have different Events with different time ranges. This is presented well on the component. However I would like to present each event with the specific color assigned from my database regarding Event Type. 

I have tried doing this with CSS Inline, however this seems not to be working. 

Is there a solution for this issue?

This is what I have now in the Inline CSS:

Underneath the part where the CSS can be found. 

The result using the Inline CSS is as follows: it assigns the right color (RED), however not the right item (The selected dates shoud obtain the assigned color)

Thank you for your help!

Solution

Hi @Mario Uva,


Unfortunately, after checking this further, our DatePicker doesn't support this use-case. The library itself doesn't support it yet.

However, I did find a branch on the library's git that had that implementation. The best I could do was making a DatePicker clone based on that solution. Please, be aware this wasn't totally tested with all use-cases validated, as in the official OutSystems UI pattern (also, by using this clone you will loose future updates on the OutSystems UI's DatePicker).

You can find the cloned DatePicker attached.

It uses a new Events structure that receives:

  • date
  • color
  • backgroundColor


This way, it should be pretty easy to implement your use-case.


Let me know if there's something more I can help!

Best regards,

Bernardo Cardoso

DatePickerWithEventColors.oml

Hi @Mario Uva,


If I understood the use-case correctly, it won't work the way you are trying to implement it. 

Besides some syntax errors between the class on the attribute and the way it's written on the CSS, I believe it would only affect the block wrapper element.


Here's my suggestion:

Add a new custom CSS class with that "MTC_EVENT_TYPE.BackgroundColour" data you have, like:

Then, on the CSS create a rule for each one (vacations used as example):


Let me know if you need further clarify! 

If you can't just pass the EventType and need the color hexadecimal to also come from the database, you could instead create CSS Variables on the OnReady, but it would be a bit more complex. If you have a oml, I can edit it for you.


Best regards,

Bernardo Cardoso


 

Hello @Bernardo Cardoso ,

Thank you for your answer, could you explain te CSS variables on the OnReady event. I have added my oml.

Eventcolor should be passed at runtime. 


Best regards,


Mario

Calendar.oml

Hi @Mario Uva,

Just to clarify. Your use-case is to have multiple types of events on the same DatePicker from the database, each one with a different color, correct?


Best regards

Hi @Bernardo Cardoso ,

Yes correct that is the Use Case

Solution

Hi @Mario Uva,


Unfortunately, after checking this further, our DatePicker doesn't support this use-case. The library itself doesn't support it yet.

However, I did find a branch on the library's git that had that implementation. The best I could do was making a DatePicker clone based on that solution. Please, be aware this wasn't totally tested with all use-cases validated, as in the official OutSystems UI pattern (also, by using this clone you will loose future updates on the OutSystems UI's DatePicker).

You can find the cloned DatePicker attached.

It uses a new Events structure that receives:

  • date
  • color
  • backgroundColor


This way, it should be pretty easy to implement your use-case.


Let me know if there's something more I can help!

Best regards,

Bernardo Cardoso

DatePickerWithEventColors.oml

Hi @Bernardo Cardoso ,

Thank you for your reply. Your solution fixes my issue!

Best regards,

Mario

Hi @Mario Uva,

Awesome, glad I could help!


Best regards,

Bernardo Cardoso

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.