XO Event Calendar カレンダー表示が崩れる場合の対処

XO Event Calendar プラグインのカレンダーの表示が崩れる場合の対処方です。

一部の古いテーマ(Twenty Ten 等)において、カレンダーの表示が崩れる場合があります。これは、テーマのスタイルで、#content table のように ID セレクタによるスタイル定義している場合、プラグインのスタイル定義より優先されることにより起こります。

プラグインのスタイルで ID セレクタや !important 宣言を使用すれば、このようなことは起こらないのですが、テーマ側でカスタマイズが容易にできるようにするためなので、プラグイン側での対処は難しいところです。

崩れた事例

このように崩れた表示の場合、下記のスタイルで防ぐことができます。

スタイル

下記のスタイルを、テーマ(子テーマ)の style.css や追加 CSS 等に追記してください。

#content .xo-event-calendar table {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
}
#content table.xo-month {
	margin: 0 0 8px 0;
	border: 1px solid #ccc;
	border-width: 1px 0 1px 1px;
}
#content table.xo-month th,
#content table.xo-month td {
	padding: 0;
	border: 1px solid #ccc;
}
#content table.xo-month .month-header {
	margin: 2px 0 4px;
	position: relative;
}
#content table.xo-month > thead th {
	border-width: 0 1px 0 0;
	padding: 1px 0;
	text-align: center;
	font-size: 100%;
	font-weight: bold;
}
#content table.xo-month > thead th.sunday {
	color: #d00;
}
#content table.xo-month > thead th.saturday {
	color: #00d;
}
#content table.xo-month .month-week {
	padding: 0;
	border: 0;
	width: 100%;
	overflow: hidden;
}
#content table.xo-month .month-dayname {
	border-width: 1px 0 0 1px;
}
#content table.xo-month .month-dayname td {
	border-width: 1px 1px 0 0;
}
#content table.xo-month .month-event td {
	padding: 0 1px 2px 1px;
	border-width: 0 1px 0 0;
}
#content p.holiday-title {
	margin: 0;
	padding: 2px 0;
}

適用後

コメント

  • 初めまして。yamaと申します。
    現在、登録ユーザー(不特定多数)の方にイベントを登録してもらうサイトを作ろうと、色々とカレンダープラグインを検討した結果、このXO Event Calendarが一番目的に合っていると思い、導入しようと思っているところです。

    そこで一つ教えていただきたいのですが、プラグインのAdvanced Custom Fields(https://www.advancedcustomfields.com/)を使って入力項目(定員の数など)を増やしたいのですが可能でしょうか。

    またAdvanced Custom Fieldsのアドオン「ACF: Google Map Extended」(https://wordpress.org/plugins/advanced-custom-fields-google-map-extended/)を使い、イベント開催場所をGoogle Map上で表示したいのですが可能でしょうか。

    お忙しいところ恐縮ですが、ご回答いただければ幸いです。

    • イベントはカスタム投稿タイプを使用しています。通常のカスタム投稿タイプと同様にカスタム フィールドを追加することができます。
      ACF で使用する場合は、投稿タイプで「xo_event」(デフォルトの場合)を選択すればイベントの投稿に追加できます。Google Map Extended アドオンに関しては使用したことがないので、確かなことはいえませんが使用できるはずです。
      また、投稿タイプ テンプレートにも対応しているので、single-xo_event.php の名前でテンプレートを作成すれば表示も自由にカスタマイズすることができます。
      もし、使用できないようでしたら、なるでく対応していきたいとおもいますので、気軽にコメントしてください。

      • ご回答ありがとうございます。
        早速試したいと思います。
        また質問させていただくこともあるかと思いますが、その際は宜しくお願いいたします。

  • 初めまして井上と申します。
    XO Event Calendarを使用させていただいております。使い勝手がよく感謝しております。

    一つ質問させてください。
    サイドバーにイベントカテゴリの一覧を表示したいと思っております。
    $the_query = new WP_Term_Query(
    array(‘taxonomy’ => ‘xo_event_cat’,
    ‘orderby’ => ‘name’,
    ‘order’ => ‘ASC’,
    ‘hide_empty’ => false,)
    );
    上記のように、タクソノミーにxo_event_catを渡し取得することは出来るのですが、並び順が親子関係などを無視しソートされてしまいます。
    カテゴリーの登録画面のように、親子関係を維持たまま、カテゴリー一覧を表示するにはどのように記述すればよろしいでしょうか。

    よろしければ、お時間のある時にご教授いただければ助かります。

    • こんにちは
      カテゴリーを並び替えるプラグイン(Intuitive Custom Post Order 等)を使用すると自由に並び替えることもできていいかなと思います。
      あとは、get_terms 関数等で簡単に表示できます。
      $terms = get_terms( 'xo_event_cat', array( 'hide_empty' => 0 ) );
      if ( !empty( $terms ) && !is_wp_error( $terms ) ) {
      foreach ( $terms as $term ) {
      echo $term->name;
      }
      }

      • 石鷹様こんにちは
        迅速なお返事ありがとうございます。

        ご教授頂いたソースを参考に、カテゴリーのリンクウィジェットや、休日と同じ様にカテゴリー見本に利用させていただこうと思います。

        ご対応いただきありがとうございました。
        これからも開発応援しております

  • 始めまして。
    今回XO Event Calendarを導入させていただくことにしたのですが、
    1点質問させていただきます。

    ・日曜日と木曜日に休日を設定しました。
    ・イベントの設定がない週は、休日は上半分が着色されます。
    ・週のどこかにイベントがあると、イベントは下半分に表示されます。同時に、休日はセル全体が着色されて今います。

    修正方法を探したのですが見つけることができませんでした。
    直す方法を教えていただけますと幸いです。

    • こんにちは、はじめまして。
      テーマの CSS が影響していると思われます。
      次のアップデートで対策したいと思います。それまでは下記の CSS をカスタマイズの「追加 CSS」またはテーマの style.css などに追記して対応してもらえればと思います。

      .xo-event-calendar table.xo-month td {
        position: static;
      }
      • 石鷹 様

        ご返答ありがとうございます。
        style.cssにソースを追記しましたところ、きれいに表示されるようになりました。どうもありがとうございました。
        使いやすいプラグインをありがとうございます!
        今後ともよろしくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。(スパム対策)