完整日历 - 无法获取单击事件的日期

Question

我正在设置一个完整的日历，它从后端获取事件并显示它。此外，用户可以丢弃事件。

我正在尝试做的是获取点击事件的日期。用户可以单击事件并将其删除。但是我想获取该事件的日期，并通过 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/'
    }]
  });
});

我试图在事件单击时提醒日期，但我没有得到。如何解决此问题？

小提琴

Answer 1

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)"
    },
});

文档：事件点击 |事件对象

Answer 2

函数

eventClick函数中存在错误。您定义了 4 个参数，但根据官方文档，该函数只有 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>

Answer 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 - 事件点击

Answer 4

这里是

数据对象具有起始参数。 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>

Answer 5

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