Services Plugins FAQs

Air Calendar Feature Request

Plugins
#1

On the style for Air Calendar, can you add Line Height as an option. It looks like it is set at 1, which doesn’t respond well when resized.

image
image895×651 42.4 KB

#2

Hello @ianhayes2121,

Thank you for reaching out to us.

Regarding your request about the line height, could you please provide more details or even screenshots to clarify exactly what you’re looking to achieve? Understanding your specific needs will greatly assist us in addressing your request more effectively.

Thank you once again, and I look forward to your reply. :pray:

Best regards,
Stefan

#3

sure…when the screen size is reduced, it spills the text into two lines, making it crowded. I would like to set the line height in the style

image

#4

Hello @ianhayes2121,

Thank you for reaching out.

Based on your message, it seems you’re looking to prevent the text in your description from overflowing when the size is reduced. Regarding the line height in the calendar, altering this CSS attribute for all components could render the element unusable. It would be helpful to know specifically which part of the calendar you are looking to adjust.

If you are referring to the slot height[image], you can manage this by inserting a small HTML element on your page—it can be 1x1 px so it won’t affect your layout—and add the following CSS in it:

<style>
.fc .fc-timegrid-slot{
         height: 2.5em !important;
}
</style>

You can modify the 2.5em to your preferred value (the default is 1.5em) to increase the slots’ height, also you can use dynamic data there as well. Please confirm if this addresses your need. :pray:

However for preventing text overflow during page resizing, you might consider using responsive CSS to adjust the font size accordingly. For example:

<style>
    .container {
        line-height: 1.6;
        min-width: 300px; /* Prevents the container from being too narrow */
    }

    /* Responsive font size */
    p {
        font-size: 1em; /* Default size */
    }

    @media (max-width: 600px) {
        p {
            font-size: 0.8em; /* Smaller font size on smaller screens */
        }
    }
</style>

And the ensure that in your database where you store the values for Events, to change the descriptions of the Event and assign the container class to the main div:

<div class="container">
    <p><b>CDP (Activity Center) Aaron</b> (min = 3, assigned = 2)</p>
    <p><b>Coach:</b> Kevin Steven</p>
    <p><b>Volunteer:</b> Allyson (HL - Aaron), Aydin (BA - )</p>
    <p><b>Horse:</s> Arwen, Bentley</p>
</div>

Could you try implementing these changes and let us know if they resolve your inquiry? Also, feel free to visit the test page where I’ve applied the mentioned CSS[image].

Thank you once again, and I look forward to your response.

Best regards,
Stefan