Add button for Google Calendar events

Ask the Community Customization
1

Hi there Max,

I used this code for my events calendar below:
.global-styles,
.eapp-events-calendar-events-calendar-component a,
.eapp-events-calendar-modal-modal a {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: white;
background-color: #57b947 !important;
padding: 10px 20px;
border: 0px #57b947;
border-radius: 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
text-wrap: auto;
overflow-wrap: anywhere;
}

.global-styles,
.eapp-events-calendar-events-calendar-component a:hover,
.eapp-events-calendar-events-calendar-component a:focus,
.eapp-events-calendar-modal-modal a:hover,
.eapp-events-calendar-modal-modal a:focus {
color: white !important;
}

A button appears in the event pop up window once clicked on the calendar but I’m not getting the button visible on the event card in the calendar view. I’ve attached the photos of what I’m seeing. How can I make the CTA’s appear on the event card in the calendar view and not have to be clicked into?

Screenshot 2025-07-16 at 11.47.00 AM
Screenshot 2025-07-16 at 11.47.00 AM1920×979 146 KB

1 Like
2

Screenshot 2025-07-16 at 11.47.14 AM
Screenshot 2025-07-16 at 11.47.14 AM1628×1922 237 KB

We want this button visible on the outside under the time field on the card.

2 Likes
3

Hi there, @Ryan_Conklin :waving_hand:

It seems you haven’t added the linked text to the event description in your Google Calendar. It’s necessary for the button to appear in the event card:

image
image1141×815 93.3 KB

Also, I’ve noticed that the code you’ve added applied the button styles to all buttons in the widget. To make it work fine, please use this code instead:

.global-styles, a {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: white;
background-color: purple;
padding: 10px 20px;
border: 0px solid purple;
border-radius: 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
text-wrap: auto;
overflow-wrap: anywhere;
}

.global-styles,
a:hover,
a:focus {
color: white !important;
}

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

1 Like
5

This is what I had in my Google Calendar. Does my link have to say ‘button’?

Screenshot 2025-07-17 at 9.41.26 AM
Screenshot 2025-07-17 at 9.41.26 AM1836×1730 295 KB

1 Like
6

That broke my website and made the buttons global over my whole site using this code you just provided.

.global-styles, a {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: white;
background-color: purple;
padding: 10px 20px;
border: 0px solid purple;
border-radius: 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
text-wrap: auto;
overflow-wrap: anywhere;
}

.global-styles,
a:hover,
a:focus {
color: white !important;
}

Screenshot 2025-07-17 at 9.44.15 AM
Screenshot 2025-07-17 at 9.44.15 AM1920×973 156 KB

1 Like
7

How did this person even see this in Elfsight or was this from their website calendar? This what we want though. A clickable button from the card view without having to click into the event so a person can just click the CTA to get to the link to buy their tickets.

Screenshot 2025-07-17 at 9.58.20 AM
Screenshot 2025-07-17 at 9.58.20 AM1622×1264 89 KB

2 Likes
8

Got it, thanks!

It seems that after the recent update, the classes of the widget elements have been changed, this is why the code isn’t working anymore.

I’ll discuss it with the devs and let you know if it can be adjusted :slightly_smiling_face:

1 Like
9

Hi there, @Ryan_Conklin :waving_hand:

Since the linked text is added to the Google Calendar description, you need to choose Description in the Event Elements to Display setting:

image
image325×890 16.1 KB

image
image1866×985 336 KB

I understand that with the long descriptions, the cards look not so neat, but this is the only solution to display the button now.

And here is the adjusted code that will be applied to your custom button only (without breaking other buttons on your website :slightly_smiling_face:

.global-styles,
.eapp-events-calendar-popup-location-content > a {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background-color: #57b947 !important;
  padding: 10px 20px;
  border: 0px #57b947;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  text-wrap: auto;
  overflow-wrap: anywhere;
}

.global-styles,
.eapp-events-calendar-events-calendar-component a:hover,
.eapp-events-calendar-events-calendar-component a:focus,
.eapp-events-calendar-modal-modal a:hover,
.eapp-events-calendar-modal-modal a:focus {
color: white !important;
}
2 Likes
10

Thank you for your help Max. Those long descriptions won’t work as there are events that don’t have any descriptions in them and it stretches to that long white container. Maybe it’s the picture file that cause that. There aren’t any other Calendar templates Elfsight has that would accommodate a button? Or is there any CSS we can add to this to make it so the card doesn’t stretch to be so tall?

2 Likes
11

Since the button element isn’t supported in Google Calendar, this element isn’t available for the imported events.

However, if you manually add each event, you’ll be able to separately add a button and description.

For your case, our devs came up with a CSS code, cropping the part of the description after the button:

.eapp-events-calendar-grid-item-description p:has(a) ~ p {
  display: none;
}

Please try it out and let me know how it worked for you :slightly_smiling_face:

2 Likes
12

Do I take this code below and input into Elfsight or Google Calendar? Are you saying that I’d have to manually make each event in Elfsight and not have it linked to our Google Calendar?

.eapp-events-calendar-grid-item-description p:has(a) ~ p {
  display: none;
}

[/quote]

2 Likes
13

This code should be added to the Custom CSS field on the Style tab of your Event Calendar widget’s settings:

image
image329×514 6.99 KB


If you want to display the button without the description on the event cards, the only way is to manually add events to the widget. This approach allows you to control whether to show the Description and Button elements separately.

However, if adding the button directly into the Google Calendar event descriptions and using the CSS code I provided works well for you, you’re welcome to continue importing events from Google Calendar :slightly_smiling_face:

1 Like