Calendar – Remove thumbnails

Hello!

I want to display events using a Calendar.

When there is only one event a day the calendar shows the thumbnail of that event.
When there are more than one event a day the calender shows text.

Is there a way to get rid of the thumbnails altogether and only show the text, even if there is only one event that day?
Removing the event thumbnail is not an option. Making the calendar smaller to hide the thumbnails is what I want to avoid.

The website uses the "Personal" plan, so no custom code except custom CSS.

I tried removing the images with CSS, but it will only show an empty cell without text. I thought about changing the mobile breakpoint of the calendar to trick it into displaying the mobile calendar without the thumbnails, but I'm not sure if that is achivable with CSS.

Any help would be appreciated!

Figured it out!

To remove the images in the calendar, use this code:

.background.background--iseventscollection {
  display:none;
}

To make the events visible use this:

.itemlist {
  display: block !important;
}

Thank you! It helped me a lot!

Hi. Rammy, this works great on the desktop view.  But now the mobile calendar gets the text instead o fthe grey block. Is that true for you too?

thanks!

On 10/17/2020 at 10:03 PM, SueF said:

Hi. Rammy, this works great on the desktop view.  But now the mobile calendar gets the text instead o fthe grey block. Is that true for you too?

 

thanks!

If you share link to page where you use calendar. We can take a look

HI!

See below.  

I used your code..  great on the laptop or desktop.

site is still under development , will this attachment do?

""To remove the images in the calendar, use this code:

.background.background--iseventscollection {
  display:none;
}
 

To make the events visible use this:

.itemlist {
  display: block !important;
}

""

Tuan gave me some new code to keep mobile grey blocks, not elongated.  Working well!

Remove code you used & add new code
/* Calendar */
.background.background--iseventscollection {
    display: none
}
@media screen and (min-width:768px) {
   .itemlist {
    display: block !important
}
}

Hi There!

How can I make today's day in my calendar a different color or filled with the thumbnail image from my blog. When I shrink my calendar to a smaller size, It seems the thumbnail disappear. 

Also is it possible to have a whole week highlighted in a different color? I will be posting videos 5 days and would like to highlight that specific week in a different color. Thank you!!

On 3/12/2021 at 10:14 PM, marionpgt said:

Hi There!

How can I make today's day in my calendar a different color or filled with the thumbnail image from my blog. When I shrink my calendar to a smaller size, It seems the thumbnail disappear. 

Also is it possible to have a whole week highlighted in a different color? I will be posting videos 5 days and would like to highlight that specific week in a different color. Thank you!!

Can you share link to calendar in screenshot? We can help easier