📅[New Plugin] Air Calendar (FullCalendar)

[ZeroqodeSupport]

Hello @LA81638,

Thank you for your message.

Regarding the Air Calendar, you can certainly use now the plugin version that works best for you. We will soon release an update that addresses the “Undefined” issue.

As for the second issue you’ve noticed, you are correct. Starting from version 3.83.0, the placeholder only takes the initial value it receives. In your case, because the Air Calendar loads a bit later, the Air date time picker’s placeholder ends up displaying a blank value. We have already forwarded this issue to our development team for further analysis and resolution. We will keep you updated on any progress.

Thank you once again, and we wish you a great day ahead.

---

---

---

Hello @isaac,

Thanks for reaching out to us.

It is totally achievable to do both things you mentioned, to change the color of a selected date and to adjust the Current days circles. To do that, just add an HTML element on your page—you can make it small, like 1x1, so it won’t disrupt your app. Then add this code in the HTML element:

<style>
.fc .fc-daygrid-day-frame:hover {
     background-color: red !important;
}

.fc .fc-highlight {
   background-color: green !important;
}

.fc-theme-standard td.fc-day-today a.fc-daygrid-day-number, .ac-today-number .fc-daygrid-day-number {
  width: 24px !important;
}
</style>  

In the code above, “.fc .fc-daygrid-day-frame:hover” allows you to change the background color of the selected day when you hover over it. With “.fc .fc-highlight”, you can change the background color of the selected day when you click on it. The last class helps set the current day’s circle to be a little wider so that the number will appear more centered. With these adjustments, you can change even more CSS styling for the element.

Can you please try this in your app and tell us about your results? If you have any other questions or clarifications, please let us know.

Thank you once again and we’re looking forward to your reply.

Best regards,
Zeroqode Support Team

[ZeroqodeSupport]

Hello @Humberto & @LA81638,

Hope this message finds you well.

We have some good news concerning the “undefined” issue you encountered with our plugin, Air Calendar. I am pleased to inform you that in the latest version, 2.89.0, our developers have successfully resolved the problem, ensuring it now functions seamlessly.

Could you please update the plugin in your app, test it, and let us know if everything is working as expected? Your feedback is invaluable to us.

Thank you once again for bringing this to our attention. We eagerly await your reply.

Best regards,
Zeroqode Support Team

[isaac4]

This is very helpful, thank you for the help!

[LA81638]

Will do

And thanks for the customer service recently, it’s been impeccable

[isaac4]

Sorry, one more thing. it looks like when I add the code you supplied, and increased the day bubble size from 24px to 25px, it increases the size of the whole week line the bubble is on.

I’m also wondering if it’s possible to position all of the days to have a bit more margin on the right and top sides so they aren’t so close to the edge.

[isaac4]

@ZeroqodeSupport

Is there a way to prevent the calendar from expanding the week when new events are added to it?

[ZeroqodeSupport]

Hello @LA81638 & @isaac4 ,

Thank you for your messages and valuable feedback.

Your insights are crucial to our continuous improvement and help us strive for excellence.

If you found our service beneficial, we would appreciate it if you could share your experience by rating our plugin under the Plugins tab in your Bubble editor. Additionally, consider leaving a review on Trustpilot: Zeroqode on Trustpilot. Your feedback not only supports our team but also helps the entire Bubble community.

Hey @isaac4, regarding your question about setting a static height for the day box, you can apply the following CSS in the HTML element:

.fc .fc-daygrid-day-frame {
    height: 130px !important;
}

Feel free to adjust the height as needed for your specific use case.

Regarding your other question about adding more margin to the right and top sides of the days to prevent them from being too close to the edge, you can adjust the padding of the group like this:

.fc .fc-daygrid-day-number {
    padding-right: 10px !important;
    padding-top: 10px !important;
}

Thank you once again, and please don’t hesitate to reach out with any other questions or suggestions regarding our products. We’re always eager to collaborate.

Best regards,
Zeroqode Support Team

[isaac4]

@ZeroqodeSupport

.fc .fc-daygrid-day-number {
    padding-right: 10px !important;
    padding-top: 10px !important;
}

Thank you! This worked beautifully for the cell sizing.

For the margin added to the individual dates, it looks like this is causing the Today bubble to stretch. Is there a way to segment this so it isn’t affected?

[isaac4]

I’m also running into an issue with the current day extended event dropdown. It looks like the black bubble is getting compressed here, is there any way to fix or remove the bubble altogether?

[ZeroqodeSupport]

Hello @isaac4,

Thank you for your message.

Indeed, altering CSS style attributes can sometimes inadvertently affect other properties, as demonstrated in your example.

However, if you wish to further customize the style attributes of your elements, you can easily do so by opening the browser console (Ctrl + Shift + J for Windows/Linux or Cmd + Option + J for macOS). From there, select the component you want to modify, such as your Calendar element. As shown in this image (link), you can experiment with different styles in the ‘Styles’ inspector before copying the class name into your HTML element, similar to your previous approach. For additional CSS styling tips, feel free to explore here (link) or any other online resources.

Hope for your understanding, wish you a wonderful day ahead!

Best regards,
Zeroqode Support Team

[teamprogresscomplete]

Hello!

1. Is it possible to mark an appointment as attended/missed?

There seems to be no way to do this if the event is recurring without editing every single recurring event.

Would be awesome if there was a boolean value added to be able to create an “exception entry” tied to the recurring events via an id, and then displayed accordingly

2. Is there a way to return/work with the calendar’s current view’s events? There is the list view but no state to interact with or isolate the list of events. Such as “AirCalendar A’s View’s Events.”

Again this is easy with single events by filtering their start and end dates with AirCalendar’s View’s Current Start/End date. But that does not work with recurring events.

[ZeroqodeSupport]

Hello @teamprogresscomplete,

Thank you for reaching out with your questions.

Regarding your first query, as we previously discussed, the structure of the recurring events does not support marking an appointment as attended or missed. While integrating a third-party plugin might be a potential solution, it’s important to note that this is not guaranteed to work and could lead to further instabilities. However, your desired outcome can be achieved using simple events combined with some logic in Bubble.

Regarding your second question, you can utilize the “Change View” event to trigger specific actions. Additionally, there are three actions: “Change view”, “Go to next/previous view”, and several element states that can help you interact with the calendar’s views.

If you have a specific requirement, please let us know so we can determine if it can be achieved with the current features or if there’s something we might need to consider adding.

Thank you once again, and we look forward to your reply.

Best regards,
Zeroqode Support Team

[LA81638]

Hi @ZeroqodeSupport, please could you let me know what I’m doing wrong with the ‘selected date’ colour. I’ve set the workflow to select the date and set the colour but it’s showing a light blue shade instead.

[ZeroqodeSupport]

Hello @LA81638,

Thank you for reaching out to us.

Indeed there seems to be an issue with the Selected date’ color field you mentioned and have already forwarded it to our development team for further analysis and resolution.

In the meantime, here’s a simple workaround that you can implement to keep things moving:

Please add a small HTML element to your page—ideally 1x1 in size so it won’t interfere with your app’s layout. Then, insert the following code into the HTML element:

<style>
.fc .fc-highlight {
   background-color: #FFE100 !important;
}
</style>

Replace #FFE100 with your preferred color, also you can use dynamic data there as well. Could you please try this in your app and let us know the results? If you need further assistance or have additional questions, do not hesitate to contact us.

Thank you once again for your observations, looking forward to your thoughts and feedback.

Best regards,
Zeroqode Support Team

[LA81638]

Awesome thanks

[philledille]

Hi,

Not finding it, but wanting to ask to be sure; is it possible to get an event for when a User click and drag using the right mouse button?`

Best, Peter

[ZeroqodeSupport]

Hello @philledille,

Thanks for reaching out to us.

As you can see in the image below, there are numerous events related to clicking on a calendar element or on specific elements within it, which you can utilize to perform various workflows.

However, regarding an event with right clicking, the plugin does not support such an event.

Thank you once again, and I wish you a great day ahead!

Best regards,
Zeroqode Support Team

[user.media]

Hey @seanhoots + @ZeroqodeSupport ,

Huge fan - so huge thank you! Air Calendar has made my life muuuch easier

Just thought it was worth asking, is there any chance you’re able to make the “hide resources with no event” option a dynamic field? (I.e. to enable a checkbox to be added to dynamically hide/show unbooked resources).

Appreciate your time!

[ZeroqodeSupport]

Hello @user.media,

Thank who so much for your support! It’s so great to hear that the Air Calendar is proving so helpful for you.

Regarding your question, you can definitely achieve this using Bubble’s functionalities. For instance, you can add a new field of type ‘yes/no’ in the Resources table [image], and then in the “Resource data source” field from the element, add a constraint [image] that filters for entries with “yes” in the newly added field. This way, you can customize it your workflow further to suit your specific use case.

Could you please try this approach in your app and let us know if everything is working as expected, or if you have any further questions?

Thank you once again, and we look forward to your reply.

Best regards,
Stefan

[edgarmolen97]

Hello @ZeroqodeSupport So far im loving the plugin, I am facing an issue at this current time though.

So im sure this is a minor configuration issue rather than a bug.

So I have the calendar to load to GridMonth view and a bunch of events load up successfully on the page. Suposedly, it takes the current month and loads the events for the current month, for example May.

but this is the issue im facebok. For appointments made on the 31st of May they show in the calendar no problem as long as they are 5pm or before. for events at 6 pm or later don’t show in the same view

Here is where it gets interesting… if I go ahead and run the workflow to “Go to Next View” which effeectively moves the calendar to the next month… THEN the rest of the events SHOW on its corresponding date

So i have to go to next month to see events later than 5 pm
If I show per Week or per Day they won’t show.

Eveything is manually set up to America/Los_Angeles time zone, the calendar, the date/time pickers for the event dates and times, every single piece of data information is set manually to LA time. When the calendar events are loaded and when its visible it sets the time zone to America/Los_Angeles.

Thanks!