Increasing the amount of characters in the header on the "Month" view of the calendar?

Ask the Community General Questions
1

  • Issue description:
    This question is for the Elfsight Calendar. Our client would like to be able to show the entire title. They want to use the “Month” view of the calendar. However it cuts of part of the title making it so the users of the calendar have to click each date to see what is going on rather than just be able to glance at the events. Any way to increase the viewable characters in the title on the month view of the Calendar?

  • Link to the page with the widget in question:

1 Like
3

Hi @Nancy_Lerma, happy to have you here, welcome! :raised_hands:t2:

We’re already looking into this for you, I’ll get back to you here a bit later :slight_smile:

Thanks for the link, it was super helpful!

4

@Nancy_Lerma, here I am with the solution!

Could you please add the CSS code below to your widget’s Custom CSS field and let me know if it worked?

.eapp-events-calendar-calendar-component
.fc-daygrid-event {
  white-space: normal;
}

You will find the Custom CSS field on a widget’s Appearance tab:

image
image394×509 9.75 KB

5

Hi Helga…yes that did work! Thank you very much. Is there a way to insert Month header Break in between the end of a month and the start of a new month. So like “August” and then it shows all of August and then September etc?

1 Like
6

I’m happy the code worked!

Hmm, do you mean a calendar should start with the current day rather than the first day of the month (for example, if today is August 5th, the calendar would start on August 5th)? And then, would it show the next month’s name and all the events together?

If not, any details or screenshots will be very much appreciated :slight_smile:

7

the calendar could still start on the first of the month. The problem is that the months run together so the client would like to have something that differentiates the starting of a new month.

8

Or maybe just show the current month and then when you click the next arrow it shows the next month (the whole month). I think the problem is that the calendar months just run together without any seperation.

1 Like
9

2024-08-05_13-32-50
2024-08-05_13-32-50464×695 17.1 KB

Also, This is what the calendar looks like on a mobile. Is there any way to fix this? You can’t read any of the information.

10

Thanks a lot for the details! I’m afraid there is no option to make it with the help of CSS, but your idea sounds really nice, and I’ve added it to our Wishlist: Separate months in the Month layout. If other users find it interesting, chances are we’ll consider it for our future updates :slight_smile:

I’m really sorry about the mobile view. Our devs are already on it, I’ll get back to you with a fix a bit later :raised_hands:t2:

11

@Nancy_Lerma I’ve shared a solution for improving the mobile views in the wishlist: Mobile display for Monthly schedule style - #23 by Max

Just in case, I’m duplicating the code here. Could you please try to add it to your widget?

.eapp-events-calendar-calendar-component .fc-daygrid-event {
  white-space: normal;
}
@media screen and (max-width: 480px) {
  .fc-event-title {
    height: 22px;
    font-size: 8px !important;
    word-break: break-all;
    padding: 0;
  }

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

  .fc-daygrid-event {
    white-space: normal;
  }
  
  /* Widget Margins */
  [class*="WidgetBackground__Container-sc"] {
    padding: 4px;
  }
}