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?
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.
Thanks for sharing your solution Julius!
Please login or Register to submit your answer