FullCalendar 5：FullCalendarアプリケーション-カレンダーイベントを編集および削除します
Fullcalendar Five Fullcalendar Application Edit
FullCalendarは、プロジェクトの開発に柔軟に適用できます。サイトの記事では、FullCalendarで新しいカレンダーイベントを作成する方法について説明します。今日は、FullCalendarでカレンダーイベントを編集および削除する方法について説明します。これで、「CRUD」が完成しました。 FullCalendarでの一連の操作。
デモデモをご覧ください ソースをダウンロードHTML
そして最後の記事 FullCalendarアプリケーション-新しいカレンダーイベント 同様に、私たちはまだHTMLページcal_opt.htmlを使用しています。ここでは、HTMLコードをロードし、関連するjsファイルとcssファイルは、これを初めて読んでいる場合は、 FullCalendar 公開された記事の最初のシリーズはルックスです。
jQuery
カレンダービューで、イベントエントリをクリックしてスケジュールを編集し、fancyboxポップレイヤー編集を呼び出す必要があります。 FullCalendarは、イベントクリックeventClickメソッドを提供します。コードを参照してください。
Edit Event
schedule content:
Start Time:
? End Time:?
Day End Time
イベントエントリをクリックし、ファンシーボックスと新しいイベントを呼び出します。大規模な参加を通じてajaxの方法を使用して、フォームの編集ページをリクエストします。
event.php
リクエストのパラメータに応じてevent.phpが届き、カレンダーイベントの対応するIDを読み取り、編集フォームで現実のデータの整合性を確認します。 event.phpに混在するコード編集レイヤーと表示レイヤー全体を読みます。もちろん、実際の開発では、PHPとHTMLテンプレートの分離にzend、thinkphp、その他のフレームワークを使用できます。次のコード編集モジュールでは、カスタム関数editform（）を記述し、event.phpは、渡されたパラメーター（）に従ってeditformアクションを呼び出します。
include_once ( 'connect.php') // connect to the database $action = $_GET['action'] if($action=='add'){ // New Event }elseif($action=='edit'){ // Edit Event $id = intval($_POST['id']) if($id==0){ echo 'event does not exist! ' exit } $ Events = stripslashes (trim ($ _ POST [ 'event'])) // event content $ Events = mysql_real_escape_string (strip_tags ($ events), $ link) // filtered HTML tags, special characters and escape $ Isallday = $ _POST [ 'isallday'] // whether the all-day event $ Isend = $ _POST [ 'isend'] // if there is an end time $ Startdate = trim ($ _ POST [ 'startdate']) // start date $ Enddate = trim ($ _ POST [ 'enddate']) // End Date .. $ S_time = $ _POST [ 's_hour'] ':' $ _ POST [ 's_minute'] ': 00' // start time. $ E_time = $ _POST [ 'e_hour'] ':' $ _ POST [ 'e_minute'] ': 00'... // End Time 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 'wrong! ' } }elseif($action=='del'){ // delete events }else{ } 重要なのは日付と時刻を表示することです。もちろん、これはこの記事の焦点ではありません。ソースコードをダウンロードして、ゆっくりと学習することができます。
また、フォームの送信と検証を処理するコードを追加する必要があります。上記の新しいイベントでは、jquery.form.jsプラグインを使用します。新しいコードは、基本的に同じイベントです。
... } Elseif ($ action == 'del') {// delete $id = intval($_POST['id']) if($id>0){ mysql_query('delete from `calendar` where `id`='$id'') if(mysql_affected_rows()==1){ echo '1' }else{ echo 'wrong! ' } }else{ echo 'event does not exist! ' } } do.php
イベントを作成、編集、削除するための処理用のdo.php。メインイベントはフォームデータを受信して投稿を編集します。idイベントデータはテーブル内の対応するデータを更新します。更新が成功すると1が返され、更新成功メッセージを受信したフロントエンドは自動的にfancyboxレイヤーをシャットダウンし、更新します。カレンダービュー。
$(function() { $('#calendar').fullCalendar({ // event is triggered when you click the item eventClick: function(calEvent, jsEvent, view) { $.fancybox({ 'type':'ajax', 'href':'event.php?action=edit&id='+calEvent.id }) } }) }) カレンダーイベントを削除するには
単一レイヤーのポップアップ編集テーブルには削除ボタンがあり、[削除]ボタンをクリックして同じajaxリクエストをdo.phpに送信すると、スケジュールはリクエストに応じて対応するテーブルdo.phpによって記録されたデータを削除します。情報の成功を返します。
event.phpでは、いくつかのjsも追加する必要があります。
|_+_|
do.phpも削除を追加します。
$(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 () // highly adaptive adjustment }) //submit Form $('#add_form').ajaxForm({ beforeSubmit: showRequest, // Form Validation success: showResponse // successful return }) }) function showRequest(){ var events = $('#event').val() if(events==''){ alert ( 'Please enter the schedule content!') $('#event').focus() return false } } function showResponse(responseText, statusText, xhr, $form){ if(statusText=='success'){ if(responseText==1){ $.fancybox.close() $ ( '# Calendar') fullCalendar ( 'refetchEvents'). // retrieve all event data }else{ alert(responseText) } }else{ alert(statusText) } } さて、この記事では、fullCalendarカレンダーイベントの編集と削除について説明しています。このペーパーに記載されているコードには一貫性がありません。コピーして使用することはお勧めしません。もちろん、十分に怠惰な場合は、再テストを理解できます。カレンダーイベント機能の読み取り、作成、編集、削除など、ここで提供されるパッケージファイルをダウンロードできます。 Hellwoeba.comにご注目いただきありがとうございます。その後、月の光の最後のアクションがfullCalendarになります。カレンダーイベントとその説明の概要をドラッグして保存しますので、しばらくお待ちください。
から helloweba.com 》 FullCalendarアプリケーション-カレンダーイベントを編集および削除します