京都大学東南アジア地域研究研究所　情報処理室

Google Calendar List View

イベントカレンダー等公開された Googleカレンダーを WordPress 上で新着情報と同じように一覧表示したいことを実現するプラグインです。ショートコードとして利用できます。さらに多言語の場合、カレンダーも複数あるかもしれないなと思って、複数指定できるようにしてます。

Google Calendar List View

最新版（変更履歴は末尾に記載）

ショートコード

Googleカレンダーをサイトに１つしか活用しないなら、Google Calendar API KeyとGoogle Calendar ID の２つの設定をするだけで、上記ショートコードは動作します。後から複数指定したい場合には、ショートコードの引数として別途指定できます。また 4.0 より複数カレンダーに対応しました。 g_id_*** （は任意）を設定すると、そのカレンダー情報もマージされるようになります。また各カレンダー用の APIは個別設定も可能です。 g_api_key_ （*** は g_id_***と対）で指定できます。基本的に指定したほうが良いです。APIは無料で一日100万クエリという制限があるためです。
デフォルトで利用する場合には、「テキスト」モードで設定してください。理由は、汎用性を保つために、<ul></ul>タグを別途つける必要があるためです。それが面倒な場合には

を使えば、<p>タグで出力されますので、ビジュアルモードで問題ありません。
あるいは後述するフックを使えば、出力データを自分のテーマに合わせたカスタマイズが簡単にできます！

ショートコードオプション（Version 6.8）

Googleカレンダーから、「現在日付」を起点として未来のカレンダーを10件取得して表示します。日付フォーマットは、YYYY.MM.DD（2017.04.10）です。表示順番は、「起点」をベースとした日付の昇順です。

だけのオプションを用意しました。オプション設定は他の設定よりも優先されます。

Google Calendar API Keyの生成方法

英語ですが、画像を加えてとても分かりやすく説明されています。これをみれば生成できると思います。なお APIは一日100万クエリまでの制限があります。それ以上使いたい場合には、Google Calendar API Usage Limits ページを参考にしてください。

Google Calendar ID の確認方法

英語ですが、画像を加えてとても分かりやすく説明されています。これをみればきっと探せるはず！

具体例を出してみます！

下記の例では、 「Public Calendar 1」「Public Calendar 2」という２つの公開カレンダーを用意してます。

「Public Calendar 1」

「Public Calendar 2」

とデータを入れています。上記日付は「起点日」をいれてますが、実際には終日、日時、複数日にまたがるケースを入れ込んでいます。

 

これに対して、下記のショートコードを固定ページの「テキストモード」で入れてみます。※Google Calendar IDは伏せ字にしてます。

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

で実際の表示は下記の通りです。

スタイルシートがデフォルトなので <dd>が一行あいてますけれど、「Public Calendar １」が<li>、「Public Calendar ２」が<dd>タグになっています。

もちろん、リンクをクリックしたら公開カレンダーの詳細表示画面が新規ウィンドウで開きます。

またPublic Calendar 1のほうは過去記事なので（実験時点で 2017.04.09）、start_date="ALL" あるいは、 start_date="2017-04-01" など起点日をイベント日時より前にしておかないと過去イベントは表示されません。まぁ過去イベントを表示したくないなら不要ですけどね。

どんな設定があるの

WordPressの管理ダッシュボードの「設定」内に「Google Calendar List View Settings」があります。ここで基本的な設定ができます。

Google カレンダー API設定

出力時の設定

「起点日」を基軸とした日付のソート（昇順、降順）
HTMLタグの出力設定になります。いずれもショートコードのオプションでも指定できます。

フック& その他のお知らせ

フックの使い方

以下、サポートしているフックを テーマのための関数「functions.php」 内でどのように記述するかの例をあげておきます。 各フックを利用すると出力データを変更できるため、ショートコードに「hook_secret_key」オプションを設定し、このhook_secret_key と、フック内から返す hook_secret_key が同一である場合のみ有効になります。

フックで活用できる配列

$out_atts として受け渡されます。バージョン 5.9 から Googleカレンダーのイベントから取得したデータも受け渡されるようになりました。こちらのデータについては、add_filter( 'lvgc_each_output_data', '関数名', 10, 3 ); のように引数を3 とした上で、function 関数名 ($out, $out_atts, $gc_value) などのように値を引き渡してください。なおデータのいくつかは esc_url や esc_html でエスケープしています。

$out_atts については、
extract($out_atts);
を使えば、下記の変数として利用できます。

lvgc_each_output_data

各イベントを出力する際のコードを変更できます。

デフォルトは、次の通り

を出力するコードになっています。
これをそのままフックで書いてみると次のようになります。

まずショートコードとして

を設定しておきます。重要なのは、hook_secrey_key を設定することです。

以下、テーマの functions.php に記載します。

add_filter( 'lvgc_each_output_data' , 'lvgc_each_output_data_fix' , 10 , 2 );

function lvgc_each_output_data_fix($out, $out_atts){
  extract($out_atts);
  $hook_secret_key = 'hogehoge';

  $start_end_date_value = $start_date_value;
  if(!empty($view_end_date) && !empty($end_date_value)):
    $start_end_date_value .=  ' ' . $view_end_date . ' ' . $end_date_value;
  endif;

  $out = <<< ___EOF___
    
  • $start_end_date_value $output_category_temp $gc_title
    • 

___EOF___; 
 return array('hook_secret_key'=>$hook_secret_key, 'data'=>$out);
}

    バージョン 5.9 から Googleカレンダーのイベントから取得したデータも受け渡す場合には、

    add_filter( 'lvgc_each_output_data' , 'lvgc_each_output_data_fix' , 10 , 3 );

function lvgc_each_output_data_fix($out, $out_atts, $gc_value){
  extract($out_atts);
  $hook_secret_key = 'hogehoge';

  $start_end_date_value = $start_date_value;
  if(!empty($view_end_date) && !empty($end_date_value)):
    $start_end_date_value .=  ' ' . $view_end_date . ' ' . $end_date_value;
  endif;

// $gc_value['creator']['displayName'], $gc_value['iconLink'], etc.

  $out = <<< ___EOF___
    
  • $start_end_date_value $output_category_temp $gc_title
    • 

___EOF___; 
 return array('hook_secret_key'=>$hook_secret_key, 'data'=>$out);
}

    が最も単純な構成例かなと思います。

    またショートコードごとに変更したければ、

    [gc_list_view g_id="hogehoge" id="99" hook_secret_key="hogehoge"]

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

    などのように ユニークな番号かキーワードである idをいれた上で、下記のようにすれば、 各ID だけに適用できるフックを作成できますよ！
    ※下記は、 idが 99のときだけ

    add_filter( 'lvgc_each_output_data' , 'lvgc_each_output_data_fix' , 10 , 2 );

function lvgc_each_output_data_fix($out, $out_atts){
  extract($out_atts);
  $hook_secret_key = 'hogehoge';

  $start_end_date_value = $start_date_value;
  if(!empty($view_end_date) && !empty($end_date_value)):
    $start_end_date_value .=  ' ' . $view_end_date . ' ' . $end_date_value;
  endif;

  if ($id === '99'):
      $out = <<< ___EOF___
    
  • $start_end_date_value $output_category_temp $gc_title
    • 

___EOF___;
  elseif ($id === 'hoge'):
      $out = <<< ___EOF___
 $start__value $output_category_temp $gc_title 
___EOF___; 
  endif;
  return array('hook_secret_key'=>$hook_secret_key, 'data'=>$out);
}

    カスタマイズ

    よりカスタマイズしたい場合には、上記フックで利用できる変数を活用してください。
    テンプレートタグ「lip」の場合、次のコードになっています。ハッシュタグ #type の第２引数と #organizer の第１引数の値を、カテゴリーとして表示する例です。

    ＊表示したい HTML

    

  • 

    2017.09.25
    

    国際シンポジウム
    

    ◯◯プロジェクト
    
タイトル
    •

    ＊フックのコード（functions.php） / コード内容は、プラグインの includes/tags/lip.php 参照）

    add_filter( 'lvgc_each_output_data' , 'lvgc_each_output_data_fix' , 10 , 2 );

function lvgc_each_output_data_fix($out, $out_atts){
  extract($out_atts);
  $hook_secret_key = 'hogehoge';

  $start_end_date_value = $start_date_value;
  if(!empty($view_end_date) && !empty($end_date_value)):
    $start_end_date_value .=  ' ' . $view_end_date . ' ' . $end_date_value;
  endif;

  // Customizing category html.
$output_category_temp = '';
if(!empty($enable_view_category)):
    if(!empty($hash_tags_type_title)):
        $output_category_temp .= "
    $hash_tags_type_title
    ";
    endif;
    if(!empty($hash_tags_organizer_value)):
        $output_category_temp .= "
    $hash_tags_organizer_value
    ";
    endif;
endif;

if ( isset($no_event_link) && !empty($no_event_link) ): 

$out_temp .= <<< ___EOF___
 
  • $start_end_date_value $output_category_temp $pre_start_date_value_br
    - $gc_title
___EOF___;

else:

$out_temp .= <<< ___EOF___
 
  • $start_end_date_value $output_category_temp $pre_start_date_value_br
    - $gc_title
___EOF___;

endif;

if ( isset($view_location) && !empty($view_location) ):
    if( isset($view_location_name) && !empty($view_location_name) ): 
       $location_header_name = $view_location_name;
    else:
       $location_header_name = __("Location:", $this->plugin_name);
    endif;
$out .= <<< ___EOF___

    $location_header_name $gc_location
___EOF___;
endif;

$out .= <<< ___EOF___


___EOF___;

  return array('hook_secret_key'=>$hook_secret_key, 'data'=>$out);
}


     
    

    li-month のカスタマイズ時の注意
    

    library/tags/li-month.php を参考に、フックを利用してカスタマイズする場合、従来の <ul> タグを利用する場合には、ショートコードの次の行あたりに、</ul> をいれて閉じてください。フックはイベントごとの処理を行うため、月ごとのイベントをまとめる際に末尾に閉じるタグを設定できないためです。
    

    月名を英語固定等、独自に変更したい場合には、$translate_month_values による変換部分をコメントアウトしてください。
    
下記に、library/tags/li-month.php をベースに日本語とオランダ語の場合のサンプル例を載せておきます。
    

    add_filter( 'lvgc_each_output_data' , 'lvgc_each_output_data_fix' , 10 , 2 );

function lvgc_each_output_data_fix($out, $out_atts){
  extract($out_atts);
  $hook_secret_key = 'hogehoge';

  $start_end_date_value = $start_date_value;
  if(!empty($view_end_date) && !empty($end_date_value)):
    $start_end_date_value .=  ' ' . $view_end_date . ' ' . $end_date_value;
  endif;

$out = '';
if($pre_start_date_month_value === $start_date_month_value):
    $month_value = '';
else:
    if( isset($month_value) && !empty($month_value) ) :
        $out .= <<< ___EOF___


___EOF___;
    endif;
endif;

if( isset($month_value) && !empty($month_value) ) :
    // 下記の foreach で月名を多言語対応しています。ここをコメントアウトすることで月名は英語固定になります。
    foreach($translate_month_values as $org_lang=>$con_lang):
        if($month_value === $org_lang):
            $month_value = $con_lang;
            break;
        endif;
    endforeach;

    $out .= <<< ___EOF___
$month_value

      

___EOF___;

endif;

if ( isset($no_event_link) && !empty($no_event_link) ): 
    $out .= <<< ___EOF___
 
    • $start_end_date_value $output_category_temp $gc_title
___EOF___;

else:

    $out .= <<< ___EOF___
 
    • $start_end_date_value $output_category_temp $gc_title
___EOF___;

endif;

if ( isset($view_location) && !empty($view_location) ):
    if( isset($view_location_name) && !empty($view_location_name) ): 
        $location_header_name = $view_location_name;
    else:
        $location_header_name = __("Location:", $plugin_name);
    endif;
    $out .= <<< ___EOF___

      $location_header_name $gc_location
___EOF___;
endif;

$out .= <<< ___EOF___

      • 

___EOF___;

  return array('hook_secret_key'=>$hook_secret_key, 'data'=>$out);
}

    

     
    

    タイムゾーン処理に気をつけること
    

    や i18_ では WordPress におけるタイムゾーン処理ではうまくいかないか、面倒が発生します。のでタイムゾーン処理なんて考えたくないぜ〜って人には、次のWordPress専用関数を利用すると幸せになれます。
    

    現在日時取得＆日時フォーマット変換：current_time
    

      

    • 

        

      • 

          

        • $current_time = currentitme("Y-m-d"); （2017-04-03 など年月日で取得する場合）
          • 

        

        • 

      

      • 

    

    日時フォーマット変換：get__from_gmt
    

      

    • 

        

      • 

          

        • $start_date = get__from_gmt($item[‘start’][‘Time’], "Y-m-d");
          • 

        

        • 

      

      • 

    

    Googleカレンダーイベントの開始日時をタイムゾーンに配慮して、年-月-日で $start_date に入れる
    

    まぁとこんな感じで、テンプレートであろうが、固定ページ、投稿ページ（カスタム投稿含む）のどこでも、「公開」されているGoogleカレンダーについては、一覧表示出来るように作っています。
    

    変更履歴（過去バージョン）
    

      

    • 2022.11.05: 7.0.0 公開（API取得方法を変更）
      • 

    • 2022.03.31: 6.9.2 公開
      • 

    • 2022.03.30: 6.9, 6.9.1 公開
      • 

    • 2022.03.27: 6.8 公開
      • 

    • 2022.02.10: 6.7.2 公開
      • 

    • 2022.02.07: 6.7.1 公開
      • 

    • 2022.02.04: 6.7 公開
      • 

    • 2021.11.21: 6.6 公開
      • 

    • 2021.04.22: 6.5.2 公開
      • 

    • 2021.04.21: 6.5.1 公開
      • 

    • 2021.04.21: 6.5 公開（ショートコードオプション no_event_link を追加）
      • 

    • 2021.04.18: 6.4.1 公開（ショートコードオプション view_location_name について修正）
      • 

    • 2021.04.18: 6.4 公開（ショートコードオプション view_location_name を追加）
      • 

    • 2021.04.16: 6.3 公開（イベントリンクをマウスオーバーすると、イベント説明の一部が表示される機能を追加）
      • 

    • 2021.03.20: 6.2 公開
      • 

    • 2021.03.16: 6.1 公開
      • 

    • 2021.03.15: 6.0 公開
      • 

    • 2021.03.05: 5.9.1 公開
      • 

    • 2020.05.14: 5.9 公開
      • 

    • 2020.03.08: 5.8 公開
      • 

    • 2020.02.26: 5.7 公開
      • 

    • 2020.02.04: 5.6 公開
      • 

    • 2020.01.24: 5.5 公開
      • 

    • 2019.12.13: 5.4 公開
      • 

    • 2019.11.26: 5.3 公開（Googleカレンダーを複数指定した時のソートがうまくできていなかった問題の修正）
      • 

    • 2019.11.11: 5.2 公開
      • 

    • 2019.07.19: 5.1 公開
      • 

    • 2019.02.14: 5.0 公開
      • 

    • 2018.09.27: 4.6公開
      • 

    • 2018.09.26: 4.5公開, 4.5.1公開
      • 

    • 2018.09.18: 4.4公開
      • 

    • 2018.07.11: 4.3公開
      • 

    • 2017.11.11: 4.2公開
      • 

    • 2017.10.19: 4.1公開
      • 

    • 2017.09.17: 4.0公開 at WordCamp Tokyo 2017
      • 

    • 2017.08.31: 3.1公開
      • 

    • 2017.08.25: 3.0公開
      • 

    • 2017.08.24: 2.2公開
      • 

    • 2017.07.21: 2.1公開
      • 

    • 2017.06.26: 2.0公開
      • 

    • 2017.06.25: 1.5, 1.51公開
      • 

    • 2017.04.18: 1.3, 1.4, 1.41, 1.42公開
      • 

    • 2017.04.11: 1.2公開
      • 

    • 2017.04.10: 1.1公開
      • 

    • 2017.04.09: 1.0公開
      • 

    

    2021年11月21日　ドキュメント変更（6.6対応）
    
2021年4月21日　ドキュメント変更（6.5対応）
    
2021年4月18日　ドキュメント変更（6.4, 6.4.1対応）
    
2021年4月16日　ドキュメント変更（6.3対応）
    
2021年3月16日　ドキュメント変更（6.1対応）
    
2021年3月15日　ドキュメント変更（6.0対応）
    
2017年8月25日　ドキュメント変更（3.0対応）
    
2017年8月24日　ドキュメント変更（2.2対応）
    
2017年7月21日　ドキュメント変更（2.1対応）
    
2017年6月26日　ドキュメント変更（2.0対応）
    
2017年6月25日　ドキュメント文章の変更
    
2017年4月20日　冒頭の文言を追加
    
2017年4月18日　フックに関する説明を追記
    
2017年4月17日　フックに関する説明を追記
    
2017年4月10日　バージョン1.2 の加筆
    
2017年4月10日　バージョン1.1 の加筆
    
2017年4月9日 @kimipooh