Set Up a 30 Boxes Calendar on Your WP Blog

4 Comments

A recent project brought me to search for a fresh, clean, exportable online calendar system. The project was for a church site, and the church site was (of course) built on WordPress. Here’s a look at the process I used (thought it’s probably not the only way) to bring live data into WordPress from a 30 Boxes calendar.

What is 30 Boxes?

30 Boxes is an excellent online calendar system, comparable in my experience to Google Calendar, except even more flexible. If you have a need for a calendar, I would encourage you to check out 30 Boxes. It’s working out really well for the church (my church, actually) for some time with few complaints.

Grabbing Code from 30 Boxes

30 Boxes Screen 01

Look for the selected area above—this is your code. Copy and Paste this into your theme.

Obviously you will need a 30 Boxes account. Sign in to your calendar and click on Settings in the top right. Navigate to Sharing and look for the option to Copy and Paste the Javascript/HTML Badge. Be sure and choose the calendar without Web Stuff.

Ignore the CSS—we’re going to be styling this ourselves. Delete everything in between the <style> and </style> tags.

Adding the Calendar via Widgets

Probably the easiest way to add new information to your sidebars is by using sidebar widgets. If you don’t use widgets on your blog, look one section below.

For those of you who do use widgets can follow these directions.

  1. First, add a text widget to the sidebar of your choice.
  2. Name your calendar and Paste the code from 30 Boxes into the widget body.
  3. Hit save.

Adding the Calendar Without Widgets

Head into your sidebar file via the Presentation tab on your Dashboard. Paste in your 30 Boxes code. Anywhere will do, as long as it’s within the <div id=“sidebar”> tags.

So 30 Boxes is pumping a lot of information into your site. Great, right? Except you probably don’t want all that information. Since we don’t have full control of the semantics here, we’re going to have to take some of that control in the layout. This isn’t exactly ideal, but forgivable in this instance.

With our styles we want to do the following:

  • Strip away information we don’t want.
  • Create a psuedo–list out of the unformatted text.
  • Experiment and dress it up a bit.

So let’s get started.

Strip Away the Fat

In this case, the fat is information overload. The structure of the code you’ve inserted into your page looks something like this:


<div id="thirtyBoxes">
<div class="header">30 Boxes //<br />
<a title="Visit user's 30 Boxes page" href="url">User</a></div>
<div class="eventBlock" title="Click for more information" onclick="javascript:location.href='url';">
<script type="text/javascript" src="url">
</script>
</div>
<div class="footer">
<a href="http://30boxes.com">get organized with 30 Boxes!</a></div>
</div>

We have a couple of options here. What is completely editable is the information outside of the Javascript—namely the divs and a couple of links.

Keep the User Informed

The first thing I would do is get rid of the Javascript onclick command within the div classified eventBlock. Leaving this would mean that clicking anywhere in your calendar display would send someone to your 30 Boxes calendar page. I don’t like this, since it sends each link to the same page, and there is no indication to the user that they are about to travel from the page.

Brand Your Own Calendar

Now, we’ll work from the top down. First get rid of the reference to 30 Boxes. We’re very grateful they created this tool for us, but we don’t want to advertise for them any more than we have to. I shuffled around the header div to look like this:


<div class="header"><a title="Visit user's 30 Boxes page" href="url">Upcoming Events</a></div>

I would also suggest changing the a href completely to h3s. It’s personal preference, really.

Displaying Your Number of Events

Next, let’s make sure that the calendar displays as many events as you want it to display. Initially the calendar should display five events, according to the piece of Javascript within eventBlock that says numEvents=5. To change the number of events that display on your page, simply change that number to any number you wish. I would suggest 3, 5, 7, or 9. They just seem like good numbers.

Link to your Calendar

Finally, the footer currently links back to 30 Boxes. You probably don’t want that either (I didn’t). Adjust the following code:


<div class="footer">
<a href="http://30boxes.com">get organized with 30 Boxes!</a></div>
</div>

To look like this:


<div class="footer">
<a href="url">View our full calendar</a></div>
</div>

Or get rid of the code completely. It isnn’t necessary for the Javascript to work, and unless you change it will just link people away from your page.

Using CSS to Turn divs Into Lists

When we can’t have a list, we want to make it appear as though it is a list. The elements we have to work with are divs, and they have the following ids and classifications:

#thirtyBoxes
This wraps the entirety of the code.
div#thirtyBoxes div.header
This targets the header, no matter what you have sitting in there.
div#thirtyBoxes .eventItem
This wraps each calendar event, and will be what we want to turn into pseudo–list items.
div#thirtyBoxes .eventDate
Not surprisingly, this sits around only the date of each event.
div#thirtyBoxes .eventSummary
Wraps around the summary of each event.

First we’ll turn it into a list, and then I’ll go into a couple of ways we could make this listing look very different.

Right now you probably have a pretty boring list. To liven it up, first add the following to your CSS:


div#thirtyBoxes .eventItem {
margin:1em 0 0 1em;
font-size:.9em;
}

This should give you some nice spacing in between events. Next, let’s put the date and the event on different lines.


div#thirtyBoxes .eventDate {
display:block;
}
div#thirtyBoxes .eventSummary {
display:block;
}

Setting both the eventDate and eventSummary to display:block will put each on its own line. Now it’ starting to look more like a list, even though there aren’t any bullets. Let’s fix that now.


div#thirtyBoxes .eventDate {
display:block;
background:url('images/icon-cal.gif') center left no-repeat;
padding-left:15px;

}

In my case, that referenced a small icon I planned on using for the calendar. Use whichever image you want, but drop it in that location for the desired list effect.

Now, to put some finishing touches on the style, let’s differentiate the event dates from their descriptions.


div#thirtyBoxes .eventDate {
display:block;
text-transform:uppercase;
background:url('images/icon-cal.gif') center left no-repeat;
padding-left:15px;
}

Completed Code

Finally, you should have the following styles. And if you don’t, you can always just copy pieces of mine.


div#thirtyBoxes .eventItem {
margin:1em 0 0 1em;
}
div#thirtyBoxes .eventDate {
display:block;
text-transform:uppercase;
background:url('images/icon-cal.gif') center left no-repeat;
padding-left:15px;
}
div#thirtyBoxes .eventSummary {
display:block;
}

Now you have what appears to be a decent looking list. But that’s not the only way to go about it.

Other Options

30 Boxes Screen 02

The above screen is taken from the final product on my church’s site. Link goes to the home page.

  • Display only the events or only the dates of upcoming events.
    If you want only one or the other (for whatever reason) just change display:block to display:none.
  • Make it look like a calendar.
    This one would be pretty intense. If you have events every day it would be easier—just make each div look like a box. I would be interested in a use of 30 Boxes that way. Of course, if you’re going to do that you might as well use their iframe calendar option (see below).

Related Information

If you found this useful, there are a couple of other tidbits regarding 30 Boxes calendars that you may find useful.

  • First of all, a calendar may easily be added using an iFrame on any page. Instead of choosing the Javascript Badge on the 30 Boxes Settings page, opt for the Calendar Widget. Drop it into any WordPress page and watch it work.
  • Display only certain categories by using tags and creating Custom Views on the 30 Boxes Settings page.

4 thoughts on “Set Up a 30 Boxes Calendar on Your WP Blog

  1. Could you post a link to the calendar on your church’s website? (Or did I miss it?)

    Thanks for the tutorial. I may be looking to do exactly what you’ve prescribed for my church.

  2. Did it for you Blake, no problem. See this link if you don’t want to visit the site to get there.

    Hey, and keep me informed on your progress with your church site. I’m interested!

  3. Well maybe this is a hard thing to do but im Stuck trying to display 30boxes data in my website basically i dont understand how send parameter to 30 boxes to display the right data. What i want is to embed some code in my page and it display same info as the “Event List Page” or grouped Plain text data like

    October 31

    11:00 am Big Club Event in Ibiza
    This is the description of the Event

    12:00 pm Arrival of the Cool Girls
    More description

    November 1 …

    Do you know where i can get this info ?

    THANKS MAN

Comments are closed.