Hello! I'm trying to create a calendar, but i'm having some problems. i couldn't find in the documentation 
1) I want to create a calendar with each "event" having a different color and with a size/alignment of the text diff from default. Is that possible to change color, size, alignment?
2) Also when i click in an event, the "container" is not full sized, i have to scroll horizontally, is that possible to have a bigger "container"?
To add custom styling to Retool components, you can add something like this to any text component
<style> ._retool-calendar1 .full-calendar--edit-event-popover { width: 200px !important; } ._retool-calendar1 h2 { font-size: 40px; } </style>
(You might want to have an empty styling component for this purpose)
- Find the css class / html tag of what you want to change (with your browser’s inspector
- Create an empty text component and write your custom styles
2.5 In your css, use the name of the component you want to change like ._retool-calendar1 or if you renamed the component to something like eventCalendar you can do ._retool-eventCalendar
If the html already has a style for what you’re trying to change, you’ll have to use !important like in the example above.
also @henrique-arakaki, if you want to set event-specific styles (i.e. different color for each event), you can use the properties listed here in Fullcalendar’s docs
i’m guessing you’ll want to use backgroundColor, and maybe className for advanced changes. here’s a screenshot of me doing some simple color changes:
1 Like
thank you!!!