All-in-One Event Calendar ポップアップ画面の日時表示を修正する

ブログサイトの立ち上げ方
スポンサーリンク
スポンサーリンク

 

 

 

「All-in-One Event Calendar」のカスタマイズ

All-in-One Event Calendar」は、カナダのバンクーバーに拠点を置くTimelyという会社が開発したプラグインです。

日本語をはじめ、さまざまな言語への翻訳が進んでいますが、完璧ではありません。

なので、日本人からすると、

「ちょっと、その表示は…」

というところもあります。

 

この「ちょいプラ素材」のブログでは、日本語表示に関する部分に留まらず、私自身が、

「ここの表示やデザインは、変更したい。」

と感じた部分を中心にカスタマイズしていきます。

 

ポップアップ画面の日時表示を修正

数あるイベントカレンダーのプラグインの中から、私がこの「All-in-One Event Calendar」を選んだのは、機能とデザインが優れていたためです。

なので、基本、「All-in-One Event Calendar」のデザインは、気に入っています。

ただ、唯一気になるのが、イベント情報のポップアップ画面の表示です。

 

以下のように、サイドバーのイベント情報の部分にマウスを重ねると、ポップアップ画面が表示されます。

 

 

このポップアップ画面の「日時」表示の部分をよく見ると、

”11月5 @ 16:30 – 17:30”

になっています。

この表示の日にちの後に”日”の文字を追加するのと、“@”の文字を削除して、

”11月5日  16:30 – 17:30”

に修正します。

 

 

変更するファイル

変更するのは、

http://○○○…\wp-content\plugins\all-in-one-event-calendar\app\view\event

のフォルダにある「time.php」です。

 

%e3%80%8ctime-php%e3%80%8d

 

日付の表示を修正

まず、日にちの後に“日”の文字を追加する修正をします。

以下のように、「time.php」のget_short_date関数のコードを変更します。

 

【変更前】

public function get_short_date( Ai1ec_Date_Time $time, $add_year = false ) {
  $months = apply_filters( 'ai1ec_i18n_months', array() );
  $m = $time->format_i18n( 'M' );
  $m = array_key_exists( $m, $months ) ? $months[$m] : $m;
  if ( $add_year ) {
    return $m . ' ' . $time->format_i18n( 'j Y' );
  }
  return $m . ' ' . $time->format_i18n( 'j' );
}

【変更後】

public function get_short_date( Ai1ec_Date_Time $time, $add_year = false ) {
  $months = apply_filters( 'ai1ec_i18n_months', array() );
  $m = $time->format_i18n( 'M' );
  $m = array_key_exists( $m, $months ) ? $months[$m] : $m;
  if ( $add_year ) {
    return $time->format_i18n( 'Y年m月j日' );
  }
  return $m . ' ' . $time->format_i18n( 'j日' );
}

 

 

日付と時間の間の”@”を削除

次に、日付と時間の間の“@”を削除します。

同じく、「time.php」の以下の部分2か所のコードを変更して、

‘ @ ‘ → ‘  ‘

のように”@”の文字を削除します。

 

【変更前】

// Output start time for non-all-day events.
if ( ! $event->is_allday() ) {
  if ( 'hidden' !== $start_date_display ) {
    $output .= apply_filters(
      'ai1ec_get_timespan_html_time_separator',
      Ai1ec_I18n::_x( ' @ ', 'Event time separator' )
    );
  }
  $output .= $this->get_short_time( $start );
}


// Output end time for non-all-day events.
if ( ! $event->is_allday() ) {
  if ( $start_ts !== $end_ts ) {
    $output .= apply_filters(
      'ai1ec_get_timespan_html_time_separator',
      Ai1ec_I18n::_x( ' @ ', 'Event time separator' )
    );
  }
  $output .= $this->get_short_time( $end );
}

 

【変更後】

// Output start time for non-all-day events.
if ( ! $event->is_allday() ) {
  if ( 'hidden' !== $start_date_display ) {
    $output .= apply_filters(
      'ai1ec_get_timespan_html_time_separator',
      Ai1ec_I18n::_x( '  ', 'Event time separator' )
    );
  }
  $output .= $this->get_short_time( $start );
}


// Output end time for non-all-day events.
if ( ! $event->is_allday() ) {
  if ( $start_ts !== $end_ts ) {
    $output .= apply_filters(
      'ai1ec_get_timespan_html_time_separator',
      Ai1ec_I18n::_x( '  ', 'Event time separator' )
    );
  }
  $output .= $this->get_short_time( $end );
}

 

 

ポップアップ画面の日時表示が修正された

「time.php」のコードを変更したら、メインページの表示を更新して確認します。

以下のように、ポップアップ画面の日時表示が、

”11月5日  16:30 – 17:30”

に修正されました。

 

 

まとめ

今回の記事では、一番気になっていた「All-in-One Event Calendar」のポップアップ画面の日時表示を修正する方法を紹介しました。

 

ポップアップ画面は、今回修正した日時表示以外にも、変更したい部分があります。

そのためには、まず、新しいカレンダーテーマを作成し、作成したテーマのスタイルを変更する手順を取ります。

 

次回は、「All-in-One Event Calendar」のカレンダーテーマを新しく作成する方法を紹介します。

All-in-One Event Calendar 新しいテーマを作成する
「All-in-One Event Calendar」のカレンダーテーマを新しく作成し、作成したテーマに切り替える方法を紹介します。

 

 

コメント

  1. koara より:

    情報が少なかったので、大変参考になりました。ありがとうございます!
    ポップアップ画面の抜粋文字部分、全文表示されてしまうのですが、原因が分かりません。もしお分かりになりましたらご教示ください。

  2. たけお より:

    神かと思いました。ありがとうございます。

    • 管理者 より:

      たけおさん

      ブログの閲覧ありがとうございました.

      神なんかではなく,今やっと,ドットインストールで,PHP,jQueryを勉強している凡人ですよ.

      http://dotinstall.com/

  3. hikari より:

    大変助かりました。ありがとうございます。
    「time.php」のget_short_date関数のコード変更について、現行バージョン(2.5.19)では下記の通りの修正で反映されます。ご参考まで

    <修正前:182行目から>
    if ( $add_year ) {
    return $m . ‘ ‘ . $time->format_i18n( ‘M j’ );
    }
    return $m . ‘ ‘ . $time->format_i18n( ‘j’ );
    }
    <修正後:同上>
    if ( $add_year ) {
    return $m . ‘ ‘ . $time->format_i18n( ‘m月j日’ );
    }
    return $m . ‘ ‘ . $time->format_i18n( ‘j日’ );
    }

    • 管理者 より:

      hikariさん

      ご指摘ありがとうございました.

      All-in-One Event Calendarの最新バージョン(2.5.19)に対応して,記事の方も修正しておきました.

  4. かわい より:

    こんにちは、日時修正の記事ありがとうございます!
    便利なプラグインだと思いますが情報が少なかったので、
    大変助かりました。

    イベント時間の選択が15分刻みになっていると思うのですが、
    5分刻みから設定できる方法はあるのでしょうか?
    (通常だと、10時、10時15分、10時30分になっているものを、
     10時、10時5分、10時10分、10時15分…と細かくしたいのですが、
    設定できる個所が見つけられませんでした)

    もしご存知でしたら、ご教示いただければ幸いです。
    何卒よろしくお願いいたします。

    • 管理者 より:

      かわいさん

      ブログの閲覧ありがとうございます.

      15分刻みの間隔を5分単位にする設定は,私も見つけられませんでした.
      イベント時間を15分単位で設定しておいて,その後,キーボード入力で時刻を修正するしかないのかもしれません.

      お力になれずすみません.