「SalesforceのカレンダーとGoogleカレンダーを同期するサービスはあるけど、Salesforce上でGoogleカレンダーのようなUI画面を使いたい」と思ったことはありませんか?


そういう時はVisualforce上でjQueryのカレンダープラグイン”FullCalendar”を利用すると簡単に実装できます。
(jQueryのプラグインを使っているので、Salesforce以外でも役に立つと思います)


今回は、通常のカレンダー(列:日付、行:時間)ではなく、会議室のようなリソース毎のスケジュールを表示する方法を実装してみました。
※FullCalendarの導入手順は参考になるサイトが沢山あるので、ここでは省略します。

 

 

#仕様
Salesforceのカスタムオブジェクトで管理している会議室の予約状況を表示するUI画面(Googleカレンダーのような)を作る

 

●処理の流れ
(画像をクリックすると拡大します)

 

●実装後のカレンダー
(画像をクリックすると拡大します)

 

主なポイントは2点です。
FullCalendarの拡張機能であるFullCalendar-Columnsで実現しています。

① スケジュールの列となるviewsを設定

⇒ typeに’multiColAgenda’と指定するとリソース毎のカレンダー表示になります。 ‘numColumns’に列数、’columnHeaders’に列名を指定します。

② views毎にイベントを設定

⇒ 下図のサンプルは、Salesforceのカスタムオブジェクトから取得したデータを表示しています。基本的に、標準的なFullCalendarと同じ要領で値を設定します。ポイントになるのは、’column’です。この’column’に設定した値によって、どの列のイベントを表示したいかを判断します。正しい列にイベントが表示されるように工夫する必要があります。

サンプルでは、0:14FーA会議室、1:11Fー大会議室、2:14FーC会議室…としています。columnが0だと、14FーA会議室のイベントとしてカレンダーにプロットされます。

↓↓サンプル図
(画像をクリックすると拡大します)

  サンプルソース   

Visualforce

Apex

 

  注意点       

①時差にご注意

Salesforceのオブジェクト内の日付項目は全てUTC(協定世界時)で記録されています。UTCはJST(日本時間)から-9時間の時差があるので注意です!特にUTCとJSTの時差で日付が変わってしまうところは要注意です。ちゃんと日付処理しないとイベントがカレンダーにプロットされません。

②日時が固定できない

リソース(会議室数)が多い場合、カレンダーをスクロールすると左端の時間が見えなくなります。実装はしていませんが、FullCalendar.cssを駆使すればなんとか固定できそうです。

(画像をクリックすると拡大します)