FileMakerのスクリプトでイベントデータを FullCalendar に表示し、月の移動を行う。
FullCalendar は、
と記述すると、月の移動ができるので これもFileMakerで育成し $$GOTO に入れる。
WEBビューアの記述(fullcalendar_fm.fmp12)
「Event.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>
"
fullcalendar_fm.fmp12|スクリプト: View_Month(date)
FullCalendar 用のJSONデータをFileMakerのスクリプトで育成し、グローバル変数 $$EVENT に 入れる。
FullCalendar は、
と記述すると、月の移動ができるので これも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 件のコメント:
コメントを投稿