Support » Plugin: Simple Calendar - Google Calendar Plugin » [Plugin: Google Calendar Events] List of events in a Table?

  • Resolved Mike Walsh


    Do you have any plans to add a list of events table? If not, do you accept contributed code?

    I have a need to have a list of events in a table with the same basic information in the event list but in columns. I looked at the code and it looks pretty straight forward to build on the event list to output the information as a table. I’d be happy to take a pass at it if (a) this isn’t something you’ll get to anytime soon and (b) if there is a chance it will make it back into the plugin.

    For the event list, any chance of adding classes so I can style events in the past differently than events in the future (e.g. strike through events that have already happened)?

    Oh, one more question – is there a way to order the event list in reverse chronological order?



Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Contributor Ross Hanney


    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]

    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.




    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!

    Plugin Contributor Ross Hanney


    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.

    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.

    Plugin Contributor Ross Hanney



    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.


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

    for anyone’s future reference

    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?

    Plugin Contributor Ross Hanney


    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,


Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Plugin: Google Calendar Events] List of events in a Table?’ is closed to new replies.