Templates Plugins Courses

AirCalender HTML in title?

I understand that AirCalender allows for HTML on the event title. I am unable to find anything in the documentation which show how this works and wondered if anyone had any experience with this?

I have switched on the setting here;

html

But now how do I add HTML? I have tried adding HTML and matching it will an ID to the inspector but nothing changes?

Hi @darren.james7518, sorry for the delayed reply.

To have the HTML formatting applied to the title, you need to use the appropriate HTML code inserted, namely <br/>

So for example, this text: one <br/>12 two <br/>12 three will look like this:
image

Hope this answer helps. Drop me a message if there will be any other plugin-related questions.

Regards,

Thank you @Serg that works but since switching on HTML I can display the Title but not Event Content. For clarity, here’s the workflow on the ‘Create Event’ button;

If I uncheck the option to expose HTML, the Calendar once again shows both Title and Content, but of course without HTML.

You may wonder why I don’t just add the Event Content information into the Event Title as that would show it all in one go. The issue here is that, although it does display the information correctly, when the user edits their post, they see the HTML in the input field, rather than plain text which will confuse them. Also, I only want the Event Content to be editable.

Hi @darren.james7518, thanks for your reply.

Please let me know which of the calendar views you are using.

As a possible solution - you can use a Rich Text Editor plugin element, which supports editing& saving &displaying text directly in HTML format, with no manual BBcode use.

Looking forward to your reply.

Regards,

Thanks for your reply. I am using all the views? I mean the user can choose if they want to view day, week or month. I am not sure what the views have to do with it not showing Event Content?

The Rich Text Editor workaround is a good idea but it won’t work because I don’t want the user to control the formatting, I am displaying a standard format.

Hi @darren.james7518, thanks for your reply.

I’ve passed this question to the developer team, and once I get any feedback, I will let you know asap.

Thank you for understanding.

Regards,

Hi @darren.james7518, thanks for your patience.

We have pushed a plugin update, that has fixed the issue related to HTML content display.

To check changes, please upgrade your plugin to the latest version (Version 2.41.0: Fixed “Title has html content” option) and give it a try.

Drop a message here if there will be any other plugin-related questions that I can help with.

Regards,

Thank you, that’s great you fixed this :slight_smile:

I have another question, I am showing several calendars (single week view) inside a repeating group. When I click a date on any of the calendars I want the input start time to update with the current calendar clicked date, but can’t see how to do this;

I created a customer state selectedDate and tried setting the following state, but no luck.

Also, whilst here I wondered if I can change the date format to United Kingdom format, we do the day followed by the month, like 02/12 (this is Dec 2nd). It is very confusing for us to see it the other way.

@darren.james7518

If you are using Air Date/Time picker, you can use the following setup:

In Air Date/Time Picker v2 element you can choose the time format that you would like to display:

Hope these hints will help. If any other questions will appear, you know what to do :wink:

Regards,

Thank you, but I am using AirCalendar (not Air Date/Time Picker) as this is how my customer wanted to have it set up. I have two identical AirCalendar calendars, each showing a one week view. Below these, I have a booking form and I would like the Date input to be populated when a user clicks on either of the AirCalendars. Also, the issue with the USA date format remains because I don’t see anywhere in the AirCalendar inspector to change this.

Hi @darren.james7518, thanks for reply.

The abovementioned solution has been shared for this request. It also solves the issue with required time format.
Sorry, I didn’t mention the fact that Air Date Time Picker is a separate plugin and it is a free plugin.

Check the test setup for reference: Seanhootsdemopro | Bubble Editor

Let me know if there is anything else that I can help with.

Regards,

Thank you for providing the link to an example, but this example did not solve my issue. Let me back up a bit, if you look at my previous image, you will see that I have a repeating group that displays the AirCalendar for each installer. I want to be able to select a date from the AirCalendar and have it populate the form Date inputs. I also want to show the dates in UK format.

The reason I can’t use the Air Date Time Picker is because I want the user to be able to click the AirCalendar and immediately have it populate the form’s Date input. This is much easier and intuitive because they are clicking on the available date for their installers. Using the Air Date Time Picker would require them to navigate away from the calendars and search for their desired date.

The most important issue for me is the date format. How can I make it UK format using the AirCalendar? Also, I don’t see a way to reduce the size of the date font?

Hi @darren.james7518, thanks for the reply.

Here is an example with a text element (check it on the same test link shared above). Be sure to have indicated the custom state type as a date type.


Within the text element you can format the date as per your requirements:

Please check the style setup fields on the element where you need to modify the size:

Hope it helps. Let me know if there will be any other questions.

Regards,

Thank you for your reply. I followed your advice below to set the custom state’s date and that worked (your image below for reference).

1

Next, as per your instruction below, I tried resizing the font but if I reduce the font to a reasonable size, say 12px, the text inside an event becomes extremely small. It seems both the event font and calendar dates are linked?

4

Here’s what I mean about the date being ok but the event font being too small. If I increase the event font to about 12px then the date font is about 20px.

Screenshot 2022-12-30 005027

Finally, would you mind giving further instruction on how to change the date format to UK because I don’t know where the text element is that you mentioned?

2

Hi @darren.james7518, thanks for your questions.

Yes. To change the event font size separately, you can use the corresponding HTML code within the title (when the corresponding checkbox is tipped).

Please check here:
set

Hope this helps. Let me know if there will be any other questions about plugin default setup.

Happy New Year and have a great time!

Regards,

Hello, thank you for your replies.

Yes. To change the event font size separately, you can use the corresponding HTML code within the title (when the corresponding checkbox is tipped).

Can you help me locate where the corresponding HTML code is? I have checked “Title has html content” but I don’t see anywhere else to separate the content font size from the calendar date headers.

further instruction on how to change the date format to UK

You have shown me how to add UK date in a new text element, this is not what I want, I need the calendar itself to show the UK date format. I need to change the format of the calendar header dates (below).

The arrows below show you where these header dates go, so you can see the dates are imbedded in your software, so to change them surely requires me to change something in the calendar inspector settings?

Hi @darren.james7518

Same as with <br/>, you need to insert the corresponding font size code within the title with HTML option on, <font size=“20”>Text Here</font>.

I’m afraid that the current plugin setup doesn’t allow changing the date format displayed within the calendar as it comes as a part of the used library. Sorry about that.

Hope these answers help. If there will be any other plugin-related questions, please let me know.

Have a great weekend!

Regards,

Please, please show me exactly where I enter that text, I don’t have a clue.

@darren.james7518 in the title field