fullcalendar.jsのカスタマイズについて

前提・実現したいこと

現在、仕事でwebアプリのコーディングをしているのですが、fullcalendar.jsのカスタマイズで下記の実装方法がわからず困っています。
ドキュメントを見ながら試行錯誤しているのですが、ドキュメントの読み方もイマイチわかりません。
https://fullcalendar.io/docs

□ベースにしているdemo
https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/demos/columns.html

■実装したいこと
0. 「.fc-header-toolbar」と「.fc-view-container」の間にトグルボタンで、「イベントの開始時間」、「イベントtitle」でソートできるボタンの設置
0. 「イベントtitle」で絞り込み検索機能
0. 左の固定カラム（Room）のresources：titleにイベント時間を追記

試したこと

1.については、ボタンの設置自体はappendで挿入することは出来るのですが、onclickでソート機能を実装することができません。

2.については、左の固定カラム（resource.title）だけの絞り込みはできたのですが、イベントと紐付いてないので、左の固定カラムのみ絞り込みされてしまいます。
こちらは単純にresource.titleをregExpしただけなので、イベントと紐付かないのは当たり前でしたが...

3.については、下記でresourceに追記できるのはわかったのですが...
こちらもresoucesのidとeventsのresourceIdの関連付けしてevents.startを取得できればいいのだろうとは思うのですが、どうしたらいいかわかりません。

resourceRender: function(resourceObj, $td) {
}

どなたかご教示いただけないでしょうか？
よろしくお願いします。

以下、スクショとソースコードです。
![]

HTML
1<body>
2
3  <div class="mt-4" style="max-width: 900px; margin: 0 auto 1rem;">
4
5      <div class="col-12 col-sm-8 col-md-6 px-0">
6          <div class="input-group">
7            <div class="input-group-prepend">
8                <span class="input-group-text" id="basic-addon1">Rooms</span>
9            </div>
10              <input type="text" class="form-control w-60" placeholder="Roomsを入力してください" data-search="search-input">
11              <div class="input-group-append" id="search-input">
12                  <button class="btn bg-primary text-white btn-outline-secondary" type="button">検索</button>
13                  <button class="btn btn-outline-secondary clear-input" type="reset">クリア</button>
14              </div>
15          </div>
16      </div>
17
18  </div>
19
20  <div id='calendar'></div>

■並び順トグルボタン

javascript
1  function sortBtn() {
2    $('.fc-header-toolbar').css('overflow','hidden');
3    $('.fc-header-toolbar').append(
4      '<div class=" fc-left">' +
5        '<p class="mb-0 mt-1" style="line-height:1;">並び順<br><span class="small">(昇順)</span></p>' +
6        '<div class="btn-group btn-group-toggle" data-toggle="buttons">' +
7          '<label class="btn btn-light border active">' +
8            '<input type="radio" name="options" id="option1" autocomplete="off" checked> 開催日時' +
9          '</label>' +
10          '<label class="btn btn-light border">' +
11            '<input type="radio" name="options" id="option2" autocomplete="off"> Rooms' +
12          '</label>' +
13        '</div>' +
14      '</div>'
15    )
16  }

■左カラムの日付追記

javascript
1       resourceRender: function(resourceObj, $td) {
2         var start = moment( resourceObj.start ).format('YYYY年MM月DD日 kk:mm');
3         var end = moment( resourceObj.end ).format('kk:mm');
4
5         $td.eq(0).find('.fc-cell-content')
6           .append(
7             '<br><span style="display:block;line-height:1;margin-left:0.35rem;">'+ start + '～' + end +'</span>'
8           );
9       },
10

■データ元一部抜粋

      resources: [
        { id: 'a', title: 'AAAAAA',start: '2018-05-14T10:30:00', end: '2018-05-14T11:30:00' },
        { id: 'b', title: 'BBBBBB', start: '2018-05-17T10:30:00', end: '2018-05-17T11:30:00' },
        { id: 'c', title: 'CCCCCC', start: '2018-05-18T16:00:00', end: '2018-05-18T17:00:00' },
        { id: 'd', title: 'DDDDDD', start: '2018-05-16T16:00:00', end: '2018-05-16T17:00:00' },
        { id: 'e', title: 'EEEEEE', start: '2018-05-21T16:00:00', end: '2018-05-21T17:00:00' },
        { id: 'f', title: 'FFFFFF', start: '2018-05-15T10:30:00', end: '2018-05-15T11:30:00' },
        { id: 'g', title: 'GGGGGG', start: '2018-05-15T11:00:00', end: '2018-05-15T12:00:00' },
        { id: 'h', title: 'HHHHHH', start: '2018-05-15T14:30:00', end: '2018-05-15T15:30:00' },


      events: [
        {
          resourceId: 'a',
          title: 'AAAAAA',
          start: '2018-05-14T10:30:00',
          end: '2018-05-14T11:30:00',
          color: 'red'
        },
        {
          resourceId: 'b',
          title: 'BBBBBB',
          start: '2018-05-17T10:30:00',
          end: '2018-05-17T11:30:00',
          color: 'red'
        },
        {
          resourceId: 'c',
          title: 'CCCCCC',
          start: '2018-05-18T16:00:00',
          end: '2018-05-18T17:00:00'
        },
        {

行動規範の内容に同意します

回答2件

1, ざっとマニュアル見た感じだともしかしたらソートの機能はないかもしれません。（あったらすいません。。。）
もしない場合resourcesとeventsを自力でソートして
.fullCalendar( ‘refetchResources’ )
を実行するとうまくいくかもしれません。
https://fullcalendar.io/docs/refetchResources

2, 現在どのような実装になってますでしょうか？

3, .fullCalendar( ‘getEventSourceById’, id )これでイベントの内容にアクセスできそうです。

idは'resourceObj.id'で取得可能かと思います。
https://fullcalendar.io/docs/resourceRender
https://fullcalendar.io/docs/resource-object

投稿2018/08/01 11:04

keisukeh

総合スコア657

退会済みユーザー

2018/08/02 22:47

ご回答いただきありがとうございます！ 1.ですが、自力でソートを実装したのですが、ドキュメントをひたすら見ていたらresourceOrderというオプションを発見いたしました！ https://fullcalendar.io/docs/resourceOrder 2.については、下記でresourceとeventを絞り込み表示できました。 ```javascript resourceRender: function(resourceObj, $td) { var start = moment( resourceObj.start ).format('YYYY年MM月DD日 kk:mm'); var eventstart = moment( resourceObj.start ); var end = moment( resourceObj.end ).format('kk:mm'); var eventend = moment( resourceObj.end ); var day = moment($('#calendar').fullCalendar('getDate')); var day2 = moment($('#calendar').fullCalendar('getDate')).add(7, 'day'); if($('.fc-timelineWeek-view').length) { if(eventstart >= day && eventend <= day2){ $td.eq(0).find('.fc-cell-content').append(' '+ start + '～' + end +''); }// else {$td.eq(0).parent('tr').hide();} } else if($('.fc-timelineMonth-view').length) { $td.eq(0).find('.fc-cell-content').append(' '+ start + '～' + end +''); } }, ``` 絞り込みはできるのですが、週表示で表示期間を移動して検索をすると、その週にイベントがないresource.titleも出てきてしまい、resourceとeventの表示が連動しません。あとは表示期間にあるイベントのみ表示を出せるようになると、目標の実装になるのですが... 3.についても、上記の記述で表示期間のみevent.startとevent.endを表示できるようになりました。あとは2.を解消できるよう、調べてみます！

行動規範の内容に同意します

ベストアンサー

2.の絞り込み検索も実装できました！
resourceのイベント期間タグにclassをつけ、regExp後にclassの有無をifしたら出来ました。

javascript
1    $('#search-input button:first-child').on('click', function(){
2        var search = $('[data-search="search-input"]').val();
3
4        Search(search);
5    });
6    function Search(keyword) {
7      var regExp = new RegExp(keyword);
8
9      $('.fc-body .fc-resource-area table tbody').find('tr').hide().each(function(){
10        var tr = $(this);
11
12        $(this).find('td').each(function(){
13          if ($(this).text().match(regExp) && $(this).find('.date-span').length ) {
14            tr.show();
15          }
16        });
17      });
18      $('.fc-body .fc-time-area .fc-content table tbody').find('tr').hide().each(function(){
19        var tr = $(this);
20
21        $(this).find('.fc-title').each(function(){
22            if ($(this).text().match(regExp)) {
23                tr.show();
24            }
25        });
26      });
27    }