Calendar Look Customization

Hi @plantitagain,

Thanks for using The Events Calendar on your site!

The plugin automatically creates a calendar at https://plantitagain.org/events.

You can add this page to your navigation in place of the /upcoming-events page that is there now (the one created with Elementor), or, you can head to Dashboard > Events > Settings > General and change your Events URL slug to upcoming-events to make the default calendar appear there.

It looks like your site uses List as the default view. If you prefer to initially show a grid/month-view, you can change that under Dashboard > Events > Settings > Display: Default view.

As a non-profit, you can check our our Non-Profit Program. If approved, you can receive a free copy of our Pro plugin, which allows you to place your calendar anywhere via a shortcode.

I hope this is helpful!

• This reply was modified 3 years, 8 months ago by Erica.
• This reply was modified 3 years, 8 months ago by Erica.

Hi @eeide!

Thank you for your response! I suppose it never occurred to me that The Events calendar page could be imbued in the website. Before I go with that option (it’s not my first choice just because it changes the page titles/website header and makes them gray and a different font), could you clarify the events URL slug? I tried using “upcoming-events” like you said but this message pops up

Your form had the following errors:
Events URL slug must be a valid slug (numbers, letters, dashes, and underscores).
The above setting was not saved. Other settings were successfully saved.

Do you know how to change that? I made the default view month like you suggested, but once I change the event slug how do I add it to the page in place of the /upcoming-events page that is there now? I will also check out the nonprofit program. Thanks!

Hi @plantitagain,

You’re so welcome!

It sounds like perhaps you added “upcoming-events” including the quotation marks? Please try again using just upcoming-events with no space and no quotes (screenshot showing this).

If that doesn’t work, you may need to first remove your existing Upcoming Events page (either change the slug for that page, or fully delete the page), because it’s already using the upcoming-events slug.

Once the new upcoming-events slug is saved under Events > Settings > General, the full calendar will appear there automatically.

Let me know how it goes!

Hi @eeide!

I did it exactly as you said and it wouldn’t work. I even deleted the Upcoming Events page but it still popped up with the error message…until somehow it magically fixed itself and worked? Now when you clicked on the “upcoming events” tab it takes you directly to the Events Calendar calendar. So yay! Would you happen to know how to customize the look of the calendar without coding/CSS? I’m afraid I’m terrible at both. Also, the page tabs at the top of the calendar are different than the website’s normal page tabs, is there a way to change it so it still looks like you’re on the same page? Thank you so much for your help!!

@plantitagain,

Great, I’m glad that’s working for you now! Most likely, the old pate/content was cached in your browser, and it took a bit of time for that to clear out.

Sure! There are a few easy ways to change the look of the default calendar, without knowing CSS.

First, for the header design (the navigation menu in your page’s header), go to Dashboard > Events > Settings > Display and select Default page template under Events template. This should restore your site’s header on your Upcoming Events page.

Next, while you’re at Dashboard > Events > Settings > Display, try toggling to Skeleton Styles under Default stylesheet used for events templates.

We have more information on these settings in our Default Template Settings Knowledgebase article.

If these changes don’t help, or you’d like to customize the design of your calendar further, we continue to add more options to the WordPress Customizer. You can access that by visiting Dashboard > Appearance > Customize > The Events Calendar.

We occasionally update our Knowledgebase with additional CSS articles and snippets, available at this link.

The changes mentioned above should give you a great starting point!
Keep an eye on our Release Notes to see when new styling options are added to the Customizer, and your calendar will be looking awesome in no time!

@eeide, you’re an angel! I couldn’t get the menu header to change but that’s okay because I got to customize everything else! Thank you so much for your time and help. Have an amazing day!

@plantitagain

Aw, thanks! ??

You’re very welcome!