前提・実現したいこと
現在、仕事で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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/08/02 22:47