ページのイメージ
WEB開発 2017/06/06

Fullcalendarを使ってGoogleカレンダー風タスク管理ツールを作成。

城所聖也
城所聖也
  •  
  • このエントリーをはてなブックマークに追加

 

こんにちは。エンジニアのキドコロです。

 

皆さんはタスク管理を何で行っていますか?

 

紙派の人もいれば、デジタル派の人もいるかと思います。

 

自分はと言うと、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

 

Category

Ranking