2017-01-05 149 views
3

バックエンドからイベントを取得して表示するfullcalendarを設定しています。また、ユーザーはイベントをドロップできます。fullcalendar-クリックしたイベントの日付を取得できません

私がしようとしているのは、クリックされたイベントの日付を取得することです。ユーザーはイベントをクリックして削除できます。しかし、私はそのイベントの日付をフェッチし、バックエンドサービスにajax呼び出しで日付を渡したいと思います。

// FullCalendar v1.5 
// Script modified from the "theme.html" demo file 
$(document).ready(function() { 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
    theme: true, 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    editable: true, 

    // add event name to title attribute on mouseover 
    eventMouseover: function(event, jsEvent, view) { 
     if (view.name !== 'agendaDay') { 
     $(jsEvent.target).attr('title', event.title); 
     } 
    }, 
    eventDestroy: function(event, element, view) { 
     alert("removing stuff"); 
    }, 
    eventClick: function(date,calEvent, jsEvent, view) { 
     alert('Clicked on: ' + date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear()); 
    //pass it to ajax function. Ajax function comes here 
     var r = confirm("Delete " + calEvent.title); 
     if (r === true) { 
     $('#calendar').fullCalendar('removeEvents', calEvent._id); 
     } 
    }, 

    // For DEMO only 
    // ************* 
    events: [{ 
     title: 'All Day Event', 
     start: new Date(y, m, 1) 
    }, { 
     title: 'Long Event', 
     start: new Date(y, m, d - 5), 
     end: new Date(y, m, d - 2) 
    }, { 
     id: 999, 
     title: 'Repeating Event', 
     start: new Date(y, m, d - 3, 16, 0), 
     allDay: false 
    }, { 
     id: 999, 
     title: 'Repeating Event', 
     start: new Date(y, m, d + 4, 16, 0), 
     allDay: false 
    }, { 
     title: 'Meeting', 
     start: new Date(y, m, d, 10, 30), 
     allDay: false 
    }, { 
     title: 'Lunch', 
     start: new Date(y, m, d, 12, 0), 
     end: new Date(y, m, d, 14, 0), 
     allDay: false 
    }, { 
     title: 'Birthday Party', 
     start: new Date(y, m, d + 1, 19, 0), 
     end: new Date(y, m, d + 1, 22, 30), 
     allDay: false 
    }, { 
     title: 'Click for Google', 
     start: new Date(y, m, 28), 
     end: new Date(y, m, 29), 
     url: 'http://google.com/' 
    }] 
    }); 

}); 

私が取得していないイベントをクリックすると、その旨を通知しようとしました。どうすればこの問題を解決できますか?ここで

FIDDLE

+0

私は私がその日をクリックすると、日付を取得するには、このコードを使用することができます。しかし、私はイベントをクリックすると日付を取得したい。 dayClick:function(date、jsEvent、view){ alert( 'クリックした日付:' + date.getDate()+ "/" + date.getMonth()+ "/" + date.getFullYear()); } –

+0

下記の私の解決策を参照してください。 'dt'はカレンダーから取得した日付を格納しています。 –

答えて

2

eventClickと交換してみてください:

eventClick: function(calEvent, jsEvent, view) { 
    var dt = calEvent.start; 
    //alert('Event Clicked on : ' + dt); 
    var r = confirm("Delete " + calEvent.title + "\n" + dt); 
    if (r === true) { 
     $('#calendar').fullCalendar('removeEvents', calEvent._id); 
    } 
}, 

リファレンス:fullcalendar.io - eventClick

+0

これはうまくいきました。完璧!ありがとう! –

0

それは、データオブジェクトが開始パラメータを持つ

です。 date.start.getDate()

http://jsfiddle.net/0o2ybsLu/3/

// FullCalendar v1.5 
 
// Script modified from the "theme.html" demo file 
 
$(document).ready(function() { 
 

 
    var date = new Date(); 
 
    var d = date.getDate(); 
 
    var m = date.getMonth(); 
 
    var y = date.getFullYear(); 
 

 
    $('#calendar').fullCalendar({ 
 
    theme: true, 
 
    header: { 
 
     left: 'prev,next today', 
 
     center: 'title', 
 
     right: 'month,agendaWeek,agendaDay' 
 
    }, 
 
    editable: true, 
 

 
    // add event name to title attribute on mouseover 
 
    eventMouseover: function(event, jsEvent, view) { 
 
     if (view.name !== 'agendaDay') { 
 
     $(jsEvent.target).attr('title', event.title); 
 
     } 
 
    }, 
 
    eventDestroy: function(event, element, view) { 
 
     alert("removing stuff"); 
 
    }, 
 
    eventClick: function(date, calEvent, jsEvent, view) { 
 
    console.log(date.start.getDate()); 
 
     alert('Clicked on: ' + date.start.getDate()+"/"+date.start.getMonth()+"/"+date.start.getFullYear()); 
 
     var r = confirm("Delete " + calEvent.title); 
 
     if (r === true) { 
 
     $('#calendar').fullCalendar('removeEvents', calEvent._id); 
 
     } 
 
    }, 
 

 
    // For DEMO only 
 
    // ************* 
 
    events: [{ 
 
     title: 'All Day Event', 
 
     start: new Date(y, m, 1) 
 
    }, { 
 
     title: 'Long Event', 
 
     start: new Date(y, m, d - 5), 
 
     end: new Date(y, m, d - 2) 
 
    }, { 
 
     id: 999, 
 
     title: 'Repeating Event', 
 
     start: new Date(y, m, d - 3, 16, 0), 
 
     allDay: false 
 
    }, { 
 
     id: 999, 
 
     title: 'Repeating Event', 
 
     start: new Date(y, m, d + 4, 16, 0), 
 
     allDay: false 
 
    }, { 
 
     title: 'Meeting', 
 
     start: new Date(y, m, d, 10, 30), 
 
     allDay: false 
 
    }, { 
 
     title: 'Lunch', 
 
     start: new Date(y, m, d, 12, 0), 
 
     end: new Date(y, m, d, 14, 0), 
 
     allDay: false 
 
    }, { 
 
     title: 'Birthday Party', 
 
     start: new Date(y, m, d + 1, 19, 0), 
 
     end: new Date(y, m, d + 1, 22, 30), 
 
     allDay: false 
 
    }, { 
 
     title: 'Click for Google', 
 
     start: new Date(y, m, 28), 
 
     end: new Date(y, m, 29), 
 
     url: 'http://google.com/' 
 
    }] 
 
    }); 
 

 
});
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title></title> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://dl.dropboxusercontent.com/u/1510510/temp/demo/fullcalendar.css" rel="stylesheet"/> 
 
<script src="https://dl.dropboxusercontent.com/u/1510510/temp/demo/fullcalendar.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel="stylesheet"/> 
 
    </head> 
 
    <body> 
 
     <div id='calendar'></div> 
 
    </body> 
 
</html>

+0

実行可能な例が壊れています。このカレンダーは、stackoverflowsがコードオプションを実行してバグを起こしたように見えるので、なぜ私は私のサンプルに1つも含めなかったのです。 –

+0

ああ、私もコードを修正しようとしていますが、jqueryは定義されていません。 –

+0

@KraangPrimeだからあなたは欠けていたものを手に入れましたか? –

3

関数eventClickの関数にエラーがありました。あなたは4つのパラメータを定義しましたが、この関数はofficial documentationによる3つのパラメータしか持っていません。したがって、dateという名前のパラメータは、実際にtitle_idという属性を持つcalEventパラメータでした。私はあなたのコードを修正し、イベントを削除しています。

$(document).ready(function() { 
 

 
    var date = new Date(); 
 
    var d = date.getDate(); 
 
    var m = date.getMonth(); 
 
    var y = date.getFullYear(); 
 

 
    $('#calendar').fullCalendar({ 
 
    theme: true, 
 
    header: { 
 
     left: 'prev,next today', 
 
     center: 'title', 
 
     right: 'month,agendaWeek,agendaDay' 
 
    }, 
 
    editable: true, 
 

 
    // add event name to title attribute on mouseover 
 
    eventMouseover: function(event, jsEvent, view) { 
 
     if (view.name !== 'agendaDay') { 
 
     $(jsEvent.target).attr('title', event.title); 
 
     } 
 
    }, 
 
    eventDestroy: function(event, element, view) { 
 
     console.log("removing stuff"); 
 
    }, 
 
    eventClick: function(calEvent, jsEvent, view) { 
 
     console.log(calEvent.start.format()); 
 
     console.log(calEvent); 
 
     alert('Clicked on: ' + calEvent.start.format()); 
 
     var r = confirm("Delete " + calEvent.title); 
 
     if (r === true) { 
 
     $('#calendar').fullCalendar('removeEvents', calEvent._id); 
 
     } 
 
    }, 
 

 
    // For DEMO only 
 
    // ************* 
 
    events: [{ 
 
     title: 'All Day Event', 
 
     start: new Date(y, m, 1) 
 
    }, { 
 
     title: 'Long Event', 
 
     start: new Date(y, m, d - 5), 
 
     end: new Date(y, m, d - 2) 
 
    }, { 
 
     id: 999, 
 
     title: 'Repeating Event', 
 
     start: new Date(y, m, d - 3, 16, 0), 
 
     allDay: false 
 
    }, { 
 
     id: 999, 
 
     title: 'Repeating Event', 
 
     start: new Date(y, m, d + 4, 16, 0), 
 
     allDay: false 
 
    }, { 
 
     title: 'Meeting', 
 
     start: new Date(y, m, d, 10, 30), 
 
     allDay: false 
 
    }, { 
 
     title: 'Lunch', 
 
     start: new Date(y, m, d, 12, 0), 
 
     end: new Date(y, m, d, 14, 0), 
 
     allDay: false 
 
    }, { 
 
     title: 'Birthday Party', 
 
     start: new Date(y, m, d + 1, 19, 0), 
 
     end: new Date(y, m, d + 1, 22, 30), 
 
     allDay: false 
 
    }, { 
 
     title: 'Click for Google', 
 
     start: new Date(y, m, 28), 
 
     end: new Date(y, m, 29), 
 
     url: 'http://google.com/' 
 
    }] 
 
    }) 
 
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" /> 
 

 
<div id='calendar'></div>

+0

どのようにあなたはその実行可能にしたのですか?私は20分XDのようにしようとしていた - jsfiddleで完璧に動作します。彼のフィドルのソースをCDNに切り替えることも試みましたが、 'moment.js'や' jqueryui.min.js'を追加しませんでしたか? –

+0

必要な依存関係を理解するために、私はfullCalendar ZIPをダウンロードし、付属のファイルをチェックしなければなりませんでした。幸いにも、彼らは必要なすべての依存関係をアーカイブに提供します。 :) – cringe

+0

詳細な回答と動作するサンプルは+1です。しかし、もう一人の男がすでに解決策を提供していた。 (: –

関連する問題