FullCalendar 6:FullCalendarアプリケーション-ドラッグとリアルタイム保存

FullCalendarを使用して、非常に強力なカレンダープログラムを構築することができます.ユーザーは、新規作成、変更、削除などのFullCalendar操作スケジュール、および本明細書で説明するドラッグ、スケジュールイベントのスケールを簡単に行うことができます.
デモンストレーションDEMOダウンロードソースの表示
 
HTML
私たちはスケジュールページをdragと名付けました.htmlは、まずjQueryライブラリ、jQuery ui、fullcalendarプラグインをロードします.

 
にbodyで、カレンダーコンテナdiv#calendarを します.

 
jQuery
FullCalendarはスケジュールイベントをドラッグする を していますが、jquery uiのdraggableプラグインに する があります.ドラッグが するとeventDropコールバック ではpost でajaxリクエストをバックグラウンドphpに し、 されたパラメータにはid: のドラッグイベントのid 、daydiff:ドラッグ の ( オフセット)、minudiff:ドラッグ ( オフセット)、allday: イベントかどうかが まれます.その 、バックグラウンドphp の を し、1(ドラッグ に した)でない 、プロンプトメッセージがポップアップされ、スケジュールイベントがドラッグ の に ります.コードを してください.

$(function() { 
    events: 'json.php', //      
    editable: true, //     
    dragOpacity: {//            
        agenda: .5, 
        '':.6 
    }, 
    //     
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) { 
        $.post("do.php?action=drag",{id:event.id,daydiff:dayDelta, 
        minudiff:minuteDelta,allday:allDay},function(msg){ 
            if(msg!=1){ 
                alert(msg); 
                revertFunc(); //     
            } 
        }); 
    } 
}); 

 
PHP
ドラッグが するとFullCalendarはバックグラウンドdo.phpはajaxリクエストを しました. と じですdo.phpはaction パラメータを し、まずpostからの を し、データテーブルの するスケジュールイベント を し、 イベントであるかどうかと があるかどうかの2つの に づいて なるSQL を し、 にデータテーブルを し、 を します.コードを てください.

... 
}elseif($action=="drag"){//   
    $id = $_POST['id']; 
    $daydiff = (int)$_POST['daydiff']*24*60*60; 
    $minudiff = (int)$_POST['minudiff']*60; 
    $allday = $_POST['allday']; 
    $query  = mysql_query("select * from `calendar` where id='$id'"); 
    $row = mysql_fetch_array($query); 
     
    if($allday=="true"){//        
        if($row['endtime']==0){ 
            $sql = "update `calendar` set starttime=starttime+'$daydiff' where id='$id'"; 
        }else{ 
            $sql = "update `calendar` set starttime=starttime+'$daydiff',endtime=endtime 
+'$daydiff' where id='$id'"; 
        } 
         
    }else{ 
        $difftime = $daydiff + $minudiff; 
        if($row['endtime']==0){ 
            $sql = "update `calendar` set starttime=starttime+'$difftime' where id='$id'"; 
        }else{ 
            $sql = "update `calendar` set starttime=starttime+'$difftime',endtime=endtime 
+'$difftime' where id='$id'"; 
        } 
    } 
    $result = mysql_query($sql); 
    if(mysql_affected_rows()==1){ 
        echo '1'; 
    }else{ 
        echo '   ！';     
    } 
} 

 
のコードは、スケジュールイベントの と イベントを することが です.これにより、スケジュールイベント を にドラッグしてリアルタイムで できるようになります.demoを てみると、かっこいいのではないでしょうか.
 
まとめ
 
スケジュールイベントのスケールについて
スケールとは、イベントが1 2 になり、10:00に した が9:30になり、カレンダービューで するスケジュールイベント を ( ビュー)または ( ビューおよび ビュー)に ばしたり したりするだけで、カレンダービューでスケジュールイベントを および することができます.FullCalendarが するeventResizeメソッドを して にできます.

eventResize: function(event,dayDelta,minuteDelta,revertFunc) { 
    $.post("do.php?action=resize",{id:event.id,daydiff:dayDelta,minudiff:minuteDelta},function(msg){ 
        if(msg!=1){ 
            alert(msg); 
            revertFunc(); 
        } 
    }); 
} 

 
の について
FullCalendarはselectメソッドを しており、ユーザーは のスケジュールを するときに、 に した を し、ポップアップされた スケジュールで と を に することができます.この は を してマウスを までドラッグし、 ボタンを すだけで、 くdemoで しましょう.

selectable: true, //       
select: function( startDate, endDate, allDay, jsEvent, view ){ 
    var start =$.fullCalendar.formatDate(startDate,'yyyy-MM-dd'); 
    var end =$.fullCalendar.formatDate(endDate,'yyyy-MM-dd'); 
    $.fancybox({ 
        'type':'ajax', 
        'href':'event.php?action=add&date='+start+'&end='+end 
    }); 
} 

 
マルチユーザ について
FullCalendarをプロジェクトに するには、CRMシステムで のユーザーがスケジュールを しているなど、 くのユーザーに されるのが です. は のスケジュールや の を することができます. ユーザーは のスケジュールを することはできません.これらのニーズはプロジェクト の に まります.もちろん、データベースの は です.ここでは く しません.
 

なことに、カレンダーには の がありません.どの が の をFullCalendarに することができて、FullCalendarの での に した をします.
 
の の
FullCalendarシリーズでは、FullCalendarの アプリケーション、APIドキュメント、データベースの み り、 、 、 、ドラッグ、スケール、 について しています.Hellowebaご ありがとうございます.
 
hellowebaに するcom』FullCalendarアプリケーション-ドラッグとリアルタイム