Air Calendar (Full Calendar)

[Serg]

A highly customizable calendar with several different views based on FullCalendar’s most up to date library (5.9.0).

FullCalendar is the most powerful calendar and scheduler used by several companies and projects.

This plugin was developed in response to the several limitations of the default bubble calendar and addresses the three main concerns: Performance, Customization and Feature set.

It is a full-fledged calendar that you can even build your SAAS on (Timekit.io uses the same library, FullCalendar, that this plugin is based on).

Features:

• multiple views
• custom views
• full control of Look and Feel
• internationalization (Locales and Timezones)
• high performance
• on-demand fetching:
• drag-and-Drop and Resize
• easy setup
• drag to select
• blocked dates/times
• standard date representation

Find Live Demo, Demo Editor, and Supporting Documentation available on the plugin page: Air Calendar (Full Calendar 5.9.0) Plugin for Bubble | Plugin for Bubble by Zeroqode

[Serg]

We have pushed a plugin update, that has fixed the issue with the current time indicator and reworked the checkbox that ad/hides Saturday/Sunday columns in the calendar.

Find these changes available on the latest version (Version 2.29.0: Fixed displaying of current time indicator. Added possibility to activate displayed weekends separately) and give it a try.

Regards,

[sarahesteve]

hello @Serg about the day header format, the dot pushes the day, is there a way to make it as Google Cal ?

Thank you !

[danielgadus]

Dear ZeroCode Team,

Thank you for creating such an excellent and versatile set of calendar plugins! We’ve been using Air Calendar and appreciate its robust features and flexibility.

After testing the plugin extensively, we’ve noticed a few limitations that, if addressed, could greatly enhance the user experience and functionality of the plugin. Here are some of the key limitations we’ve encountered:

Scroll to Current Week/Day:

There’s no built-in option to programmatically scroll to the current week or day.

This functionality would be extremely useful for dynamically focusing on the current time period, especially in timelines and weekly views.

Dynamic Styling for Current Week/Day:

The plugin lacks an option to easily change the background color or styling for the current week or day.

Adding this capability would allow for better visual representation and emphasis on key time periods.

Access to Current Cell in Conditions:

Currently, it’s not possible to reference the current cell (or event slot) dynamically in the conditions tab or as a variable.

This limits the ability to create truly dynamic behaviors, such as applying styles, workflows, or actions specific to a particular time slot or cell.

Separate Settings for Different Views:

While the plugin allows setting conditions based on view types (e.g., resourceTimelineDay, resourceTimelineWeek), the settings often apply globally and overlap, leading to inconsistent behavior.

A more robust method of isolating settings for individual views would improve the configurability.

Better Control Over Time Slots:

Currently, adjusting time slots (e.g., Maximum Time and Minimum Time) lacks flexibility when switching between views. For example, day views and week views often require different configurations.

So is there any chance for adding this above features to the plugin?
Regards Daniel

[Stephan]

Hello @sarahesteve ,

Thanks for reaching out, and apologies for the delayed response over the weekend.

Regarding your inquiry, it appears that the calendar element in your app is quite small, causing the date to be pushed out of alignment. The Air Calendar plugin integrates the Full Calendar library into Bubble, so it may not look exactly like Google Calendar by default.

To prevent the date from overlapping, you can add an HTML element to your page and insert the following CSS:

<style>
div[style*="min-width: 14px"][style*="height: 14px"][style*="border-radius: 50%"] {
  min-width: 7px !important;
  height: 7px !important;
  background-color: red !important;
}
</style>

This will allow you to modify the current day’s dot styling.

If you’re interested in a custom solution to match Google Calendar’s styling more closely, we also offer sponsored development. If that’s something you’d like to explore, please fill out our Sponsoring Plugin Features Form here: Airtable

We’ll review your request and provide an estimate for the required work and associated costs.

We look forward to working with you and better serving your needs.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble

[Stephan]

Hello @danielgadus ,

Thank you for reaching out and sharing your feedback with us.

I have reviewed the points you mentioned, and most of them seem achievable:

1. Navigating to Dates: For your first point, there are actually two actions available that let you navigate directly to today’s date or to a specific date and view.
2. Accessing the Current Cell in Conditions: It’s not entirely clear what you mean here, but the Air Calendar plugin has a “clicked date” state that you can reference to identify the current cell from the calendar.
3. Separate Settings for Different Views: This is fully achievable. In the Air Calendar element, you can set up “Custom Views” that allow you to select the view, type, and duration.
4. Dynamic Minimum and Maximum Time Fields: These fields can use dynamic values, meaning you can adjust them based on the selected view.

Please review these settings and let me know what you find. Also, be sure to check out our demo page editor for examples of how to set up the plugin. Our documentation provides extensive information on all the plugin’s available features.

If you need a specific functionality added to meet your requirements, please complete our sponsoring plugin features form: Airtable

We’ll review your request and provide an estimate for the required work and associated costs.

Thank you again, and I look forward to hearing from you.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble

[danielgadus]

Hello Stephan,
here is better explained workflow:

1. "Go to Date" Action:

The “Go to Date” action works by opening the calendar’s day view, as shown in your demo. However, we need the ability to scroll the current view (e.g., week or timeline) to a specific day without switching views.

• Example: In a weekly schedule view, we want to scroll and center today’s date within the visible days, keeping the week view intact. Can this be achieved natively? If not, could this feature be considered for a future update?

2. Scrolling Behavior for Other Views:

Similarly, in views like month or timeline, we’d like to programmatically scroll to a specific week or date without altering the view mode. This would improve usability for users managing extensive schedules or resources.

• Example: Automatically bringing a user’s next scheduled event into focus within the current month view.

3. Highlighting the Current Day or Week:

We’d like to dynamically highlight the current day or week. While dynamic conditions allow some flexibility, this seems limited without custom CSS.

• Example: Automatically apply a background color to today’s cell in a month view or highlight the current week in a resource timeline view. A built-in option for this styling would be incredibly useful.

4. Dynamic Minimum and Maximum Time for Views:

When configuring minimumTime and maximumTime dynamically based on the view, settings for one view unintentionally affect others.

• Example: A minimumTime of 8 AM and maximumTime of 6 PM for timeline day maximum time also applies to the week view, even though these views need separate configurations. Can this be isolated per view, or could there be a feature to manage this distinction more effectively?

5. Accessing the Current Cell in Conditions:

While the “clicked date” state is helpful, it doesn’t allow us to dynamically style cells for specific dates.

• Example: Highlighting a holiday cell in red or dynamically styling past and future dates differently in the calendar grid. Is there a way to reference individual cells by date in the plugin settings?

6. Adjusting Height in Resource View:

The resource view’s height appears fixed and doesn’t adjust dynamically based on the content or window size or there is no option to add resource height.

• Example: When there are 20 resources, the view gets cluttered and requires scrolling, while with 3 resources, it leaves excess empty space. A feature to auto-adjust height based on the resource count or available space would improve clarity and usability.

7. Removing Time from the Header:

In certain use cases, we’d like to remove the time display from the header in month or week timeline views. This would allow for a cleaner layout, especially in scenarios where times are irrelevant or displayed elsewhere.

• Example: In a month timeline view, we only want to show resource names and event details and date in header while omitting the hourly breakdown in the header. Could an option be added to hide or customize this element?

[Stephan]

Hello @danielgadus ,

Thanks for the message.

I noticed you’ve also completed the sponsorship development form, so before proceeding, could you confirm if you’d like to move forward with that request? Once confirmed, our development team can review and further provide an estimated hour-cost for the improvements.

Regarding your requests, it’s a bit challenging to fully understand them from text alone. Could you please share additional screenshots or screen recordings? This will help clarify what you mean and enable us to provide more accurate answer.

Regarding “4. Dynamic Minimum and Maximum Time for Views,” I want to ask if you’ve had a chance to try the suggested method with using dynamic values so each view will have different values there. Did it meet your needs, or are you experiencing difficulties? If there are any concern, please share screenshots that show how it’s currently set up, and describe the exact problem you’re facing.

Also, please note that the customizations you’re looking for lean more towards custom development. If you need assistance from our bubble developers team, kindly complete the form on our website: https://zeroqode.com/

And one of our managers will get back to you:

As the support team, we’re here to help with general advice and to fix any technical glitches, we cannot assist with custom projects development.

Thank you for your understanding. If you have any specific questions or need further clarification, please let us know.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble