[Plugin: Google Calendar Events] List of events in a Table?

Hi Mike,

I don’t have specific plans for any extra layouts, but I do plan to work on a way of making it easier to hook your own custom layouts into the plugin (there’s no ETA for this at present though, I’m afraid!).

However, you could probably achieve what you’re looking for by using the existing list output with some extra CSS, to make it look like a table.

The event display builder feature of the plugin provides conditional shortcodes, including [if-ended]...[/if-ended], which outputs the information contained within it only if the event has ended. You could use it like this, for example:

[if-ended]<div class="ended">[/if-ended]
[if-not-ended]<div>[/if-not-ended]
[event-title]
...
</div>

This would allow you to style past events differently.

You can change the ordering of events by adjusting the order parameter of the [google-calendar-events] shortcode, like this:

[google-calendar-events type="list" order="desc"]

Or if you’re using the widget, there’s an option to change the order in the widget settings.

Let me know if you have further questions.

Ross.

Wondering if there is a way to modify the layout of the days to go from Saturday to Sunday rather than Monday to Sunday? Thanks!

Hi Max,

Do you mean so that the week start day is Saturday? If so, this is controlled by the “Week starts on” option, which is located in Settings > General.

Yup, nice and easy. Thx

Hey Ross,
I was hoping you might briefly expand on the thought of using CSS to create columns in conjunction with the event display builder. I tried creating a table with an unsorted list and CSS, but the results were riddled with unexpected errors. Any insight would be greatly appreciated.
Tommy

I saw this article in my News Feed the other day and thought about applying it to this problem as I have never gotten back to my original problem to work on it.

The article shows how to use Justin Tadlock’s Grid Columns plugin to create columns of content.

Mike, I’ll check this out as well. I tried using a similar plugin Easy Columns but the shortcodes where not coming through when I used them in the event display builder.

I’m thinking, perhaps if I built 4 calendars, one for each category and then referenced these calendars for each column within the page layout…as long as I could limit when the display of the date to the first calendar…IDK.

Hello,

To make the page list look like a table using CSS, I’d use something like the following in the event display builder field:

<div class="gce-cell event-title">[event-title]</div>
<div class="gce-cell start-date">[start-date] - [start-time]</div>
<div class="gce-cell end-date">[end-date] - [end-time]</div>
<div class="gce-cell location">[location]</div>
<div class="gce-cell description">[description]</div>

and the following CSS:

.gce-page-list .gce-list {
	list-style: none;
	display: table;
	border-collapse: collapse;
	width: 100%;
}

.gce-page-list .gce-list li {
	display: table-row;
}

.gce-cell {
	display: table-cell;
	border: 1px solid #333;
	padding: 5px;
	width: 10%;
}

.gce-cell.description {
	width: 60%;
}

That should produce a basic table, but it might need tweaking to suit your exact needs.

Let me know if you have further questions.

@ross

This is similar to what I was trying to accomplish, but admittingly you’re writeup is much simpilar and more effective. After some minor tweaks got it looking good.

Thank you!!!
Tommy

for anyone’s future reference
https://lasportsworld.com/adult/schedule/

I am not a programmer but I can find the php code for the Google Calendar Event List. I am usins a list and I would like to not show the end time on the widget list.
e.g. The ends information is liske “Ends: June 13,2013”

Can you tell me where to change your code please?

Hi George,

You don’t need to edit any PHP code to do this. The information that is / isn’t displayed for each event can be configured in the plugin settings, under “Display Options”.

Thank you not only for the brilliant code and program but for the very, very fast reply.
It is all now working as I wished it to be,

George