📅[New Plugin] Air Calendar (FullCalendar)

[votterskog]

yes, try adding this into your pages’ HTML header

<style>
  .fc-timegrid-now-indicator-arrow {
    border-color: transparent blue !important;
  }

  .fc-timegrid-now-indicator-line {
    border-color: blue !important;
  }
</style>

[votterskog]

yes, I’ve added that. But I don’t get it to work, sorry. Maybe someone else in this thread can try and reply? If you get it to work, I’m sure it’s possible.

And from my pretty novice understanding, because this search is already downloaded into the client side it won’t use any WU?.
Could you please elaborate on this inquiry?
Using conditionals to avoid people being able to overlap events uses a Only when: “do a search for”:count is 0
I don’t know but I suspect that it will not use any WU because that search has already been downloaded client-side.

[votterskog]

Let me try to explain what I mean by making the calendar somewhat dynamic to the current user.

1. Looking at the calendar. Let’s focus on the light blue ones. These are events any user can book in. But for me, the current user, there is no difference in color or anything for MY event. They become one of the many light blue ones. (Greys are in the past, and please for the sake, ignore the darker blue ones.)
   

2. If I look in the inspector I find this for an event

<div class="fc-timegrid-event-harness fc-timegrid-event-harness-inset" style="inset: 1721px 0% -1761px; z-index: 1;"><a class="fc-timegrid-event fc-v-event fc-event fc-event-start fc-event-end fc-event-today fc-event-future" style="background-color: rgb(216, 241, 255);" id="aircal_825bd5d9b1f1a_current_event"><div class="fc-event-main" style="color: rgb(5, 0, 0);"><div class="fc-event-main-frame"><div class="fc-event-time"></div><div class="fc-event-title-container"><div class="fc-event-title fc-sticky"><div class="row-container"><div class="info-container">     <div class="image-container">         <img src="//1c6a6a5d216c583f9cae5c0aea5e8706.cdn.bubble.io/f1708016977960x865095726793492200/We%20sell%20no%20code%20%281%291.jpg" alt="Image 1"> </div>     <div class="name-single">chirag</div></div> <div class="column-container-nr"><div class="number-90">60m</div></div> </div><br></div></div></div></div></a></div>

I can use this css snippet to target a specific color for example
.fc-timegrid-event-harness a[style*=“background-color: rgb(211, 211, 211)”] {
height: 35px !important; /* Adjust the height value as needed */
}
I can then adjust the background color or the height. I just need to target the color.
It works.

3. Bear with me now, because even tho I don’t know if it’s possible, it might not be that hard for someone more experienced to know instantly if it would work, or it could be tested.
   If another input similar to background-color: could be added. A field in the database that would save the currents users’ slug or unique ID (in a similar fashion to ‘background color’.
   Then this Slug or unique ID could perhaps be targeted with dynamic CSS like this:
   
   And in this way, the current users events could be made to be a different height, different color etc.
   As I see it, the calendar would become dynamic to the current user. Each user would see his events in a certain color. = much more personalized.

I haven’t tested custom CSS and nor do I have a coding background. But I hope the explanation is enough to get the idea across. Otherwise, just ask me and I’ll do my best to explain it again.

[jacob2]

Hi, i mean the timeline current time indicator. See the screen shot

[alan.mackintosh1]

Hi,

Up until yesterday I was able to have an AirAlert show additional information about a event when it’s hovered, however since I’ve updated to the latest version it doesn’t display the information for the event (I am however able to click the event and display the data in a popup.) So i think there may be an issue where entering an event no longer sets the event as the “current event”

Are you able to help please @ZeroqodeSupport

[ZeroqodeSupport]

Hello @jacob2,

Thanks for your message and providing clarification on your request.

At the moment, changing the indicator color is not a feature our plugin supports. However, we agree that it could be a valuable enhancement. Consequently, we are initiating an improvement task for our development team to explore this suggestion further and assess the feasibility of incorporating such improvements into the plugin.

We will keep you informed of any developments related to your request.

Thanks again for bringing this matter to our attention.

Best regards,
Zeroqode Support Team

[creatorbee]

@ZeroqodeSupport

A 100% height can be achieved by using an HTML element on page with a corresponding setup,
Here is an example of such a setup:

<style>
#calendar {
    height: 100vh !important;
}
</style>

Where calendar is the plugin element id.

@ZeroqodeSupport This doesn’t seem to be working. I’ll try document with screenshots. I have the calendar html id set, and the styling in an html box on the page. But I still end up with no dynamic height. This is on old responsive, btw.

[jacob2]

Awesome thank you very much. Everything else seems to be fully customizable you can get a certain color scheme and then all the sudden you got that red time indicator that kind of throws everything off.

[votterskog]

@jacob2

Mine is blue but I can make mine any color I want. The code is a few messages above.

[votterskog]

@creatorbee
That CSS snippet works for me. not sure what’s going on for you there.
Mine goes all the way down even tho I only have 75vh!
What’s the group you have it in looking like?

[ZeroqodeSupport]

Hello @votterskog ,

Thank you for providing additional details regarding your use case.

@votterskog

I can then adjust the background color or the height. I just need to target the color.

We can provide you with a suggestion: All event colors are stored in the database.

You can create a field in the database, for example, a username, and when the user logs in, in all fields that contain his name, overwrite the color to the one you want through a database change.

Please note that we provide general support and fix issues related to the default plugin configuration, if you are looking for a Bubble developer who can help you with custom integration, we recommend posting on the Help section.

Additionally, we would like to thank you for the HTML solution you proposed for the jacob2.

---

---

Hey @jacob2,

Indeed, you’re correct. Integrating this feature would enhance the customization options of the plugin. As a temporary workaround, you can try the solution provided by @votterskog . Rest assured, we will notify you as soon as this enhancement is incorporated into the plugin settings.

---

---

Hello @alan.mackintosh1 and @creatorbee,

Thank you for getting in touch with us.

To assist you more effectively, could you please provide a bit more detail on what you’re aiming to accomplish? Specifically, we would greatly appreciate if you could share:

• Screenshots and screencasts illustrating your current workflow setup, the plugin element, the issue you are encountering, and the expected result. For recording screencasts, we recommend using the Loom tool, which is quite user-friendly and efficient.

• Additionally, it would be incredibly helpful if you could record a video demonstrating the issue step by step, making sure to keep the browser’s console open. This way, if there are any error messages displayed, we can better diagnose the problem. Please share a link to this video with us.

Lastly, could you provide some insight into how this worked for you in previous versions? This information will help us understand the context better and guide our troubleshooting process.

---

---

Thank you for reaching out with your questions and concerns. If there’s anything more we can help you with or if you have further questions, please feel free to contact us at any time.

Best regards,
Zeroqode Support Team.

[creatorbee]

@votterskog are you on old responsive engine? I don’t have it in a group.

[votterskog]

@creatorbee
I’m on the new responsive engine
My calendar is in a align-to-parent group

You have exposed the option to add ID attribute?

[creatorbee]

Yes, but I’m on old responsive so I’m guessing that’s the problem. @ZeroqodeSupport can you test dynamic height on old responsive?

[votterskog]

@creatorbee
I just tested to make it 15vh
And it made no change to my calendar.
Quite sure that CSS code was doing something for me before, but as you say, it seems like it’s the new responsive engines’ vertical stretch that does it.

[jacob2]

I couldnt get this to work

[jacob2]

Hi, I’m noticing that the current time indicator on the time line is pff an hour? It is not reading the browssr time properly it looks like. Please help.

[votterskog]

@jacob2
Do you have the dropdown and plugin setup like Seanhoots editor?
Test it: if you use Seanhoots calendar, is your current time indicator still off? If not, then something is wrong in your editor.

[ZeroqodeSupport]

Hello @jacob2,

Thanks for the message.

About your second inquiry, was the current time indicator always showing the wrong time or it started happening recently?
Regarding your second question, has the current time indicator consistently displayed the incorrect time, or it started happening recently?

Also could you please share with us these details from your Air Calendar element, to ensure it’s not inadvertently pulling incorrect time values.

Thanks and looking forward to your reply.

Best regards,
Zeroqode Support Team

[ZeroqodeSupport]

Hello @creatorbee,

Thank you for your message and our apologies for the late reply over the weekend.

Could you please clarify your goal with the Air Calendar element as it comes with default layout settings that allow you to adjust the height.

However, if you’re looking to define the height through an HTML element, you’ll need to include both the min-height and max-height height parameters, as shown in the example below:

#calendar {
    height: 30vh !important;
    min-height: 30vh !important;
    max-height: 30vh !important;
}

We hope this information will prove helpful to you.

Thank you, and we eagerly await your response.

Best regards,
Zeroqode Support Team