Event Calendar with Firefox

Ask the Community General Questions
1

Our Event calendar displays fine in Chrome and Edge but will not display with Firefox. I have tried disabling add-ons and web shields. I have also restarted Firefox is safe mode and tried different computers. No help. Just a blank section where the calendar should be.

2 Likes
3

Hey there, @Michael_Restivo :wave:

I see the issue, and I am really sorry about it!

I’ve forwarded it to the devs and will let you know once I have their response :slightly_smiling_face:

1 Like
4

Thank you Max! Looking forward to it.

2 Likes
5

Thank you for waiting, @Michael_Restivo :wave:

The issue comes from the widget’s installation script, which uses the feature, which isn’t available in Firefox.

To fix it, please replace your installation code with the new one:

<script>const COLOR_SCHEMES={error:{color:"#FFFFFF",background:"#F44336"},warning:{color:"#111111",background:"#FCCA46"},info:{color:"#111111",background:"#FFFFFF"}};function getColor(e){return COLOR_SCHEMES[e]||COLOR_SCHEMES.info}function isEditingMode(e,t){const n=["editor","builder.hostinger.com"];return!(!e&&!t)&&(e?n.some((t=>e.baseURI.includes(t))):!!t&&n.some((e=>t.includes(e))))}function createBannerElement({message:e,type:t}){const{color:n,background:r}=getColor(t),o=document.createElement("div");return o.style.position="fixed",o.style.top="50%",o.style.left="50%",o.style.transform="translate(-50%, -50%)",o.style.zIndex="9999",o.style.padding="10px 20px",o.style.color=n,o.style.backgroundColor=r,o.style.borderRadius="10px",o.style.fontFamily="Arial, sans-serif",o.style.fontSize="18px",o.style.lineHeight="24px",o.style.textAlign="center",o.style.boxShadow="0px 4px 6px rgba(0, 0, 0, 0.1)",o.textContent=e,o}const DELAY=2500;(e=>{function t({currentFrame:e,parentWindow:t,parentDOM:n,widgets:r}){const o=n.querySelector("script[src*='platform.js']")?.src||"https://static.elfsight.com/platform/platform.js";n.head.querySelector(`script[src*="${o}"]`)||n.head.appendChild(function(e,t=!0){const n=document.createElement("script");return n.src=e,n.async=t,n}(o)),t.installedElfsightWidgets||=[],r.forEach((r=>{const o=r.className,s="true"===r.getAttribute("floating")||r.hasAttribute("floating");if(t.installedElfsightWidgets.includes(o))return;const i=document.createElement("div");if(i.classList.add(o),s)n.body.prepend(i);else{(e.closest("[data-ux='GridCell']")||e.parentNode).appendChild(i)}t.eapps?.platform.resetWidget(o.replace("elfsight-app-","")),t.installedElfsightWidgets.push(o)})),e.remove()}window.addEventListener("load",(function(){const n=window.frameElement,r=Array.from(document.querySelectorAll('[class*="elfsight-app"]')),o=isEditingMode(n,window.location?.ancestorOrigins?.[0]);if(o||!r.length){if(o&&void 0!==e.dataset.banner){!function(e){document.body.style.minHeight="50px",document.body.prepend(e)}(createBannerElement({message:"Widget(s) are hidden in editing mode",type:"error"}))}return}const s=n.ownerDocument,i=s.defaultView||{},l=i.__framer_events||i.location.origin.includes("framer"),a={parentDOM:s,parentWindow:i,currentFrame:n,widgets:r};l?"complete"===s.readyState?setTimeout((()=>{t(a)}),2500):i.addEventListener("load",(()=>{setTimeout((()=>{t(a)}),1250)})):t(a)}))})(document.currentScript);</script>
<div class="elfsight-app-1d8a139d-34d5-4ca9-ae17-aca8acecb475" data-elfsight-app-lazy=""></div>

Give it a shot and let me know if it worked :wink:

1 Like
6

Thank you Max! We’ll give it a go!

Best Regards,
Rusty

Michael A. Restivo
United Airlines
Aircraft Maintenance Instructor – Avionics (Retired)
Litchfield Park, AZ 85340
(510)301-8515 (Mobile)
avionicsfun@gmail.com
Callsign - KJ6AMR

2 Likes
7

Hello Max,

Thank you for your help with this. The calendar now displays in all three major browsers. One thing that we noticed is that it is longer than we would like. Is there code that can set certain vertical dimensions?

Best Regards,
Rusty

Michael A. Restivo
United Airlines
Aircraft Maintenance Instructor – Avionics (Retired)
Litchfield Park, AZ 85340
(510)301-8515 (Mobile)
avionicsfun@gmail.com
Callsign - KJ6AMR

2 Likes
8

Hi there, @Michael_Restivo :wave:

I’ve checked your website and see that the live version looks a bit different from the widget in the configurator:

image
image1463×911 126 KB

image
image1497×868 111 KB

This happens because the widget’s container has a limited width. To make the widget look like in the configurator, we’ve added this code to the Custom CSS field on the Appearance tab of your widget’s settings:

.fc-event-title {
  font-size: 14px !important;
}

.fc-event-time {
  font-size: 12px !important;
}

.fc-event-main {
  padding: 4px !important;
}

However, if it’s not what you meant, please describe your use case in more detail :slightly_smiling_face:

1 Like
9

Thank you again Max! We’ll give it a go.

Best Regards,
Rusty

Michael A. Restivo
United Airlines
Aircraft Maintenance Instructor – Avionics (Retired)
Litchfield Park, AZ 85340
(510)301-8515 (Mobile)
avionicsfun@gmail.com
Callsign - KJ6AMR

2 Likes
10

Hello Max,

Everything seems to be working well with the Calendar now. I wanted to take a moment to thank you for your time and effort with this.

Happy New Year to you!

Best Regards,
Rusty

Michael A. Restivo
United Airlines
Aircraft Maintenance Instructor – Avionics (Retired)
Litchfield Park, AZ 85340
(510)301-8515 (Mobile)
avionicsfun@gmail.com
Callsign - KJ6AMR

3 Likes
11

It’s my pleasure :wink:

Happy New Year to you as well :christmas_tree: