F-Bizについて スケジュール画面

これから、こちらで弊社で開発した中小企業向けグループウェア【F-Biz】について記述していこうかと思います。

第一弾として、軸となる機能である「スケジュール登録機能」について、技術的なことを交えて記述します。

F-Bizではスケジュールを見やすくするために、[FullCalender]といjQueryのプラグインを利用しています。(PC版のみです)
このプラグインは、Google Calenderの見た目に近く、またライブラリは英語ですが比較的分かりやすいマニュアルになっているかと思います。
また、PHPとの親和性も高く、扱いやすいかと思います。

F-Bizのスケジュール表示画面では以下のことができます
1.スケジュールを表示する
2.登録されているスケジュールをクリックすると、当該のスケジュール編集に進む
3.スケジュールのない部分をクリックすると、新規登録画面に進む
4.カレンダーの[all-day]を選択すると、「終日」の予定がデフォルトで作成できる
5.スケジュールを月、週、日で切り替えができる(デフォルトは週)

それぞれについて説明をします。

1 スケジュールはDBに入っているため、サーバー処理を行う必要があります。
[FullCalender]には、ロードイベントを制御する[events]という関数があり、PHPプログラムの呼び出しができます。
 また、戻り値として様々な値で受け取る方式がありますが、今回はjsonで受け取る形式を選びました。

2 登録されているデータのクリックは[eventClick]という関数で取得できます。
1 で作成されたデータは[event]というオブジェクトに格納されます。そこには日付はもちろんのこと、idも管理可能で、1 のデータ作成時に
 データベース検索時のキーとなる値を入れれば、後は任意の編集画面に進むことが出来ます

3,4 空いているスペースのクリックは[dayClick]というイベントで取得できます。
このイベントでは、クリックした日付、時間まで取得できるので、このイベントの遷移先を新規登録画面とし、後は日時と[all-day]を
選択した場合は、そのことを追加すれば取得は可能です

5 切り替えについては、元々ある機能ですが、デフォルトは設定する必要があります。

その他にも、日付を日本語の表記にするなど細かい部分での変更もしていますが、すべてjQueryで変更可能です。
[FullCalender]最大の利点としては、サンプルページ等を見てもらうと分かるのですが、PHPと連携することが前提になっています。

使い方を紹介しているページもいくつかあるので、マニュアルと照らし合わせてみるのもよいかと思います。

お見積もりフォーム