SIGN UP

Has anyone had problems with the Calendar View and Divi theme?

By: Julius hernández | Asked: 05/17/2023
Forums › Category: General questions › Has anyone had problems with the Calendar View and Divi theme?
0 Vote Up Vote Down
Julius hernándezJulius hernández asked 2 years ago

I'm using Divi theme (not to my pleasure) and I set the Calendar view as usual. But the side links to change to previous and next month don't work. It only scrolls down a little and stops. It's only possible to change month selecting it in the dropdown.

I found they're aware of that in the docs, in this page:

Common problems#
If the page slides when the click a previous or next month link, and the page does not change, this indicates a conflict with your theme (like Divi). The easiest solution is usually to turn off smooth scrolling in your theme.

But turning off Smooth Scrolling in Divi doesn't solve the issue. I ask for help in Formidable Desk and the AI assistant said:

1. Go to your WordPress Dashboard and navigate to Appearance > Customize > Additional CSS.
2. Paste the following code in the text area: .et_pb_fullwidth_header_0 .et_pb_fullwidth_header_container:before,
.et_pb_fullwidth_header_0 .et_pb_fullwidth_header_container:after {
content: none !important;
}
3. Click on Publish to save the changes.

This code will remove the pseudo elements that are causing the issue with the calendar view in Divi.

It didn't work either. Then I talked to a human in Formidable Desk and they asked me to explore my website, and they found that there is not working and they don't have a workaround for this in Divi.

They apologized, but left me without a solution.

Has anyone else found this issue? What do you recommend to solve this?  

1 Answers
0 Vote Up Vote Down
Julius hernándezJulius hernández answered 2 years ago
Well, never mind, I found a workaround. I implemented this JS code: 
document.addEventListener('DOMContentLoaded', function() {
  var previousLink = document.querySelector('a.frmcal-prev');
  var nextLink = document.querySelector('a.frmcal-next');
  if (previousLink) {
    previousLink.href = previousLink.href.replace(/#.*/, '');
  }
  if (nextLink) {
    nextLink.href = nextLink.href.replace(/#.*/, '');
  }
});
  This script removes the #frmcal-1411 part (1411 in my case, is the id of my Calendar view) of the links, and transforms them from:   https://mysite.com/calendar/?frmcal-year=2023&frmcal-month=04#frmcal-1411 to: https://mysite.com/calendar/?frmcal-year=2023&frmcal-month=04   And with that, the issue is solved. I'm sharing in case that in the future anyone comes across to this problem.
Jared Elvidge replied 1 year ago

Thanks for sharing your solution Julius!

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right