2013年7月2日火曜日

FullCalendar on FileMaker｜FileMakerにリッチなカレンダーインターフェイスを表示　02

FileMakerのスクリプトでイベントデータを FullCalendar に表示し、月の移動を行う。

FullCalendar 用のJSONデータをFileMakerのスクリプトで育成し、グローバル変数 $$EVENT に 入れる。

FullCalendar は、
$('#calendar').fullCalendar( 'gotoDate', 2013 , 12-1 );
と記述すると、月の移動ができるので これもFileMakerで育成し $$GOTO に入れる。

WEBビューアの記述(fullcalendar_fm.fmp12)
"data:text/html;charset=utf-8," & 

"
<!DOCTYPE html>
<html>
<head>

<style type='text/css'>"
 & SYSTEM::fullcalendar.css
 & "@media print {"
 & SYSTEM::fullcalendar.print.css
 & "}"
 & "</style>

<script>" 
 & SYSTEM::jquery.js
 & SYSTEM::jquery.ui.js 
 & SYSTEM::fullcalendar.min.js
 & "</script>

<script>

 $(document).ready(function() {

  var hi=$('html').height();
  

  $('#calendar').fullCalendar({
   editable: true,
   events:[" & $$EVENT & "],


   eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
    location.href = 'FMP://192.168.0.6/fullcalendar_fm.fmp12?script=script01&$title=' + event.title+ '&$start=' + event.start;
   },/*eventDrop:*/


   eventClick: function(event) {
    location.href = 'FMP://192.168.0.6/fullcalendar_fm.fmp12?script=script01&$title=' + event.title+ '&$start=' + event.start;
   },/*eventClick:*/

   height: hi

  });/*$('#calendar').fullCalendar*/

" & $$GOTO & "
/*$('#calendar').fullCalendar( 'gotoDate', 2013 , 12-1 );*/

  
 });/*$(document).ready*/

</script>
<style>

 body {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  font-family: \"Lucida Grande\",Helvetica,Arial,Verdana,sans-serif;
  }

 #calendar {
  width: 100%;
  margin: 0 auto;
  }

</style>
</head>
<body>
<div id=\"calendar\"></div>
</body>
</html>

"
「Event.fmp12」を作成。


fullcalendar_fm.fmp12｜スクリプト： View_Month(date)
FullCalendar 用のJSONデータをFileMakerのスクリプトで育成し、グローバル変数 $$EVENT に 入れる。

 FullCalendar は、
$('#calendar').fullCalendar( 'gotoDate', 2013 , 12-1 );


と記述すると、月の移動ができるので これもFileMakerで育成し $$GOTO に入れる。


#
変数を設定 [ $date; 値:Get(スクリプト引数) ]
変数を設定 [ $$CurrentDate; 値:$date ]
変数を設定 [ $Y; 値:Year ( $date ) ]
変数を設定 [ $Y; 値:Year ( $date ) ]
変数を設定 [ $M; 値:Month ( $date ) ]
変数を設定 [ $START_D; 値:Date ( $M ; -6 ; $Y ) ]
変数を設定 [ $END_D; 値:Date ( $M+1 ; 7 ; $Y ) ]
#
変数を設定 [ $$GOTO; 値:"$('#calendar').fullCalendar( 'gotoDate', " & $Y & " , " & $M-1 & " );" ]
#
変数を設定 [ $Field; 値:"id,title,start ,\"end\",allDay" ]
変数を設定 [ $Result; 値:ExecuteSQL ( " SELECT " & $Field & " FROM Event WHERE start BETWEEN '" & $START_D & " 00:00:00' AND '" & $END_D & " 23:59:59' " ; "" ; "" ) ]
変数を設定 [ $FieldValue; 値:Substitute ( $Field ; [ "," ; ¶ ] ; [ "\"" ; "" ] ) ]
#
変数を設定 [ $MAX; 値:ValueCount ( $Result ) ]
変数を設定 [ $n; 値:1 ]
変数を設定 [ $event; 値:"" ]
Loop
Exit Loop If [ $n > $MAX ]
変数を設定 [ $row; 値:GetValue ( $Result ; $n ) ]
変数を設定 [ $row; 値:Substitute ( $row ; "," ; ¶ ) ]
#
変数を設定 [ $Fields_MAX; 値:ValueCount ( $FieldValue ) ]
変数を設定 [ $k; 値:1 ]
変数を設定 [ $event; 値:$event & "{" ]
Loop
Exit Loop If [ $k > $Fields_MAX ]
変数を設定 [ $e; 値:GetValue ( $FieldValue ; $k ) ]
変数を設定 [ $sq; 値:Case ( $e = "allDay" ; "" ; Char ( 39 ) /*デフォルト*/ ) /* Char ( 39 ) シングルクォーテーション */ ]
変数を設定 [ $event; 値:$event & $e & ":" & $sq & GetValue ( $row ; $k ) & $sq ]
If [ $k ≠ $Fields_MAX ]
変数を設定 [ $event; 値:$event & "," ]
End If
変数を設定 [ $k; 値:$k+1 ]
End Loop
変数を設定 [ $event; 値:$event & "}" ]
If [ $n ≠ $MAX ]
変数を設定 [ $event; 値:$event & "," ]
End If
#
変数を設定 [ $n; 値:$n+1 ]
End Loop
変数を設定 [ $$EVENT; 値:$event ]
Web ビューアの設定 [ オブジェクト名: "WEB1"; 処理: リセット ]


fullcalendar_fm.fmp12｜スクリプト： Button


FileMakerのレイアウトにボタンを作成。
真ん中のボタンは、引数に「Get( 日付 )」
左は、「"-1"」
右は、「"+1"」

これでFileMakerのスクリプトでWEBビューア上の「FullCalendar」へ イベントの表示と月の移動ができます。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)