Ready to get started?Download WordPress


Google Calendar Events
[resolved] List of events in a Table? (13 posts)

  1. Mike Walsh
    Posted 2 years ago #

    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?




  2. Ross Hanney
    Plugin Contributor

    Posted 2 years ago #

    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.


  3. Max
    Posted 2 years ago #

    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!

  4. Ross Hanney
    Plugin Contributor

    Posted 2 years ago #

    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.

  5. Max
    Posted 2 years ago #

    Yup, nice and easy. Thx

  6. pinballw
    Posted 1 year ago #

    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.

  7. Mike Walsh
    Posted 1 year ago #

    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.

  8. pinballw
    Posted 1 year ago #

    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.

  9. Ross Hanney
    Plugin Contributor

    Posted 1 year ago #


    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.

  10. pinballw
    Posted 1 year ago #


    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

  11. GeorgeRB
    Posted 1 year ago #

    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?

  12. Ross Hanney
    Plugin Contributor

    Posted 1 year ago #

    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".

  13. GeorgeRB
    Posted 1 year ago #

    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,


Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic