FullCalendar 4:FullCalendarアプリケーション-新規スケジュールイベント

8260 ワード
Javascript /Jquery を選択します。 Bootstrap Web
FullCalendarはスケジュールや代行などのイベントをカレンダー形式で直感的に展示していますが、カレンダーのイベントはどのように追加されているのでしょうか.この文書では、PHP+MySQL+jQueryを使用して、FullCalendarでイベントを新規作成する方法について説明します.
デモンストレーションDEMOダウンロードソースの表示
以前に発売されたFullCalendarアプリケーションシリーズの記事では、FullCalendarの基本的な使用、FullCalendarのオプション構成API、およびFullCalendarがデータベース内のデータをどのように読み取るかについて説明しています.本稿は、前のいくつかの知識点に基づいています.FullCalendarについてまだ知らない場合は、FullCalendarに関する記事を参照することをお勧めします.本文はあなたが基本的なhtml、cssの知識を備える以外に、PHP、MySQLとjQuery技術に対して一定の基礎が必要で、どのようにデータベースに接続するか、およびPHPとjQueryの基本的な関数の方法の使用について本文は説明しません.
 
HTML
新しい名前はcal_ですopt.htmlのファイルを読み込み、必要なCSSとJSファイルを読み込みます.

 
のファイルでは、jquery-uiはイベントドラッグ、 セレクタ を し、fancyboxは しいイベントをクリックしたときにポップアップレイヤ を します.
にbodyに のコードを します.

 
jQuery
はfullCalendarカレンダープラグインを び し、カレンダーのeventsイベントデータはjsonに する.phpは、 の で したように、PHPでmysqlデータを み し、JSONデータフォーマットを してfullCalendarレンダリングイベントに す.
はい、ここで なステップが ました.カレンダーの の の のチェックをクリックすると、イベント を する があるレイヤがポップアップされ、レイヤのフォームに を してコミットすることで、 しいイベントの が します.
FullCalendarは、dayClickメソッドを します.dayClickが した 、コールバック を び します.ここでは、まず、ポップアップ・レイヤのフォームに をパラメータとして す があるため、fullCalendarの フォーマット (fullCalendarドキュメントに されています)を います. にfancyboxポップアップレイヤを び し、ajax び しを します.urlはeventです.php、パラメータを します. は なコードです.
$(function() { 
    $('#calendar').fullCalendar({ 
        events: 'json.php', //      
        dayClick: function(date, allDay, jsEvent, view) { 
            var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//      
            $.fancybox({//  fancybox    
                'type':'ajax', 
                'href':'event.php?action=add&date='+selDate 
            }); 
        } 
    }); 
});

 
Fancyboxのポップアップ・レイヤの については、Fancyboxの なポップアップ・レイヤ・エフェクトについて、この の を してください.
 
event.php
Fancyboxはajaxを してeventを び した.phpの .event.phpパラメータを すると、 のような しいイベントのフォームがポップアップ・レイヤに されます.
 
    
    
 
    
 
     
    
    ：
 
    
    ：

 
ポップアップ・レイヤでは、 ボックスをクリックするとjquery uiのdatepicker セレクタが び されます.2つ は、「 」と「 」チェック・ボックスを すると、 のフォーム・コントロールが され、 に「OK」と「キャンセル」ボタンの が になります.
まずイベントでphpにjquery uiのスタイルとajax フォームをロードするプラグイン:jquery.form.js.

 
に、 セレクタを び し、「 」および「 」チェックボックスを したときの を します.
$(function(){ 
    $(".datepicker").datepicker();//        
    $("#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();//        
    }); 
});

 
カレンダーセレクタの については、 : セレクタ:jquery datepickerの について します.チェックボックスをオフにすると、 するフォームの が され、 になるので、 してみる があります.「 」オプションをオフにすると、ポップアップレイヤの さが し、$を び すことができます.fancybox.resize()を して さを に します.そうしないと、ポップアップレイヤでスクロールバーが に します.
ポップアップレイヤの の にフォームをコミットするのは らかですevent.phpフォームコードのactionがdoにコミットされました.phpで しました.jqueryを び します.form.jsは を い,フォームのコミット にフォーム を い,ここでbeforeSubmitはコールバック showRequest()を び し,コミットに するとsuccessコールバック showResponse()を び す.jqueryについてform.jsの は、 でhellowebaで しますので、ご ください.
$(function(){ 
    //     
    $('#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); 
    } 
}

 
showResponse()は、 に じてdoを する.phpが すコンテンツは、 した (データの に した を す)、ポップアップレイヤを じ、fullcalendarのrefetchEventsメソッドですべてのカレンダーイベント(カレンダー の をローカルにリフレッシュした )を ロードします.そうしないと、エラー が されます.
 
do.php
do.phpは、 で するカレンダーイベントの と を むフォームのコミットを します.フォームデータを し、MySQLデータテーブルにデータを き み、 を します.
include_once('connect.php');//      
 
$action = $_POST['action']; 
if($action=='add'){ 
    $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); 
    }elseif($isallday=="" && $isend==1){ 
        $starttime = strtotime($startdate.' '.$s_time); 
        $endtime = strtotime($enddate.' '.$e_time); 
    }else{ 
        $starttime = strtotime($startdate.' '.$s_time); 
    } 
 
    $colors = array("#360","#f30","#06c"); 
    $key = array_rand($colors); 
    $color = $colors[$key]; 
 
    $isallday = $isallday?1:0; 
    $query = mysql_query("insert into `calendar` (`title`,`starttime`,`endtime`,`allday`,`color`)  
    values ('$events','$starttime','$endtime','$isallday','$color')"); 
    if(mysql_insert_id()>0){ 
        echo '1'; 
    }else{ 
        echo '    ！'; 
    } 
}

 
では、fullcalendarでスケジュールイベントを する れを に しました.コードが く、 の プラグインを び しています. に ると し があります. な がダウンロードしてからゆっくり えてください. にfullcalendarがカレンダーイベントを して する 、カレンダーイベントをドラッグして する などを します.Hellowebaはあなたの に します.
 
hellowebaに するcom』FullCalendarアプリケーション- スケジュールイベント
文字セット問題の初歩的な検討(二)
jQueryフォームのラジオボタンと複数選択ボタンの値を取得