a-blog cms のスケジュールに簡易なカレンダーUIを表示してみる

2016-12-08

a-blog cms のスケジュールに簡易なカレンダーUIを表示してみる

この記事は a-blog cms Advent Calendar 2016 の 8日目の内容です。

今年の秋に開催されたa-blog cms 勉強会 in 札幌 x SaCSSでのこと、管理画面のスケジュール機能に、カレンダーのUIを表示させて、そこで簡易な選択ができる機能があると、日付を選択するだけの機能としてはとても楽になる、というような意見がでたので、簡易で何かできないかとその場でさっと表示だけさせてみようと試みたというのを書こうと思います。

スケジュールのUI

現在の標準では、各月の各日付に input での入力ができるようになっているのみなので、曜日とかは書いていても、何日が何曜日でというのがイメージしづらいので、カレンダーのUIがほしいというのが要望らしい。

カレンダーのUI、凝ることもできるけど、とりあえず標準にある機能に、JavaScriptを書いてとりあえず表示させてみようとこころみた。

管理画面の変更

管理画面の変更なので、まずは themes/system/admin/schedule/edit-data.html のファイルを、設定しているテーマのディレクトリにコピーする。

簡易なので script 要素をそのファイルに書いて、 <div id="datepicker"></div>

edit-data.html：適当な位置に挿入

とりあえず今回は class="acms-admin-admin-title2" の下くらいに div と script を

<div id="datepicker"></div>
<script></script>

用意した script の中にJSを入れようと思います

同胞されている jQuery UI の Datepicker を使う

a-blog cms にはデフォルトで jQuery UI が入っているので、簡易のでそれを使うことにしてみます。

$( "#datepicker" ).datepicker();

・・・表示されない。エラー。実行のタイミングがどうもよくない。

a-blog cms では現在非推奨になったけど、今回の簡易のところで実行するようにを ACMS.Ready(function(){}) を入れます。実際はJavaScriptファイルに書いて acms.jsの前にjQueryを読み込むようにしてください。

読み込みが必要なJavascriptファイル | a-blog cms 制作者向け情報

非推奨だけど今回用

ACMS.Ready(function(){
  $( "#datepicker" ).datepicker();
});

とりあえずデータピッカーが表示された。

編集している月を表示するように変更

ただ表示しただけだと、作業している日が含まれている月しか表示されないので、管理画面で表示している月が出るようにしてみる

HTMLにscriptを直接埋めているので年月をテンプレからいれる

ACMS.Ready(function(){
  $( "#datepicker" ).datepicker({
    defaultDate: '{month}/01/{year}'
  });
});

選択している月にさえなればよいので、日付は01を指定しておきます。

JavaScriptを別ファイルにしている場合は、年と月のテキストを取得し、取得したその値を使うようにする必要があります。年の要素に id="dateYear" を月の要素に id="dateMonth" をつけてその値を取得します。

ACMS.Ready(function(){
  var calDate = new Date($('#dateYear').val() + '/' +  $('#dateMonth').val() + '/01');
  var y = calDate.getFullYear();
  var m = calDate.getMonth() + 1;
  $( "#datepicker" ).datepicker({
    defaultDate: m+'/01/'+y,
  });
});

マルチセレクトを簡易に実装

とりあえず選択できていることがわかればよいように、スタイルをつけてみます。

ACMS.Ready(function(){
  var calDate = new Date($('#dateYear').val() + '/' +  $('#dateMonth').val() + '/01');
  var y = calDate.getFullYear();
  var m = calDate.getMonth() + 1;
  var selected_date = [];
  $( "#datepicker" ).datepicker({
    defaultDate: m+'/01/'+y,
    onSelect: function( select_date )　{
      if ( selected_date[select_date] === undefined ) {
        selected_date[select_date] = 1;
      }
      else {
        delete selected_date[select_date];
      }

      setTimeout( function()　{
        for ( i in selected_date) {
          var data = i.split('/');
          var year = data[0];
          var month = data[1];
          var day = Math.floor(data[1]);

          // 日を探して色をつける
          $('.ui-datepicker-calendar a').each(function(){
            var $this = $(this);
            if ( $this.text() == day ) {
              $this.parent('td').css('background-color','#F00');
            }
          });
        }
      }, 100);
    }
  });
});

簡易に日付を配列のキーにして登録できるようにしてみました。

これで簡易ですが、マルチセレクトは完了。

あとは配列にいれた selected_date をカスタムデータとして残していじるなり分解して加工して入れるなりしておけば、日付を選択という登録だけは完了になります。

保存の部分と保存していた値が入っていたら、というのは今回未実装ですが、とりあえず簡易で日付選択できるようにするまでの流れでした。

後日ちゃんと取り出しとか出力も記載できるようにしたいと思います。

参照リンク：