こんにちは。エンジニアのキドコロです。
皆さんはタスク管理を何で行っていますか？
紙派の人もいれば、デジタル派の人もいるかと思います。
自分はと言うと、Redmineを使用してタスクの管理を行っています。
ただRedmineはとても便利ではあるのですが、チケットが増えすぎてしまうと、うまく把握できなくなってしまうことが少し欠点かなと感じています。
なので今回はFullcalendarというjQueryのライブラリを使用して、そのあたりうまく解消してみたいなと思います。
あくまでモックで作っているので、かなり端折っている点はご了承ください。
完成図は下記のような形を想定しています。
左のチケットには現在の手持ちのチケット(チケットでなくタスクでも可)を表示させ、そのチケットをカレンダー上にドラッグすることでgoogleカレンダー風に管理できる想定です。
左のチケット欄が全てなくなれば、現状スケジュールに収まっていないタスクがないことがわかります。
<----------実装 DB構成---------->
テーブル1：tickets
カラム：id,name,removed,deleted
テーブル2：events
カラム：id,title,start,end,removed,deleted
ticketsテーブルは左のチケット一覧用に用意しています。removedカラムはチケットをカレンダー上にドラッグした際に1にするようにし、カレンダーに登録されたチケットが一覧に出ないようにするために使用します。
eventsテーブルはカレンダー表示用に用意しています。詳細はFullcalendarの公式ページをみてもらえればと思いますが、title、start、endがイベント描画に必要です。
<----------実装 プログラム---------->
fullcalendarのdroppableをtrueにすることでイベントのドラッグが可能になります。
使用例：https://codepen.io/subodhghulaxe/pen/qEXLLr
使用するFullcalendarメソッド
drop：一覧からカレンダー上にドラッグした際に使用
eventDragStop：カレンダー上のイベントドラッグ時に使用
eventResize：リサイズ時に使用
一例ですが、自分はdropに下記のように書き、サーバーサイドで送られてきたtitle、start、endを元にeventの登録を行なっています。
drop: function(date, jsEvent, ui, resourceId) {
var params = new Object();
var date = moment(date);
params['title'] = this.innerText;
params['start'] = date.format('YYYY-MM-DD HH:mm:ss');
params['end'] = date.add(2, "hour").format('YYYY-MM-DD HH:mm:ss');
$.ajax({
type: "POST",
url: "/dev/ajax",
data: params
})
},
ほぼ同様の書き方でeventDragStop、eventResizeにも記述すれば、それぞれの処理に応じてイベントの保存が可能になり、上記機能の実現ができます！
Fullcalendarはかなり機能が豊富なライブラリで、短時間で上記のようなgoogleカレンダー風のUIが実現できたり、グラフの描画にも優れているのでとてもオススメです！
このあたりで検索するとサンプルが多くあるので興味のある方はぜひ見てみてください。
codepen
https://codepen.io/search/pens/?limit=all&page=1&q=fullcalendar
jsfiddle
https://www.google.co.jp/search?q=site:jsfiddle.net+fullcalendar&gws_rd=cr&ei=ojA2WZPoBcK68QWAxrnYCQ
しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！
