Calendar with same event daily

Hi, I have a question that you might know the answer to. I want to make the same event box appear every day without it cluttering the calendar view with duplicates. Instead of showing a separate event box for each day, I’d like a single event box that covers the entire month or year. Is there a way to do this? Here is example how it is nowexample

Another thing where to turn on load more button, so we dont have to load 3 months at once?

Best regards

2 Likes

Hi, @user21789 :wave:

You’d like to have a single event card where, the dates are displayed, for example, as April 1-April 30, am I right?

As for the Load More, it’s available only in the List layout, but we’re currently working on its integration to all layouts. Please upvote this request to get a notification once the feature is released - Load More Events button in all layouts

1 Like

Yes I think this is an ok option, so is it something I need to do from googlecalendar or here in widget? (You’d like to have a single event card where, the dates are displayed, for example, as April 1-April 30, am I right?)

And for Load More, yes please we need this asap, because we will have to show events for whole year and than the page will be heavy and long. Or maybe there is an java script for that?

2 Likes

If your events are imported from Google Calendar, unfortunately, it’s not possible to achieve this setup.

For manually added events, it is possible - if the event repeats daily. In that case, you can set a start date (e.g., April 1) and an end date (e.g., April 30) to create the daily recurrence in one event card.

However, there’s no way to properly assign the time to each repetition. If the time is the same every day, you can enable the All Day option and include the time in the event description instead. Just note that the time will only appear in the event popup:

This is the only possible workaround for now. I am really sorry!

Regarding the Load More, there is no way to add it using the JS code. However, we hope the devs will be able to release this feature soon, and we’ll update you on the Wishlist thread :slightly_smiling_face:

1 Like

Ok great. I understand now what you mean. But is it than possible to add manualy one event and the rest from google calendar can I use both at the same time?

The only solution I found is to create one more calendar with manual events. But than I cant add the google location map right?

1 Like

Unfortunately, it’s impossible to combine the manually added events with imported from Google Calendar. The only solution is to use 2 different widgets.

By the way, we have this idea on the Wishlist and you can upvote it here - Combine manually added events with events imported from Google Calendar.

As for the locations, you can add them in the Venues section :slightly_smiling_face:

1 Like

Ok and thank you again for help with this issue! I have upvoted

1 Like

Than I might ask if it is possible in the extra calendar..
to display two different layouts on mobile the grid, and on PC the list layout.

If not than I would like the list layout on both but without thumbnail on mobile, so the box will be 40px in height., so it has the list layout like a banner on mobile ?

1 Like

Could you please specify the name of your Event Calendar widget, where you’d like to implement it?

yes here: cphborn everyday
This will be good layout for mobile


but it looks lkie this now when using list view

1 Like

We’ve added this code to the Custom CSS field:

@media screen and (max-width: 640px) {
 .eapp-events-calendar-list-item-mobile {
  flex-direction: row !important;
  padding: 0 !important;
  align-items: center !important;
 }


 .eapp-events-calendar-list-item-mobile .eapp-events-calendar-list-item-date {
  margin: 0;
  display: flex !important;
  position: relative !important;
  box-sizing: content-box !important;
  height: auto !important;
  align-self: stretch !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
 }

 .eapp-events-calendar-list-item-mobile .eapp-events-calendar-list-item-info {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  padding: 20px !important;
  padding-left: 10px !important;
  gap: 10px !important;
 }


 .eapp-events-calendar-list-item-mobile .eapp-events-calendar-list-item-imageContainer {
  margin: 0 !important;
 }

 .eapp-events-calendar-list-item-mobile .eapp-events-calendar-list-item-info .eapp-events-calendar-category-item {
  font-size: 12px !important;
 }

 .eapp-events-calendar-list-item-mobile .eapp-events-calendar-list-item-info .eapp-events-calendar-list-item-name {
  font-size: 13px !important;
 }

 .eapp-events-calendar-list-item-mobile .eapp-events-calendar-list-item-info .eapp-events-calendar-list-item-locationAndTime * {
  font-size: 10px !important;
 }
 
  .eapp-events-calendar-list-item-infoContainer {
  max-width: calc(100% - 75px);
 }
}

Check it out and let me know if you like the result :slightly_smiling_face:

2 Likes

It is working! Good job thanks!

2 Likes

You’re always welcome :wink: