Google Calendar List View

The plugin is to create a shortcode for displaying the list view of a public Google Calendar.  If you want to use multi Google Calendar later,  you can specify them in the shortcode options.

Google Calendar List View

History

  • September 17, 2017: Updated 4.0
  • August 31, 2017: Updated 3.1
  • August 25, 2017: Updated 3.0
  • August 24, 2017: Updated 2.2
  • July 21, 2017: Updated 2.1
  • June 26, 2017: Updated 2.0
  • June 25, 2017: Updated 1.5, 1.51
  • April 18, 2017: Updated 1.3, 1.4, 1.41, and 1.42.
  • April 11, 2017: Updated 1.2.
  • April 10, 2017: Updated 1.1.
  • April 9, 2017: Released 1.0.

Shortcode

  • <ul>[gc_list_view]</ul>

If you only use a public Google calendar, you can use the setting values of “Google Calendar API Key” and “Google Calendar ID”.If you want to use multi Google Calendar later,  you can specify them in the shortcode options. Version 4.0 supports the multi Google Calendars. If you want to add 2 or more Google Calendars, set g_id_*** shortcode option. You can set an unique key as ***. If you want to set an Google Calendar API key on each Google Calendar ID, set g_api_key_*** with g_id_***.
In case of using the default values, please put the shortcode as Text mode because it needs to use <ul> tag. If you use “p” value on html_tag, you can use Visual mode.

  • [gc_list_view html_tag=”p”]

Or if you want to customize the output values, please use the following hook.

Options on Shortcode (Version 4.0)

The shortcode is to display the list (default 10 items) of public Google Calendars from now (start_date)  to the future.  Default date format is YYYY.MM.DD. The sort is the ascending on start_date.

  • [gc_list_view start_date=”YYYY-MM-DD/ALL” end_date=”YYYY-MM-DD” date_format=”Y.m.d” orderbysort=”ascending/descending” g_id=”Google Calendar ID” g_api_key=”Google Calendar API Key” max_view=10 html_tag=”li/p/dd/lip” html_tag_class=”” id=”” hook_secret_key=”” lang=”” enable_view_category=”” g_id_***=”Additional Google Calendar ID” g_api_key_***=”Additional Google Calendar API Key with g_id_***”]

The following shortcode option is priority than setting values.

  • start_date  is the value of “Start Date” (Default value is empty (= current date)). (strtotime date format is supported.) If “ALL” value is setting up, start_date value become to be unlimited.
  • end_date is the value of “End Date”. (strtotime date format is supported.)
  • date_format is the date format (Y.m.d = YYYY.MM.DD). The format style is date format. If it changes d-m-Y,  it can display DD-MM-YYYY.
  • orderbysort can select “ascending” or descending” (default = “ascending”). It behaves like ordersort by Google Calendar API v2.
  • g_id is Google Calendar ID. If you use multi Google Calendar, set this value.
  • g_api_key isGoogle Calendar API Key. If you use multi Google Calendar API Key, set this value.
  • max_view is the maximum number of view. Default is 10 (same as maxResults value in Google Calendar API Settings).
  • html_tag is HTML tag for the output Google Calendar events. It can set “li”, “p”, “dd”, and “lip”. The each class is “list-view-google-calendar”.
  • html_tag_class is html_tag class. Default is list-view-google-calendar (<html_tag class=”list-view-google-calendar”>***</html_tag>).
  • id is an unique key for the plugin hooks. If you want to customize the value using a hook each a shortcode, id can use a unique key.
  • hook_secret_key is for safely using a hook. If you use this plugin’s hook, please set this key and return ‘hook_secret_key’ in the hook. In detail, please see ‘Hook’ section in this document.
  • lang is for outputting only specific events including #lang [value] in a description on a event. If you want to output  events in English from only a Google Calendar, write #lang en in the description on a event and setting up lang=”en” on shortcode.
  • enable_view_category = If the value is not empty, the category is displayed for #type and #organizer tag (ex. 22/10/2017 Category Organizer Title)
  • g_id_*** = If you want to add 2 or more Google Calendars, set the key. You can set an unique key as ***.
  • g_api_key_*** = If you want to set an Google Calendar API key on each Google Calendar ID, set g_api_key_*** with g_id_***.

How to create Google Calendar API Key

I think I don’t need to explain it because above document is very nice! Please keep in mind that there is query limitation (Google Calendar API Usage Limits).

How to find Google Calendar ID

Please see above document, you can find it!

For example

In the following example, two sample google calendars  “Public Calendar 1” and “Public Calendar 2”

Public Calendar 1

  • 2017.04.07 TEST Event 3 on Public Calendar 1
  • 2017.04.04 TEST Event 2 on Public Calendar 1
  • 2017.04.02 TEST Event 1 on Public Calendar 1

Public Calendar 2

  • 2017.04.14 TEST Event 3 on Public Calendar 2
  • 2017.04.11 TEST Event 2 on Public Calendar 2
  • 2017.04.10-12 TEST Event 1 on Public Calendar 2

 

If you input the following code on Text mode to a Page or a Post (Tested on April 9, 2017).

「Public Calendar 1」
<ul>
[gc_list_view g_id=”◯◯@group.calendar.google.com” start_date=”ALL” orderbysort=”descending”]
</ul>
「Public Calendar 2」
<dl>
<dt>List View of Google Calendar Events</dt>
[gc_list_view g_id=”◯◯@group.calendar.google.com” orderbysort=”descending” html_tag=”dd”]
</dl>

The following content is displayed.

If you click each link, a detail page of the Google Calendar event is displayed as new window.

“Public Calendar 1″ is all past data on April 9, 2017, so it needs to set start_date=”ALL” or start_date=”2017-04-01″ option if you want to display the past events.

What’s kind of settings?

There are settings on “Google Calendar List View Settings” in the setting menu of the administration dashboard.

Google Calendar API Settings

Output Settings

Hooks & Notice

How to use Hooks

The following codes were tested on functions.php in the theme.
Please keep in mind that the output data can be changed from the following hooks.
Therefore, please pay attention the security countermeasure.

 

Array for a Hook

$out_atts use in each hook.
if you use “extract($out_atts);”, you can use the following variables.

  • $start_date_num = Event Start date  (Ymd)
  • $start_date_value = Event Start date (Converted date_format)
  • $end_date_num = Event End date (Ymd)
  • $today_date_num = Today (Ymd)
  • $holding_flag = true/false (If the today is held on the event, the value is true.)
  • $gc_link = Link for Google Calendar Event of  each event
  • $gc_title = Event Title
  • $plugin_name = Plugin Name
  • $html_tag_class = Base of HTML tag class
  • $html_tag_class_c = HTML tag class (If a event is been holding today, the class is set  ${html_tag_class}_holding. Else the class is set $html_tag_class.
  • $id = id on shortcode option
  • $lang = lang on shortcode option
  • $hash_tags = Hash tag data on each event (array( “hash_tag”=>array(“value”=>””, “title”=>””), …..); )
  • $hash_tags_type_title = hash_tag_title value (= $hash_tags[‘type’][‘title’]) in #type on each event (#type hash_tag_category hash_tag_title)
  • $hash_tags_type_organizer = the has_tag_name value(= $hash_tags[‘organizer’][‘value’]) in #type on each event (#organizer has_tag_name)
  • $output_category_temp = IF the shortcode option “enable_view_category” is not empty, the html tag for displaying #type, #category items is set (default is empty)

 

lvgc_each_output_data

The hook can change the output data in each item.

Default output is as below:

  • <lt> class=”list-view-google-calendar_item”><li class=”list-view-google-calendar”><span class=”list-view-google-calendar_date”>Date</span> (In case of setting up #type or #organizer)<a class=”list-view-google-calendar_link”>href=”Google Calendar Link” target=”_blank”>Title</a></li>
    (In case of setting up #type or #organizer) = <span class=”list-view-google-calendar_category”>”#type”‘s second argument </span><span class=”list-view-google-calendar_organizer”>”#organizer”‘s first argument</span>

Let’s code  above output data on a hook.

Firstly, please set “hook_secret_key” on a shortcode.

  • [gc_list_view *******  hook_secret_key=”hogehoge”]

Then, add the following code  to the functions.php in a theme.

 

If you want do a different change on each shortcode, you add “id” option in the shortcode and use the following code.

[gc_list_view g_id=”hogehoge” id=”99″ hook_secret_key=”hogehoge”]

[gc_list_view g_id=”hoge” id=”hoge” hook_secret_key=”hogehoge”]

More Customizing

If you want to customize, please utilize above the attribution for the hook.
Ex. The following code is the “lip” template tag file.

* Output HTML

  • Code in fucntions.php

Notice: coding timezone

WordPress forcibily processes the date as UTC timezone. In other words, “date” and “i18_date” function don’t work on  WordPress if you want to code other timezone except UTC.  Therefore, you need to use WordPress date functions “current_time” and “get_date_from_gmt” istead of date and i18_date.

Get current time & convert date format

  • $current_time = currentitme(“d-m-Y”);  (03-04-2017 means April 3, 2017)

Convert date format: get_date_from_gmt

  • $start_date = get_date_from_gmt($item[‘start’][‘dateTime’], “d-m-Y”);

The following example is to convert $start_date to the setting timezone on WordPress.

August 25, 2017  Fixed the document for version 3.0.
August 24, 2017  Fixed the document for version 2.2.
July 21, 2017  Fixed the document for version 2.1.
June 26, 2017  Fixed the document for version 2.0.
June 25, 2017  @kimipooh

 

 

 

Pagetop