Add spacing between upcoming and past events

Ask the Community Customization
1

Hi,
I applied this code in the css code place of my calendar widget but I didn’t see any difference. Sure, I made an error.
Any help is welcome :grin:

1 Like
2

This code for Squarespace Event Page. If you use Elfsight Calendar Widget, it won’t work. You can share link to page where you use Calendar, I will check and give you new code.

1 Like
3

Hi @MICHEL_A3A :wave:

Do I understand right that you just would like to increase spacing here?

image
image1879×988 159 KB

1 Like
4

Hi Max,
Yes if possible, even better if we can insert a sort of border line.
Thanks for your help.
Kind regards

Visitez notre site : https://amicale3a.fr

1 Like
6

Gotcha!

Your request is in the hands of our devs now. I’ll let you know once I receive a response from them :slightly_smiling_face:

7

@MICHEL_A3A This code should work for you:

.global-styles,
:root {
  --line-color: #000;
  --line-opacity: 0.2;
  --space: 70px;
}

.eapp-events-calendar-layout-pastEvents {
  margin-top: var(--space);
  position: relative;
}

.eapp-events-calendar-layout-pastEvents:before {
  content:  '';
  width: 100%;
  height: 3px;
  position: absolute;
  top: calc(var(--space) / -2.2);
  left: 0;  
  background: var(--line-color);
  opacity: var(--line-opacity);
  border-radius: 5px;
}

You can adjust line color, opacity and space to your liking. Test it out and let me know if you like what you see :slightly_smiling_face:

8

Dear Max,
As usual, it’s perfect, I like it.
Thank you very much.
Kind regards
Michel

2 Likes
9

You are always very welcome!

In the meantime, we’d like to invite you to participate in our new challenge. Just answer 3 simple questions about your favorite widget, and you’ll get a chance to win a 3-month extension to any of your subscriptions.

Check the details and jump in - we are eager to hear your thoughts :wink:

10

A post was merged into an existing topic: May Challenge: Tell us about your fav widget and get rewarded! :trophy:

12

Dear Max
Could you please help me?
I added an event in calendar, I wanted to share it via email by using the link proposed in th widget but my recipient contact told me that is not working. Even the link proposed (copy and past) not working too.
Could you please tell me what’s wrong?
Thanks for your help.
Kind regards
Michel

Nom de l’évenement: Jour de l’An 2024 Thalasso Valdys Saint-Jean de Monts
Date de l’évenement: 30 Décembre 08:00 - 02 Janvier 20:00
Event Link: https://1567886222-atari-embeds.googleusercontent.com/embeds/16cb204cf3a9d4d223a0a3fd8b0eec5d/inner-frame-minified.html?jsh=m%3B%2F_%2Fscs%2Fabc-static%2F_%2Fjs%2Fk%3Dgapi.lb.fr.eT93yedq6D8.O%2Fam%3DAAAC%2Fd%3D1%2Frs%3DAHpOoo-H2gL8xF_ydMGwhRBrYdlrA4w8Ew%2Fm%3D__features__#calendar-4261f025-0a2f-46f3-b523-6328e2abc809-event-lwq4yx0p

1 Like
13

Hi @MICHEL_A3A :wave:

Could you please send me a direct link to the page where your widget is installed?

14

Hi Max
Here is https://sites.google.com/amicale3a.fr/charenton/calendrier?authuser=0

Visitez notre site : https://amicale3a.fr

1 Like
15

I’ve talked to the devs and, unfortunately, there is no way to change this behavior.

You see, due to the peculiarities of the Google Sites platform, all elements of applications are being converted into iframe format, that’s why the event link doesn’t work. I am really sorry :pensive:

Please let me know if this explains things or if you have any further questions.

16

Thank you Max
In that condition, I should remove the 2 links box. Hope it’s easy.
Good afternoon.
Michel

Visitez notre site : https://amicale3a.fr

17

Sure! You can hide these buttons in the Popup Elements section on the Settings tab:

image
image399×921 22.8 KB
image
image398×534 11.2 KB


To remove the line in the screenshot below, feel free to use this CSS Code:

.global-styles,
.eapp-events-calendar-popup-item-row ~.eapp-events-calendar-divider-component {
  display: none;
}

image
image679×767 34 KB

18

Perfect! I will try and let you know.
Kind regards

Visitez notre site : https://amicale3a.fr

1 Like
19

Hi Max,
It’s working fine with your explanation. I don’t care to remove the line with CSS code below the map, it’s not really disturbing.
It’s a pity I cannot make ads for an event by sending email to people referring to the calendar. If you have any idea in the future please let me know.
Thanks a lot as usual.
Michel

1 Like
20

Glad to hear that this workaround worked for you :slightly_smiling_face:

I totally understand your point regarding the event link option, but, unfortunately, it’s all about Google Sites peculiarities. Anyway, if any solution is found in the future, we’ll let you know!

21

Hi Max
Maybe you can provide me with your advice.
If you have a look at my site, you select “Calendrier”, then you will observe two situations.

  • by doing this from a laptop:
    We can scroll down all events until the end, including past events, but you will observe that the last ones are not displayed entirely. This is not really a big problem in my opinion because all events above are ok.
  • by doing this from a smartphone:
    This is more a problem because we cannot scroll down until the end.

Do have any idea, is this due to the widget not correctly customized or is this due to the google site ?
Thank you very much for your help/
Kind regards.
Michem

1 Like
22

Hi @MICHEL_A3A :wave:

Yeah, all elements of applications on Google Sites platform are being converted into iframe format, which causes incorrect displaying. I am terribly sorry about it!

Iframe calculates the height of the block on mobile based on its size on the desktop. So, to make the widget look good on mobile, you need to stretch the widget in its height on the desktop.

I also need to inform you that an empty space might appear on the desktop below the widget, but it is the only workaround we can suggest in this case.

Please check it out and let me know if it helped :slightly_smiling_face: