For the record, here’s the default when you first switch away from “Simple Display Options”:
<div class="gce-list-event gce-tooltip-event">[event-title]</div>
<div><span>Starts:</span> [start-time]</div>
<div><span>Ends:</span> [end-date] - [end-time]</div>
[if-location]<div><span>Location:</span> [location]</div>[/if-location]
[if-description]<div><span>Description:</span> [description]</div>[/if-description]
<div>[link newwindow="true"]More details...[/link]</div>
I am using it, but I think it was the default option on installation.
I made only a few changes, but am able to replicated my changes with just CSS.
Hi Phil. I use a very basic setup but it’s what my customers like and what’s needed:
<div><span>Sted:</span> [maps-link][location][/maps-link]</div>
<div><span>Tidspunkt:</span> [start-time] – [end-time]</div>
</br>
I am using this feature to translate the field names to Hungarian, e.g.:
<div class="gce-list-event gce-tooltip-event">Meetup: [event-title]</div>
<div><span>Időpont:</span> [start-date] [start-time] - [if-multi-day] [end-date] [/if-multi-day] [end-time]</div>
[if-location]<div><span>Helyszín:</span> [location]</div>[/if-location]
[if-description]<div> [description]</div>[/if-description]
<div>[link newwindow="true"]További részletek...[/link]</div>
Public page: http://r-projekt.hu/esemenyek
But I’d be happy with a po file that I could translate if that’s easier for the plugin authors.
• Here is the code I am using for the calendar view:
<div class=”gce-list-event gce-tooltip-event”>[event-title]</div>
[if-all-day]
[if-multi-day]
<p><span>Days:</span> [start-date] – [end-date offset=”-1″]</p>
[/if-multi-day]
[if-single-day]
<p><span>Time:</span> All day</p>
[/if-single-day]
[/if-all-day]
[if-not-all-day]
<div><span>Starts:</span> [start-time]</div>
<div><span>Ends:</span> [end-time]</div>
[/if-not-all-day]
[if-location]<div><span>Location:</span> [location]</div>[/if-location]
[if-description]<div><span>Description:</span> [description]</div>[/if-description]
<div>[link newwindow=”true”]Google Calendar[/link]</div>
Here is what I am using on my main calendar on my website (http://www.fbcob.org)
The simple code was showing all day events with times, which I didn’t like. Also, if I remember correctly, it was showing the date in with all the times when I hovered over a day. I thought this was unnecessary because I was already hovering over the date, therefore I didn’t want the date to show again. I also wanted to let people know we were using Google Calendar, so I changed “More details….” to “Google Calendar”
•Here is a list view I am using:
<div class=”gce-list-event gce-tooltip-event”>[event-title]</div>
[if-all-day]
[if-multi-day]
<p><span>Days:</span> [start-date] – [end-date offset=”-1″]</p>
[/if-multi-day]
[if-single-day]
<p><span>Time:</span> All day</p>
[/if-single-day]
[/if-all-day]
[if-not-all-day]
<div><span>Starts:</span> [start-time]</div>
<div><span>Ends:</span> [end-time]</div>
[/if-not-all-day]
[if-location]<div><span>Location:</span> [location]</div>[/if-location]
[if-description]<div><span>Description:</span> [description]</div>[/if-description]
<div>[link newwindow=”true”]Google Calendar[/link]</div>
One of the things about this view was not showing the All Day events that was more intuitive to the viewer. There doesn’t need to be times if the event is all day.
HOPE THIS HELPS!
I use this for several calendar feeds on our intranet so I can’t send you the URL.
Here is the City Wide Calendar.
(HTML page)
[google-calendar-events id=”1, 2, 6″ type=”ajax” title=”Events on”]
Event List
[google-calendar-events id=”1, 2, 6″ type=”list-grouped” title=”” max=”5″]
SHORTCODES in Settings
<div>[link newwindow=”true”][event-title][/link]</div>
[if-all-day]
<p>All Day
[/if-all-day]
[if-not-all-day]
<p>[start-custom format=”g:ia”] – [end-custom format=”g:ia”]
[/if-not-all-day]
[if-multi-day]<p>Ends: [end-date]</p>[/if-multi-day]
[if-location]<div><span>Location:</span> [location]</div>[/if-location]
[if-description]<div><span>Description:</span> [description]</div>[/if-description]
Widgets
I also use it in my Widgets. Display events as: List – Group by date
If you want screen shots I can provide. Let me know.
I’m using it to customise various calendar extractions, and also using the search option to look for the string <p id=xx>, where xx is various two letter codes, to limit the selection to certain types of event. (Note the display of the <p id=xx> is of course null in the main calendar listing, so I can insert it as a hidden tag).
Here are some example:-
<div class=”gce-list-event gce-tooltip-event”> [start-time] [event-title]</div>
<div>[start-time] [if-location] at [location][/if-location]</div>
[if-description]<div> [description html=”true”]</div>[/if-description]
<div> [start-custom format=” D j F \\a\\t g.ia”] [if-description] – [description limit=”12″][/if-description]</div>
<div> [start-custom format=” D j F \\a\\t g.ia”] </div>
<div> [start-custom format=” D j F \\a\\t g.ia”] [event-title] [if-location] – [location][/if-location] [if-description] [description html=true] [/if-description]</div>
Just noticed this…
Please include a public-facing post/page address (URL) of it in action so we can see how it looks if possible.
Sorry, but since the “search query” option is broken in 0.7.3, I have had to remove all these from my site until it is fixed. I can post examples URLs when it is fixed.
Hey thanks everyone for providing all this great information. Just as a simple request for anyone who posts after me, could you also please include a link to your site if possible? (I understand if you can’t)
I would like to visually see the differences between some of your variations as well as the defaults we are using.
Thanks a lot!
After messing with it and some custom JS a bunch, I finally settled for just using the simple template, and this custom CSS:
http://ccchico.com/wp-content/themes/ccc-duena/gce.css
As seen in the last widget on http://ccchico.com/
I’m using the following code for event lists here http://www.corvalliswaldorfschool.org/calendar/upcoming-activities-and-events/ and here http://www.cedarwoodschool.org/calendar/.
Note that I also edited the plugin to support monthly breaks in the event list. I sent the code change to ross@rhanney.co.uk a while back but didn’t get a reply. Let me know if any of you are interested.
[link newwindow="true"][event-title][/link] —
[if-single-day][start-date][/if-single-day]
[if-multi-day][start-date] - [end-date][/if-multi-day]
<div class="my-event-info">
[if-single-day]<div><span>Times:</span> [start-time] - [end-time][/if-single-day]
[if-location]<div><span>Location:</span> [location]</div>[/if-location]
[if-description]<div><span>Description:</span> [description limit="30"]</div>[/if-description]
<div>[link newwindow="true"]more details...[/link]</div>
</div>
I also edited the display code for the small grid in the sidebar here: http://www.cedarwoodschool.org/calendar/ as the start/end code didn’t work well for multi-day events.
<div class="gce-list-event gce-tooltip-event">[event-title]</div>
[if-single-day]<div><span>Time:</span> [start-time] - [end-time]</div>[/if-single-day]
[if-multi-day]<div><span>Dates:</span> [start-date] - [end-date][/if-multi-day]
[if-location]<div><span>Location:</span> [location]</div>[/if-location]
[if-description]<div><span>Description:</span> [description]</div>[/if-description]
<div>[link newwindow="true"]More details...[/link]</div>
And finally, on a 3rd site I used the same list code as for the two Waldorf schools: http://www.bentonswcd.org/activities/calendar/
But they also had a requirement to display just the next two event dates as circles on the home page: http://www.bentonswcd.org/
So I changed the PHP date format to “n/j” and used this display code (with a bit of CSS of course):
<div class="event-circle"><span>[start-date]</span></div>
<div class="event-title">[event-title]</div>
Bottom line is that the display builder code has a high value for me, and losing it would be sub-optimal for two sites and really ugly for the third. 😉
Thanks for asking and for updating this great plugin!
—
I use code like this
<font face="Helvetica Neue,arial, Helvetica,Nimbus Sans L,sans-serif" size="-1">
[if-not-all-day][start-date], [start-custom format="g:iA"][/if-not-all-day]
[if-all-day][start-date][/if-all-day]
</font> <b> [event-title]</b>
[if-description][link newwindow="true"]<font color="#888888"><font size="-1">(details...)</font></font>[/link][/if-description]
to generate lists of events in posts like this:
http://newtonsouthptso.org/2012/10/upcoming-events/
—
I use code like this
[if-all-day]<font color="#0D7813">[event-title html="true"] </font> [/if-all-day]
[if-not-all-day]<font color="#0D7813">[event-title] <em>[start-custom format="g:ia"]</em></font> [/if-not-all-day]
[if-description][link newwindow="true"]<font color="#c0c0c0"><i>(details)</i></font>[/link][/if-description]
to generate lists of the same events in widgets (as in the Upcoming Events widget on the page linked above).
—
For both of those code snippets, I vary the text colors to indicate different events from different Google calendars.
—
I use code like this
[if-all-day]<font color="#0D7813">[event-title html="true"] </font> [/if-all-day]
[if-not-all-day]<font color="#0D7813">[event-title] <em>[start-custom format="g:ia"]</em></font> [/if-not-all-day]
[if-description][link newwindow="true"]<font color="#c0c0c0"><i>(details)</i></font>[/link][/if-description]
for a few dozen different high-school sports calendars, varying the text colors by sport (each sport in a different Google Calendar). For a list of just the Home games, I use the Search Query function in the 0.7.1 developer version to select only those events that have ” hosts ” in the event title.
Home games: http://newtonsouthptso.org/category/upcoming-athletics/ (there might not be any events there yet because the school year has not yet started)
I use it on several sites.
on http://www.wreed-en-plezant.be :
<p class=”gce-list-event gce-tooltip-event”> [event-title]</p>
<p><span>Vanaf</span> [start-time]
[if-location]<span> @ </span> [location] </p> [/if-location]
[if-description] <p> [description html=”true”] </p> [/if-description]
on http://www.leefdaal.be I mix 13 Google-calendars and every calendar has its own “style”:
<div class=”feed-[feed-id] “>
<p><img style=”margin: 5px” src=”/wp-content/uploads/2011/04/icon-kwb.png” align=”left” /> [link newwindow=”true”] [event-title] [/link] </p>
<p> [if-not-all-day] Vanaf [start-custom format=”H:i”] tot [end-custom format=”H:i”] [/if-not-all-day]
[if-location] @ [location html=”true”] [/if-location] </p>
[if-description] <p>[description limit=”100″ html=”true”] </p>[/if-description]
</div>
<div class=”feed-[feed-id] “>
<p><img style=”margin: 5px” src=”/wp-content/uploads/2011/04/icon-leidel1.png” align=”left” /> [link newwindow=”true”] <b>[event-title]</b> [/link] </p>
<p> [if-not-all-day] Vanaf [start-custom format=”H:i”] tot [end-custom format=”H:i”] [/if-not-all-day] [if-location] @ [location html=”true”] [/if-location] </p>
[if-description] <p>[description limit=”100″ html=”true”] </p>[/if-description]
</div>
etc. The difference is in the stylesheet and in the icon being displayed.
I also use the eventbuilder on webstites http://www.gbsleefdaal.be , http://www.kwbleefdaal.be , http://www.chiroleefdaal.be …
