How to Use Sugar Event Calendar with Genesis Themes

Sometimes you need to have a simple calendar of events on your WordPress website. This tutorial will show you how to use Sugar Event Calendar by Pippin Williams with Genesis 3.4.0 Sample theme.

sugar calendar after CSS edits
Styled Event Calendar

I’ve used this calendar plugin on several websites, and because Pippin uses minimal styling in his plugins, the calendar just picked up the styles from the theme, and looks pretty great, as installed. But with the Genesis Sample CSS, the calendar header and select fields can use a few tweaks, so I want to share a few quick tips to get it looking beautiful in your Genesis child theme.

There are many WordPress event calendar plugins both free and premium; some have lots of features, but are very complex to use. Sugar Event Calendar is a really simple, but flexible events calendar plugin. The link is for the premium plugin, but a lite version — Simple Event Management – Sugar Calendar (Lite) — is available in the WordPress plugin directory which may be all you need.

This plugin creates a calendar page with your events and also creates an events archive page with event custom posts listed by date of occurrence. The premium plugin has some additional widgets, so you can have a smaller calendar, a list of events, and a list of event categories in your sidebar. If you need to show the event location, there is also a Sugar Event Calendar – Google Maps add-on available for download from the WordPress Plugins page. If you want to take registrations for your events, there is a Gravity Forms add-on, as well.

Install Sugar Event Calendar (Premium or Lite)

You can get the lite version of the plugin in the WordPress plugins directory. Install and activate it as usual. If you use the premium plugin, you will get a zip file to download. Then you can upload this zip file to your WordPress install using your WordPress menu, Plugins > Add New, and then choose Upload. Activate the plugin.

Add A New Event

You will see a new Events section in your WordPress menu on the left. Click it to add new events. Add at least one new event.

There is a new Event Details section at the bottom of the page for the event date and time. You can hover over the words Event Details and drag this section up just below the WordPress editor, if you like.

Add a Calendar Page and an Events Archive Page

  1. Click on Page and then on Add New in your WordPress menu. Give the page a title like Calendar or Events Calendar (it can be anything you like).
  2. Add the sc_events_calendar shortcode
    calendar-shortcode
    to the content editor area.
  3. Choose the Genesis layout you prefer. (I like to use the full page layout for the calendar or you can choose a single sidebar layout.)
  4. Save the page.
  5. Create a second new page, and give it the title Events, so that the permalink slug is /events. Note that the slug must be /events. This is your events archive page.
  6. You can use your default layout for this page; save it.

Now view the Calendar and Events pages you just created.

404 Error?

When you view your new pages, do you see them or do you get a 404 error? If you have a 404, you need to flush your WordPress permalinks.

In your WordPress menu on the left, you can click on Settings > Permalinks. And then you can click the Save Changes button. Then you should be able to view both pages. (Also your Permalink Settings should have a setting selected that is NOT “Plain”.)

View Events and Calendar Pages

The Events page should pick up your Genesis Sample child theme styles, and the single events should look great, as well.

But the Calendar Select fields have missing info!

sugar calendar before CSS edits
Sugar Event Calendar in Genesis Sample Default

So let’s fix it.

Let’s Style the Calendar

The section of code in the Genesis Sample theme’s style.css that causes the month and year select boxes to appear empty is the “width: 100%” line in the Forms section. There is also too much padding on the Select fields.

/* Forms
--------------------------------------------- */

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #333;
	font-size: 18px;
	font-weight: 400;
	padding: 15px;
	width: 100%;
}

You can add some CSS to the WordPress Customizer — Appearance > Customize > Additional CSS — or edit your styles.css. If you edit your stylesheet — style.css, you can add this CSS at the bottom of the Plugins section.

Give the select Select fields in the calendar a width of auto, add a max-width, and less padding:


/* Sugar Calendar
--------------------------------------------- */

#sc_events_calendar_head select {
     padding: 4px;
     width: auto;
     max-width: 50%;
 }

So with three easy CSS edits, you have a beautiful events calendar!

sugar calendar after CSS edits - header only
Event Calendar after edits

Wider Calendar

If you theme supports a wide width block, you can make the calendar wider.

  • First add a Group Block to the page.
  • Select the Wide Width on the Group Block.
  • Then add a Shortcode Block inside the Group Block.
  • Next add the Sugar Calendar Shortcode – see above.

And this is the beautiful corresponding calendar with all the Select fields in one line.

sugar calendar in a wide width group block
Event Calendar inside a Wide Width Group Block

So now you have a simple, but beautiful Events Calendar for your website!

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

3 responses to “How to Use Sugar Event Calendar with Genesis Themes”

  1. Butterfly says:

    Really this blog is very nice, very easy understandable and good informative. Thanks for nice post

  2. Tony says:

    Thank you! Any suggestions how to make it mobile responsive?

Leave a Reply

Your email address will not be published. Required fields are marked *