Calendar Look Customization

  • Resolved plantitagain

    (@plantitagain)


    4 years, 10 months ago

    Summary: Please help me change the visual of the calendar so that full event title can be read

    Hi all! My name is Olivia and I’m representing nonprofit Plant It Again. I’ve been working on our website trying to add a calendar so that people can sign up for classes. I figured out how to add the calendar using Elementor (I am going to call this the Elemnetor Calendar) but visually it’s not what I’m looking for, mainly because event titles are cut off. That is a problem as I don’t want any customers to have to click on each event date to see what is happening that day, I would like the full title displayed so it can be easily read.

    I noticed when you click on the event title, then go to “more events” it takes you to a new page where the calendar looks different (I’m going to call this the Events Calendar page). This calendar displays the full title and time and if you hover over it the beginning of the description pops up. I would very much like this calendar style to be the one we use on the website instead of the Elementor one I am using now. Problem is, I can’t figure out how to make that change! Does anyone know how to make the Event Calendar show up on the website, or change the Elementor Calendar so the full title is shown?

    The link below is just a Google Doc with screenshots of the Elementor Calendar and the Events Calendar so you can see the difference: https://docs.google.com/document/d/1iM8GUoC3HsJcad5IfHqGPqVV-p_D2K1vKJfJ9kSRRG4/edit?usp=sharing

    I realize this might be an easy question but I’ve never worked with websites before and I have no experience in coding. Thank you to anyone to advance who can help me!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Erica

    (@eeide)

    4 years, 10 months ago

    Hi @plantitagain,

    Thanks for using The Events Calendar on your site!

    The plugin automatically creates a calendar at http://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 4 years, 10 months ago by Erica.
    • This reply was modified 4 years, 10 months ago by Erica.
    Thread Starter plantitagain

    (@plantitagain)

    4 years, 10 months ago

    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!

    Erica

    (@eeide)

    4 years, 10 months ago

    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!

    Thread Starter plantitagain

    (@plantitagain)

    4 years, 10 months ago

    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!!

    Erica

    (@eeide)

    4 years, 10 months ago

    @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!

    Thread Starter plantitagain

    (@plantitagain)

    4 years, 10 months ago

    @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!

    Erica

    (@eeide)

    4 years, 9 months ago

    @plantitagain

    Aw, thanks! 😀

    You’re very welcome!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Calendar Look Customization’ is closed to new replies.