スポンサーリンク

はじめに

drupla7ではずっとカレンダーを使っていました。
今日の日付がわかりやすいだけでなく、月別アーカイブなどを作成するかわりに使っていました。
パンくずリストやタグやブックやページャーなどで記事へのアクセスを簡単でもれなく構築したかったわけですが、2007年頃の記事はどれにも引っ掛かりません。
ロリポップレンタルサーバやNCSoftのブログやMovable Typeなどから移行だけした記事もあるため仕方がないと思っています。
そこで、日別や月別や年別アーカイブがあれば絶対にもれがないかと思ったわけです。

当時はViews用のカレンダーテンプレートがあるので、そこからコンテンツの投稿日時で作成するテンプレートを選べば、簡単に設置できました。
ビジネスで使うならスケジュール管理用のテンプレートを使えば予定表になります。
こちらの用途の方が圧倒的に多いでしょう。

drupal8では、Date Apiがコアに吸収されて、ちょっと複雑になりました。
現在、コーディングはまだ未完全なようで、スタート/ストップが未実装とか時間帯が未実装とかをみかけることからスケジュール管理用のテンプレート以外なら大丈夫かなと安易に思った次第です。

drupal7(D7)とdrupal8(D8)の比較

D7 D8
プロジェクト モジュール名 プロジェクト モジュール名
date Date コア Datetime
Date API Datetime_range
Date Context calendar Calendar
Date Tools Calendar Datetime
Date Views views templates Views Templates
Date Popup date Date API
Date Repeat API
Date Repeat Field
Date ALL Day
Date Migration Example
calendar Calendar

D7で必要なモジュールはDateモジュールとCalendarモジュールでした。Dateモジュールはたくさんのサブモジュールで構成されています。上から順に、date、date api、date context、date tools、date viewsを有効にしていました。
プロジェクトサイトのスクリーンショットを見てもわかる通り、dateモジュールがカレンダーのベースになっている印象です。
D8になるとコアに吸収されたDate APIはdatetimeと名前を変えてdateのフォーマット変換程度の機能です。日付表示の形式の変更に使われているのかと思います。
Dateプロジェクトは残っていますが、D8で使えるのか疑問があるモジュールの中身で、おそらく使えてもサブモジュールDate API程度だと思います。
calendarモジュールではコアのdatetimeもDate APIも要件にありません。あるのはサブモジュールのcalendar datetimeとviews templatesモジュールのみです。
このviews templatesモジュールはviewsで削除された機能を実現するためのもので、テンプレートからViewsを作成できるようにするものです。

Date Viewsサブモジュールがどこにいったのか?非常に興味があります。
これがcalendarモジュールに組み込まれていなければD7のころのようには使えないでしょう。

Calendarモジュールのインストール

インストールはcomposerで行います。

$ composer require drupal/calendar

これでviews templatesモジュールもインストールされます。

次にモジュールを有効にします。

$ drush en calendar

これでcalendar、calendar datetime、views templatesが有効になります。

カレンダーの設置

サイドバーに設定したいのでblockパーツが必要です。
まず、Viewsのテンプレートからページ用のViewsを作成してこれにブロックを追加して、それを使うことにします。

テンプレートからビューを追加

(/admin/structure/views/template/list)

コンテンツ投稿日時カレンダーを選択します。

投稿日時カレンダー

複製

カレンダーテンプレートの複製

ビューの編集

ブロックの追加

ブロックの追加

これ以降の操作は基本的に作成したブロックのみに行います。
しかし、設定はすべてのディスプレイ共通の設定になっていますので、最初にかならず対象がこのブロックにするようにしてください。

コンテクスチュアルフィルターの追加

コンテクスチュアルフィルターの追加

追加したフィルター(作成日時)の設定を行います。

コンテクスチュアルフィルターの設定

ヘッダーを追加

カレンダーのタイトル表記(月)を追加するため「Calendar Header」を選択します。

ヘッダーを追加

続けて、Calendar Headerの内容を設定します。
ここでページャも表示します。

ヘッダーの設定

ページャーを非表示

ヘッダーにページャーを表示するようにしたのでデフォルトのページャは非表示にします。

ページャーを非表示

miniカレンダーに変更

まず、スタイルの適応範囲がすべてのページになっているので、このままスタイルの設定を変更するとすべてのディスプレイの設定が上書きされてしまいます。
これでは都合が悪いので、スタイルを再設定して対象を「このブロック」に変更しておきます。

スタイルの再選択

次にスタイルの設定からminiカレンダーを選択します。
対象はこのブロックに変更されていますので、他のディスプレイの設定は上書きされません。

スタイルオプションの変更

ディスプレイにリンク

パスに使用するディスプレイの設定

ブロックの設置

/admin/structure/blockにアクセスして、作成したブロックをサイトのページに配置します。

ブロックを配置

ブロックの選択と設定

ブロックの設定

サイトにアクセスすると作成したカレンダーが表示されています。

サイトの表示

メニューの作成

ブロックにメニューを作成すれば日別、週別、月別、年別のページへのアクセスが簡単になります。
以下は、bootstrapを使ったケースです。

カスタムブロックライブラリの作成

(/admin/structure/block/block-content)にアクセスして新規ブロックを作成します。

本文に以下を入力します。(ソースコード)

<nav class="nav">
  <a class="nav-link active" href="/calendar-created/month/">月</a>
  <a class="nav-link disabled" href="/calendar-created/day/">日</a>
  <a class="nav-link disabled" href="/calendar-created/week/">週</a>
  <a class="nav-link disabled" href="/calendar-created/year/">年</a>
</nav>

※テキストフィルターは適切なものを使用してください。

ブロックの配置

作成したカスタムブロックを配置します。
場所はメインページコンテンツのすぐ上に配置します。

ブロック(calendarメニュー)を配置

また、カレンダーの特定のページ(/calendar-created/*)のみ配置するように設定します。

ブロック(calendarメニュー)を設定

ディスプレイタイトルを非表示にする場合はレ点を外します。

ブロック(calendarメニュー)の位置を確認

メインページコンテンツブロックのすぐ上にあるか確認します。

以上で完了です。

サイトの表示

ブロックのタイトルが表示になっているので消したい場合は非表示に設定してください。

考察

日付表示に関しては、サイトの日付と時間のフォーマット(/admin/config/regional/date-time)にていくつかのフォーマットを設定しています。
これらをcontribモジュールでも使っていくのかと思いましたがそうではないようです。

まだまだ未完成のところもあり、以下がうまくいきません。

不具合1:日別カレンダーが表示できない

日別カレンダーの表示の不具合

原因

オーバラップさせるときに「if ($('div.first_item').size()>0  」でエラーが発生しています。
Viewsのプレビューでは発生しないエラーなので、JQueryの書き方が悪いのかもしれません。

対処

エラーが発生しないように修正するか、オーバラップを使用しない設定にする。
次は、日別カレンダーのスタイル設定でオーバラップしない設定です。

日別カレンダーのオーバラップしない設定

記事がある箇所だけ部分的に表示します。

日別カレンダーのオーバラップしない場合

Viewsのプレビューに表示されるものとは異なります。

不具合2:週別カレンダーが表示できない

週別カレンダーの表示の不具合

原因

日別カレンダーと同じ原因です。

対処

エラーが発生しないように修正するか、オーバラップを使用しない設定にする。
次は、週別カレンダーのスタイル設定でオーバラップしない設定です。

週別カレンダーのオーバラップしない設定

記事が存在している箇所だけ部分的に表示します。
Viewsのプレビューに表示されるものとは異なります。

週別カレンダーのオーバラップしない場合

日別や週別のオーバラップのエラーを修正する方法は、「Calendar not display because of : .size() deprecated」に見つけました。
ここにあるパッチの内容に書き換えれば問題なくオーバラップで表示ができます。

不具合3:年別カレンダーでタイトル(月)が表示できない

年別カレンダーの表示の不具合

原因

各月のタイトル表示方法が決まっておらず、その箇所がコメントになっているので表示されません。

{#
/**
 * @file
 * Template to display a view as a mini calendar month.
 *
 * Available variables:
 * - day_names: An array of the day of week names for the table header.
 * - rows: An array of data for each day of the week.
 * - view: The view.
 * - min_date_formatted: The minimum date for this calendar in the format YYYY-MM-DD HH:MM:SS.
 * - max_date_formatted: The maximum date for this calendar in the format YYYY-MM-DD HH:MM:SS.
 *
 * @see template_preprocess_calendar_mini()
 *
 * @ingroup themeable
 */
#}

<div class="calendar-calendar">
  <div class="month-view">
    {% if show_title %} 
      <div class="date-nav-wrapper clear-block">
        <div class="date-nav">
          <div class="date-heading">
            <!-- print theme('date_nav_title', $params) -->
          </div>
         </div>
      </div>
    {% endif %} 
    <table class="mini">
      <thead>
        <tr>
          {% for day_names in cell %}
            <th class="{{ cell.class }}">
             {{ cell.data }}
            </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
          <tr>
            {% for cell in row %}
            <td id="{{ cell.id }}" class="{{ cell.class }}">
              {{ cell.data }}
            </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

show_titleが設定されていないのでこのIF部は処理されていません。
また、print themeの箇所はこのままではエラーになるためコメントになっているのだと思います。
変数名、ラベル名がD7のときとは変更になっているのでその辺のこまかな修正も必要になります。

対処

年別カレンダーを生成するときに、D8での各月のタイトルの表示方法が不明です。
年別に限らず、カレンダータイトルの表示はD7ではDateモジュールのサブモジュールDate Viewsに含まれていたようで、D8のCalendarモジュールにはまだ未実装です。
変数を使って表示するようになっていても肝心の中身が空っぽもしくは器もない状態です。
テーマテンプレートから変数を使えるようにしないといけないのかどうかも含め、テストサイトでいろいろ試さないとわかりません。
ミニカレンダーだけでなくフルカレンダーでも同じ状況でshow_titleとdate_nav_titleが未設定であるため、恒久的な対策ができれば手順の中でヘッダーを設定していた内容が省略できるはずです。

これについても同じ事象が「Month names not showing in year view」にあってパッチが存在していました。ここにある#10のパッチのみでいいようです。

感想

D7と同じカレンダーが作成できるかと期待しましたが、プロジェクトの編成が変更になっていることもあり、D7のころにDateモジュールでできていたものが、D8ではCalendarモジュールだけでは実現できておらずとくにD7のDateモジュールに含まれていた機能はどうなるのか興味があります。
ビジネス用途でこのカレンダーを使うのであればスケジュールテンプレートが使用できてなおかつ予定の登録ができないと意味がないのでまだまだ完成にはかかりそうです。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事