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.

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

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.

<code>/* Forms
--------------------------------------------- */

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

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:

<code>/* Sugar Calendar
--------------------------------------------- */

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

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

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.

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