Spellhammer

As Jonathan said it could be a cache/minification issue, but if only enabling Elementor Pro triggers it, it’s a bit confusing.

The main JS error which probably causes all of the others in the console is because some weird HTML is getting injected into the Pie Calendar handler for closing the popover with the escape key:

window.addEventListener('keydown', (e) => {
            if( e.keyCode == 27 <font color=#D9D9D9><font color=#D9D9D9>|</font></font><font color=#D9D9D9><font color=#D9D9D9>|</font></font> e.key == 'Escape' ) Alpine.store('calendarEngine').showPopover = false;
})

Because this is invalid JS, it breaks everything else after it. Do you have any idea where these <font> entities are coming from? I can’t imagine why they’d be injected here, or why Elementor Pro would be using a deprecated HTML tag like this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font.

Hopefully this provides some clues as to some setting, modification, or add-on that might be present which causes Elementor Pro to inject these tags where it shouldn’t. Let us know what you find.

Also, it’s not clear if you were able to reproduce the breakage with ONLY Pie Calendar, Elementor, and Elementor Pro active? If the issue doesn’t occur with only those three plugins active, it could be caused by an add-on or other plugin that’s interacting with the markup generated by Elementor Pro.

Wanted to chime in here.

I did get access to an Elementor Pro install, but it was running an older version. I encountered no issues there.

The warnings you shared seem to indicate one of the queried posts is missing its start date, which normally shouldn’t be possible: the meta query only returns posts where this value is set. Are you using the piecal_event_query_args filter to alter the query perhaps?

More info as Jonathan requested above would be super helpful so we can figure out what’s happening here.

Hey @alexis14, thanks for taking the time to leave some feedback!

Your notes about the onboarding process (e.g. links to documentation, etc…) are well noted. We’ve aimed to keep the plugin as simple and unobtrusive as possible, but that does leave some question marks if you don’t happen to find docs.piecalendar.com. This is something we’ve been in discussions about improving, but we’re trying to be strategic to avoid adding to admin notice spam or hijacking the admin panel like some popular plugins do.

As far as translations, this is an area we’ve been primarily focused on in terms of making sure it’s translatable using something like LocoTranslate. We’re hoping to ship native translation files eventually, but can you provide an example of another plugin that handles translations in the way you’d like to see Pie Calendar handle them? We always like looking at well established examples when making improvements.

Finally, you can control which post types the Pie Calendar controls show up on via a simple filter. It’s outlined here: https://docs.piecalendar.com/article/25-show-pie-calendar-meta-box-only-on-specific-post-types. I hope that’s helpful and allows you to get even more use out of the plugin!

Hey Dave,

Since we haven’t heard back in a couple of weeks, I’m going to mark this as resolved. But please feel free to reply here (or open a new thread) if you run into more issues.

24-hour time format is supported, but there’s some manual intervention required.

The date/time format used on the calendar itself is determined by your site’s language or the “locale” attribute on the piecal shortcode. If you choose a locale that uses a 24-hour clock, e.g. en-GB, it will display times in a 24-hour format on the calendar itself.

[piecal locale="en-GB"]

To set the times in the popover (that appears when you click an event) to use 24-hour format, you’ll need a code snippet:

add_filter( "piecal_locale_date_string_format", function( $format ) {
	$format['hour12'] = false;
	
	return $format;
}, 10, 1);

Hey @shiksa, thanks for the kind words!

Is it possible to change the background colour for the entire calendar (to black)?

There are two easy options to do this:

• Put the shortcode inside of a container and change the background color on the container. The exact process will depend on if you’re using a page builder, custom blocks, vanilla Gutenberg, etc…
• OR, you can target .piecal-wrapper with some custom CSS and set its background color:

.piecal-wrapper {
    background: black;
}

Hope this helps!

Hey @elaraweb,

Since we haven’t heard from you in a few days, I’m going to mark this as resolved.

If you’re still having trouble, feel free to email [email protected] so we can take a more thorough look at this for you.

Hey @pagallery,

Sorry for the miscommunication. I told Jonathan the wrong thing.

Our [piecal-info] shortcode uses the WordPress date & time format by default, and we plan to implement this elsewhere, but haven’t yet.

We use toLocaleDateString to display the dates in the calendar, which means as long as your site’s locale is set to en-GB, the format should be correct.

I think we might have a bug where the -GB part of the locale gets stripped, though, so please try using this shortcode:

[piecal locale=”en-GB”]

In my tests this worked as expected.

Hey there!

Thanks for the report. This looks to be caused by the default “posts per page” limit in WordPress, which is usually 10. You can change it under Settings > Reading > Blog Pages Show At Most in the WordPress admin panel, but we’ll also be correcting the query that returns posts for the calendar so it’s not beholden to this limit. That fix should be out as an update to Pie Calendar Free very soon.

The next update will also include a filter to change the $args for the event query as a whole, so if returning all of your events is a performance issue, you’ll have an option to limit the number of posts in whatever way you’d like.

PieCalendar is really great in its simple and efficient way to show the events, thanks.

Thanks for the kind words!

I need a small calendar on the sidebar. Minimalist. It doesn’t need to show the time or the title of the event inside the cell, only the dot.

We’ll add it to our feature request list and take a look at the technical requirements for making this possible.

By the way, my shortcode is [piecal locale=”pt”] but some places are still in English. The floating box STARTS/ENDS didn’t change, how can I translate this? (Sorry about bringing 2 subjects).

You should be able to translate these strings using something like Loco Translate.

Hey @schacham,

To change the background color & size of the next/previous buttons at the top of the calendar, you should be able to use some CSS like this:

.fc-toolbar .fc-prev-button,
.fc-toolbar .fc-next-button {
    background: black;
    padding: 16px 32px;
    color: yellow;
}

For manipulating the styles of the day cells in the normal grid view, you can use a selector like this:

td.fc-day {
    height: 150px;
}

Is there some manual to help to format with CSS?

Not yet, but I’d be glad to advise if you can tell me the specific changes you’d like to make.

To change the language of most aspects of the calendar on the front-end, try using a two-character locale code: [piecal locale=”pt”] should work to translate the calendar’s UI (with a few exceptions) into Portuguese.

The next version of Pie Calendar will have more robust support for string translation, allowing you to translate the rest of the plugin’s strings (including those that don’t change when the locale code changes) using something like Loco Translate.

Hey Fraskeke,

I used the parameter local=”es” in the shortcode and only translate the calendar but that kind of words in the popup when you clic on a post you can’t translate even with Loco Translate

Unfortunately, this isn’t possible just yet, but string translation is one of our top priority items for the next release.

Hey Fraskeke,

Thanks for the kind review!

We will be implementing better accommodation for string translation in the next update.

For now, can you please try adding the appropriate two-letter locale code to the locale attribute in the piecal shortcode? It would look something like this:

[piecal locale="es"]

As far as the date format, that’s definitely something we’ll look into while we’re working on I18N in general, which is a top priority for us in the next version.