fullcalendar-无法获取所点击事件的日期

时间：2017-01-05 07:31:46

标签： javascript jquery 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

5 个答案:

答案 0 :(得分：3)

尝试将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

答案 1 :(得分：3)

函数eventClick函数出错。您定义了4个参数，但该函数根据official documentation只有3个参数。因此，您命名为date的参数实际上是具有calEvent和title属性的_id参数。我修复了你的代码，它现在正在删除该事件。

$(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>

答案 2 :(得分：3)

FullCalendar v4 现在在eventClick事件上只有一个参数：

var calendar = new Calendar(calendarEl, {
      eventClick: function(info) {
          var eventDate = info.event.start; 
          console.log(eventDate);
          //example output: "Wed Oct 02 2019 00:00:00 GMT-0600 (Central Standard Time)"
    },
});
  

文档：eventClick | Event Object

答案 3 :(得分：0)

这是

数据对象具有start参数。 date.start.getDate()

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

＆＃13;
＆＃13; 
// 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/'
    }]
  });

});
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

eventClick: function(date, calEvent, jsEvent, view) {
  var eventDate = moment(date.start).format("YYYY-MM-DD"); 
  alert(eventDate);
},
相关问题
最新问题