Is there a way to showcase next month?

Ask the Community General Questions
1

The only thing I DON’T like about this app is, unless I’m missing something, there is no apparent way for viewers to see the upcoming month on the app. My website has video lectures scheduled on certain days. I need people to be able to see what’s happening NEXT MONTH so they can make reservations for our lectures in a timely fashion.

2

Hi there @Property_Restoration :waving_hand:

I wanted to bring you good news – we have an option to scroll to the next month in all our Event Calendar layouts :tada:

Here are the pagination buttons in the Month layout you’re currently using:

image
image547×550 120 KB

They’re quite similar to the background colour, and I think this is the reason you might have missed them :slight_smile:

To make the buttons more noticeable for the clients, I suggest that we use a CSS code to change the color of the navigation arrows. This one colors buttons yellow with a black arrow:

.fc-button.fc-button [class*="fc-icon-chevron"] {
  color: black !important;
}

.fc-next-button.fc-button.fc-button-primary {
  background-color: #ffeb00 !important;
}

.fc-prev-button.fc-button.fc-button-primary {
  background-color: #ffeb00 !important;
}

Please paste it in the Style → Custom CSS section and let me know if it’s looking better.

We can make changes to the appearance of the widget to your liking, so please share your feedback :hugs:

1 Like
3

Share your use case and provide as many details to support your idea as possible. Thank you! :blush:I have the calendar over a map picture. And the navigation arrows on the MONTH indicator are not very visible. And worse, they look like they are slightly masked. Our website targets the Senior citizen population. They need to be able to see the Month and those arrows clearly. I should be able to change the size and color of them. I can make the font size bigger everywhere BUT the Month and the month changing arrows. And the yellow is not very vibrant. It looks pastel….

5

Thank you for sharing your concerns – this really helped me understand your case and prepare a solution for you :raising_hands:

While not every customization can be done via widget editor (we already took note of it :writing_hand: ), we can use more advanced tools like custom CSS codes from our dev team. Here’s what I did to make your Event Calendar more readable:

  • made the month name font bigger.
  • removed opacity for most elements.
  • coloured arrows in brighter color,
  • made the background less bright to create contrast.

And here’s what the widget looks like now:

image
image1307×762 354 KB

I hope you like the visuals more this way :slight_smile:

All thanks to the special code in the Style → Custom CSS section:

.fc-toolbar-title {
  font-size: 30px !important;
}

.fc-prev-button {
  margin-right: .75rem;
}

.fc-button.fc-button [class*="fc-icon-chevron"] {
  color: black !important;
}

.fc-next-button.fc-button.fc-button-primary {
  background-color: #ffeb00 !important;
}

.fc-prev-button.fc-button.fc-button-primary {
  background-color: #ffeb00 !important;
}

.fc-daygrid-day-number {
  opacity: 1 !important;
}

td.fc-daygrid-day.fc-day {
  box-shadow: #ffeb00 0px 0px 0.5px 0.5px inset !important;
}

The changes are saved in the widget editor, but wasn’t publish yet. If you like the look of the widget, don’t forget to click the green Publish button at the top right.

But don’t hesitate to request more customizations – I’m happy to help further :hugs:

1 Like