šŸ“…[New Plugin] Air Calendar (FullCalendar)

The human being is amazing.

1 Like

Hi @jeffmccutcheon
Yes you can use it as a backend to create availability.
Basically the admin will create ā€œeventsā€ as the available time slots that users can select. When a time slot (or event) is booked you can have some boolean flag to remove it from your available slots.

Timekit.io does exactly this and they use this exact Fullcalendar library.

Regarding the client self scheduler front end - I think I get it - and jamebondā€™s sample helps above.

What I canā€™t figure out is: If I have 30 minute slots and my appointments range from 1 hour to 3.5 hours, whatā€™s the easiest way to make sure an appointment can fit before offering (and subsequently trigger all the necessary boolean flags of each different event the appt covers when it is scheduled?

Iā€™m pretty green.

@jeffmccutcheon,
Iā€™m donā€™t understand your question. Is this related to this calendar plugin?

Is there a trick to getting it to display as anything other than day view? Iā€™m trying to get it into week mode like the demo but it appears to be completely unaffected by any configurations I make. Below are 2 very different combinations Iā€™ve tried and both display as a single day in the editor and live mode. Iā€™ve even uninstalled and reinstalled the plugin to no avail.

Nevermind! The ā€œRemember viewā€ setting is ticked by default and it looks like the default view when you add it is a day. So whatever the default view is set to the first time you hit ā€œpreview,ā€ thatā€™s what it will be ā€œstuckā€ on until you change it in a workflow (or simply uncheck the ā€œRemember viewā€ box).

1 Like

@willtaylordesign yes youā€™re right.
If this is confusing let me know and i can change it.
Maybe by default I should uncheck the ā€œRemember viewā€?

Hi guys,
If youā€™ve purchased this plugin note that it uses exclusive end dates which is the ical standard.
Iā€™ve explained this in the pluginā€™s documentation (link below).

If youā€™re migrating from Bubble Fullcalendar plugin you need to read this and make the necessary changes to your data. This is relevant to all-day events.
Unfortunately Bubbleā€™s FullCalendar is using a deprecated version of FullCalendar which stores event end dates in a non-standard way.

2 Likes

Hi @seanhoots

Iā€™ve managed to replicate your demo design as itā€™s simply what I require, however, there are a couple problems I am experiencing - more likely to do with my setup than not.

The first problem Iā€™m experiencing occurs when an event is clicked. When I click an event on the calendar, a popup appears with an error message showing ā€œThe plugin Toolbox / action Run javascript threw the following error: Popper is not definedā€. From what I understand, ā€œPopperā€ has something to do with the Group Focus as its element id is ā€œPopper1ā€ (something Iā€™ve also replicated in my application).

My second problem is also to do with the Group Focus as for some reason, unlike your demo app, whenever the Group Focus is visible it doesnā€™t follow the position of the mouse but rather stays in a fixed position (see below). I can share a link to my application if youā€™d like to have a look.

1 Like

Hi @accommole,
First of all thanks for buying the plugin. I appreciate it.

Youā€™re getting that error because Popper is a private plugin i have in my app.
As I stated clearly with a disclaimer here, in the documentation and on the demo page, the context menu isnā€™t part of the plugin. Its just a proof of concept to show what is possible.
So I will recommend you to use a normal popup that shows up in the middle of the screen.

There is a limitation in the group focus that prevent this context menu to work smoothly.
So what i have is more of hack and proof of concept and wouldnā€™t recommend it for production purpose.

So please use a normal popup. Once bubble updated the group focus to make it easy to do this I will make the popper code as part of the plugin.

I think iā€™m going to change the demo to use normal popup so that people donā€™t try to replicate it leading to such issues.

5 Likes

Oh okay gotcha :ok_hand: I was having this problem as well

I could add the pipper code to the plugin but I feel itā€™s too hacky for production.
So for now itā€™s better sticking to a normal popup.

Yes, I think thatā€™s a good idea. I would also consider using the word ā€œoverrideā€ in its ā€œshow documentationā€ area. Whenever I see ā€œthis overrides the ____ field/settingā€ I pay a little more attention to it.

Very often Iā€™ll add a new plugin then fill out the minimum requirements to test it before investing time into fully customizing it. In this case, I had to backtrack before figuring it out, which kind of made it feel like a frontend action had affected the backend.

@willtaylordesign, it doesnā€™t actually override it. If you were to open the calender in anotwhr browser or on another computer, the default view is what will show.
But I can see how some people can miss it so I will just add a note but wonā€™t say it overrides because it doesnā€™t.

Ah good point.

Also, minor issue: the ā€œweeksā€ selection appears twice in the below.

image

Thanks. Will fix it in next update.

Beautiful! Great job Sean!!

1 Like

Air Calendar Tutorial #2 - Adding Navigation Button

In this short video tutorial I show how you can easily add navigation buttons to your Air Calendar.

For full screen use link below.
Air Calendar Tutorial #2 - Adding Navigation Buttons

3 Likes

Hi Sean
You have mentioned in the documentation about integration with Google Calendar as well as ability to export in ICAL format. Do you have examples of this (would be great) and also can one import an Ical and Google Calendar to sync with this calendar?
Kunal

1 Like