Air Calendar Event List Same Time Visual Overlap

[gokrasiva]

In my app I need to be able to schedule multiple events at the same time sometimes. When I do the tiles overlap each on each other on the day and week view. The months view is good. Is the some CSS and a setting i am missing to make sure the day and week views don’t visually overlap at the same time? Thanks

-Bob

[mina.rotari]

Hi @gokrasiva ,

Thanks for reaching out!

To prevent events from visually overlapping in the day and week views, make sure to check the following setting:

1. Enable “Allow drag/resize overlap”:

In the Air Calendar plugin settings, you’ll see an option labeled Allow drag/resize overlap (as shown in your screenshot). By enabling this setting, you allow events to overlap when being dragged or resized.

If you don’t want overlapping events in the day and week views, you can disable this option to avoid any event overlap when dragging or resizing.

2. Custom CSS Styling:

You can also adjust the appearance of your calendar by adding some custom CSS. Here’s how you can adjust the event spacing and stacking:

• Add a custom HTML element in Bubble.
• Insert the following CSS to control the appearance of events and prevent overlapping:

<style>
.fc-dayGridEvent {
    margin-bottom: 10px; /* Adds space between events */
    z-index: 1; /* Controls layering of events */
}
</style>

Place this code in the HTML element with a style tag to apply the CSS.

Summary:

• Disable the “Allow drag/resize overlap” option if you don’t want events to overlap.
• Use custom CSS to further control event spacing and layering.

Let me know if you need further assistance or have additional questions!

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble