ラベル FullCalendar の投稿を表示しています。 すべての投稿を表示
ラベル FullCalendar の投稿を表示しています。 すべての投稿を表示

2013年6月15日土曜日

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

FileMaker 12 

WEBビューアに FullCalendar を表示させて
URLスキーム(FMP://192.168.10.0/ファイル名.fmp12?script=スクリプト名)を利用して FullCalendar と連携!

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ビューア

FileMaker側のスクリプトは、ダイアログを表示させるだけのカンタンなモノです。



FileMakerの「ネットワーク共有」はONにして下さい。
一番最初にURLスキームを実行した時は、「ウインドウ名 - 2」で新しいウインドウが開きます。




FullCalendar のドラッグイベントでFileMakerのスクリプトが実行されダイアログを表示。
タイトルと日付も取得できています!



つづく.....