🧙FILEMAKER プラグイン WINDOWS専用など: FullCalendar on FileMaker｜FileMakerにリッチなカレンダーインターフェイスを表示　01

FileMaker 12

WEBビューアに FullCalendar を表示させて

URLスキーム(FMP://192.168.10.0/ファイル名.fmp12?script=スクリプト名)を利用して FullCalendar と連携!

FullCalendar

http://arshaw.com/fullcalendar/

以下からFullCalendarをダウンロード(現時点で最新は、fullcalendar-1.6.1.zip)

FullCalendar - Download : http://arshaw.com/fullcalendar/download/

適当なところへ解凍

[demos]フォルダの中の[default.html]を使用します。

[default.html]をテキストエディタで開くと

「stylesheet」とか「jquery」とか読み込んでいます。

パスを書き換えてファイルを読み込んでもイイのですが、今回は、FileMakerのファイルに内包させます!

FileMakerで新規データベース「fullcalendar_fm.fmp12」を作成。

テーブル：SYSTEM を作成し

フィールド：

fullcalendar.css

fullcalendar.print.css

jquery.js

jquery_ui.js

fullcalendar.min.js

ファイル名っぽいフィールド名でグローバルフィールドを作成。

それぞれのフィールドにファイルの中身をコピー&ペースト!

[demos]フォルダの中の[default.html]をWEBビューア用に書き換えます。

[default.html]をテキストエディタで開き「"」(ダブルクォーテーション)を「'」(シングルクォーテーション)に置換します。

(画面のテキストエディタは、TeraPad)

link href=

と

script src=

の部分をFileMakerのフィールドから読み込むように書き換えます。

「fullcalendar_fm.fmp12」にWEBビューアを設置。

"data:text/html," &.....

を記述し、ここに記述の所に[default.html]の内容を貼り付け。

WEBビューアに FullCalendar が表示されます。

FullCalendar のドラッグイベントでFileMakerのスクリプトを実行。

以下でドラッグした時のイベントが取得できるので、

FullCalendar Documentation - eventDrop : http://arshaw.com/fullcalendar/docs/event_ui/eventDrop/

eventDrop

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {

        alert(
            event.title + " was moved " +
            dayDelta + " days and " +
            minuteDelta + " minutes."
        );

        if (allDay) {
            alert("Event is now all-day");
        }else{
            alert("Event has a time-of-day");
        }

        if (!confirm("Are you sure about this change?")) {
            revertFunc();
        }

    }
});

FullCalendar のドラッグイベントでFileMakerのスクリプトを実行できる用にURLスキームを追加。

location.href = 'FMP://192.168.0.6/fullcalendar_fm.fmp12?script=script01&$title=' + event.title+ '&$start=' + event.start;

※IPアドレス(192.168.0.6)の部分は、 127.0.0.1 とか localhost だとエラーになります!

    editable: true,
    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;
    }

WEBビューア