[Calendar] Custom calendar styling

Ask us anything How do I?
1

Hello everyone, i am currently trying to style my calendar component to achieve these set of items:

  1. For multi day events currently they show as single items on each day cell, i want to be able to get multi day events cross through the cells based on the number of days.

Desired view:

f287f9cc-4392-4c0d-bc8f-e750bcfe9652
f287f9cc-4392-4c0d-bc8f-e750bcfe96521481×783 92.5 KB

  1. On hover of an event item i want to show a customised tooltip that shows more information about that particular event that is being hovered on. There was no hover option for the event item

image
image912×1542 75 KB

Desired view:
image

  1. I am trying to add custom css to style the look and feel for my calendar component…but somehow it is not coming correctly compared to how i am styling it on the browser.

PS; This is how i styled it in my browser

image
image2558×1420 119 KB

This is the result when i added the custom css in weweb:

image
image2598×1430 200 KB

How can i achieve these items?

2

you’re using the built-in calendar element?

3

Yes i am

4

Just make your own custom calendar using divs to make it fully customizable.

5

Do you have any resource, ideas or workflow that can assist me i building a custom calendar?

Please