FullCalendar 5:FullCalendarアプリケーション-スケジュールイベントの編集と削除

FullCalendarはプロジェクト開発に活用できます.この記事では、FullCalendarでスケジュールイベントを新規作成する方法について説明しました.今日は、FullCalendarでスケジュールイベントを編集および削除する方法について説明します.これにより、FullCalendarでの「削除変更」の一連の操作を完了します.
デモンストレーションDEMOダウンロードソースの表示
 
HTML
前の記事FullCalendarアプリケーションである新規スケジュールイベントと同様に、HTMLページではcal_を使用しています.opt.html、ここでHTMLコードと関連jsとcssファイルのロードは詳しく説明しません.初めて本文を読む場合は、FullCalendarシリーズの最初の文章から見てください.
 
jQuery
カレンダービューでは、編集するスケジュールイベント項目をクリックしてfancyboxポップアップ編集レイヤを呼び出します.FullCalendarではイベントのeventClickをクリックする方法が用意されています.コードを参照してください.

$(function() { 
    $('#calendar').fullCalendar({ 
        //         
        eventClick: function(calEvent, jsEvent, view) { 
            $.fancybox({ 
                'type':'ajax', 
                'href':'event.php?action=edit&id='+calEvent.id 
            }); 
        } 
    }); 
}); 

 
イベント項目をクリックしてfancyboxを呼び出し、新しいイベントと同様にajax方式で、パラメータを渡すことでフォームページの編集を要求しました.
 
event.php
event.phpは,要求されたパラメータに基づいてidに対応するカレンダーイベントを読み出し,データの完全な現実を編集フォームに格納する.読み出しと表示編集レイヤ全体のコードをeventに混載する.phpでは、もちろん実際の開発ではzend、thinkphpなどのフレームワークを使ってPHPとhtmlテンプレートを分離する可能性があります.次のコードでは、編集モジュールをカスタム関数editform()に書きます.event.phpは、伝達されたactionパラメータに基づいてeditform()を呼び出す.

 
 
 
    
    
 
    
 
     
    
    ：
 
    
    ： 
    > 
         
        00 
        ...//      option，   
    : 
     
         
        00 
        ... 
     
     
    
 
    
>    ： 
    > 
         
        ... 
    : 
     
         
        ... 
     
     
    
 
    
 
    >  
   
    >      
    
 
    
  
 
    
 
 
 

 
肝心なのは日付と時間の表示を処理することで、もちろんこれも本文の重点ではありませんて、みんなはソースコードをダウンロードしてゆっくり研究することができます.
コード処理フォームのコミットと検証を追加する必要があります.上記の新しいイベントと同様にjqueryを使用します.form.jsプラグイン、コードも基本的に新しいイベントと同じです.

$(function(){ 
    $(".datepicker").datepicker({minDate: -3,maxDate: 3}); 
    $("#isallday").click(function(){ 
        if($("#sel_start").css("display")=="none"){ 
            $("#sel_start,#sel_end").show(); 
        }else{ 
            $("#sel_start,#sel_end").hide(); 
        } 
    }); 
     
    $("#isend").click(function(){ 
        if($("#p_endtime").css("display")=="none"){ 
            $("#p_endtime").show(); 
        }else{ 
            $("#p_endtime").hide(); 
        } 
        $.fancybox.resize();//        
    }); 
     
    //     
    $('#add_form').ajaxForm({ 
        beforeSubmit: showRequest, //     
        success: showResponse //     
    });  
     
}); 
 
function showRequest(){ 
    var events = $("#event").val(); 
    if(events==''){ 
        alert("       ！"); 
        $("#event").focus(); 
        return false; 
    } 
} 
 
function showResponse(responseText, statusText, xhr, $form){ 
    if(statusText=="success"){     
        if(responseText==1){ 
            $.fancybox.close(); 
            $('#calendar').fullCalendar('refetchEvents'); //           
        }else{ 
            alert(responseText); 
        } 
    }else{ 
        alert(statusText); 
    } 
} 

 
do.php
do.phpは、新規、編集、削除イベントを処理するために使用されます.編集イベントは主にフォームpostからのデータを受信し、データテーブルのidに対応するイベントデータの内容を更新し、更新に成功したら1を返すと、フロントエンドが更新に成功したメッセージを受信するとfancyboxレイヤが自動的に閉じられ、カレンダービューがリフレッシュされます.

include_once('connect.php');//      
 
$action = $_GET['action']; 
if($action=='add'){ 
    //     
}elseif($action=="edit"){ 
    //     
    $id = intval($_POST['id']); 
    if($id==0){ 
        echo '     ！'; 
        exit;     
    } 
    $events = stripslashes(trim($_POST['event']));//     
    $events=mysql_real_escape_string(strip_tags($events),$link); //  HTML  ，        
 
    $isallday = $_POST['isallday'];//        
    $isend = $_POST['isend'];//        
 
    $startdate = trim($_POST['startdate']);//     
    $enddate = trim($_POST['enddate']);//     
 
    $s_time = $_POST['s_hour'].':'.$_POST['s_minute'].':00';//     
    $e_time = $_POST['e_hour'].':'.$_POST['e_minute'].':00';//     
 
    if($isallday==1 && $isend==1){ 
        $starttime = strtotime($startdate); 
        $endtime = strtotime($enddate); 
    }elseif($isallday==1 && $isend==""){ 
        $starttime = strtotime($startdate); 
        $endtime = 0; 
    }elseif($isallday=="" && $isend==1){ 
        $starttime = strtotime($startdate.' '.$s_time); 
        $endtime = strtotime($enddate.' '.$e_time); 
    }else{ 
        $starttime = strtotime($startdate.' '.$s_time); 
        $endtime = 0; 
    } 
 
    $isallday = $isallday?1:0; 
    mysql_query("update `calendar` set `title`='$events',`starttime`='$starttime',`endtime`='$endtime', 
`allday`='$isallday' where `id`='$id'"); 
    if(mysql_affected_rows()==1){ 
        echo '1'; 
    }else{ 
        echo '   ！';     
    } 
}elseif($action=="del"){ 
    //     
}else{ 
     
} 

 
スケジュールイベントの削除
ポップアップ編集テーブルの単層には、削除ボタンをクリックするとajax要求がdoに送信される削除ボタンもある.phpではdo.phpは、要求に応じてデータテーブルの対応するスケジュールレコードを削除し、成功した情報を返す.
はいphpにはjsも追加する必要があります.

$(function(){ 
    ... 
    //     
    $("#del_event").click(function(){ 
        if(confirm("       ？")){ 
            var eventid = $("#eventid").val(); 
            $.post("do.php?action=del",{id:eventid},function(msg){ 
                if(msg==1){//     
                    $.fancybox.close(); 
                    $('#calendar').fullCalendar('refetchEvents'); //           
                }else{ 
                    alert(msg);     
                } 
            }); 
        } 
    }); 
}); 

 
do.phpも削除操作を加えます.

... 
}elseif($action=="del"){//   
    $id = intval($_POST['id']); 
    if($id>0){ 
        mysql_query("delete from `calendar` where `id`='$id'"); 
        if(mysql_affected_rows()==1){ 
            echo '1'; 
        }else{ 
            echo '   ！';     
        } 
    }else{ 
        echo '     ！'; 
    } 
} 

 
はい、本文はfullCalendarカレンダーイベントの編集と削除を紹介しました.本文で与えられたコードは一貫していません.直接コピーして使用しないことをお勧めします.理解してからテストすることができます.もちろん、怠け者であれば、スケジュールイベントの読み取り、新規作成、編集、削除機能など、本明細書で提供されているパッケージファイルをダウンロードすることができます.Hellwoeba.comご注目ありがとうございます.これから月光光はfullCalendarの最後の操作:スケジュールイベントのドラッグと保存について説明し、まとめます.ご注目ください.
 
hellowebaに由来するcom』FullCalendarアプリケーション——スケジュールイベントの編集と削除