Javascript 使用FullCalendar中的警报或引导弹出窗口获取单击日的事件

当我点击某一天时，我试图获取FullCalendar的事件

我在这个网站上搜索了一个解决方案，但都是旧帖子，效果不好

当我点击某一天时，我需要在popover或类似网站上显示事件

有什么想法吗

这是我现在的Javascript：

$(function () {

/* initialize the external events
 -----------------------------------------------------------------*/
function ini_events(ele) {
  ele.each(function () {

    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
      title: $.trim($(this).text()) // use the element's text as the event title
    };

    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);

    // make the event draggable using jQuery UI
    $(this).draggable({
      zIndex: 1070,
      revert: true, // will cause the event to go back to its
      revertDuration: 0  //  original position after the drag
    });

  });
}

ini_events($('#external-events div.external-event'));

/* initialize the calendar
 -----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
    m = date.getMonth(),
    y = date.getFullYear();
$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  buttonText: {
    today: 'today',
    month: 'month',
    week: 'week',
    day: 'day'
  },


  //Random default events
  events: [
    {
      title: 'All Day Event',
      start: new Date(y, m, 1),
      backgroundColor: "#f56954", //red
      borderColor: "#f56954", //red
      descripcion: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia nisl sed arcu vulputate, quis eleifend augue vehicula.',
      titulo:'Titulo 2'
    },
    {
      title: 'Long Event',
      start: new Date(y, m, d - 5),
      end: new Date(y, m, d - 2),
      backgroundColor: "#f39c12", //yellow
      borderColor: "#f39c12", //yellow
      descripcion: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia nisl sed arcu vulputate, quis eleifend augue vehicula.',
      titulo:'Titulo 2'
    },
  ],
 dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar( 'clientEvents')
},
 eventRender: function(event, element) {
        element.attr('data-toggle', 'popover');
        element.attr('title', event.titulo);
        element.attr('data-content', event.descripcion);
        element.attr('data-placement', 'bottom');


    },
  locale: 'es',
  editable: true,
  droppable: true, // this allows things to be dropped onto the calendar !!!
  drop: function (date, allDay) { // this function is called when something is dropped

    // retrieve the dropped element's stored Event Object
    var originalEventObject = $(this).data('eventObject');

    // we need to copy it, so that multiple events don't have a reference to the same object
    var copiedEventObject = $.extend({}, originalEventObject);

    // assign it the date that was reported
    copiedEventObject.start = date;
    copiedEventObject.allDay = allDay;
    copiedEventObject.backgroundColor = $(this).css("background-color");
    copiedEventObject.borderColor = $(this).css("border-color");

    // render the event on the calendar
    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

    // is the "remove after drop" checkbox checked?
    if ($('#drop-remove').is(':checked')) {
      // if so, remove the element from the "Draggable Events" list
      $(this).remove();
    }

  }
});



/* ADDING EVENTS */
var currColor = "#3c8dbc"; //Red by default
//Color chooser button
var colorChooser = $("#color-chooser-btn");
$("#color-chooser > li > a").click(function (e) {
  e.preventDefault();
  //Save color
  currColor = $(this).css("color");
  //Add color effect to button
  $('#add-new-event').css({"background-color": currColor, "border-color": currColor});
});
$("#add-new-event").click(function (e) {
  e.preventDefault();
  //Get value and make sure it is not null
  var val = $("#new-event").val();
  if (val.length == 0) {
    return;
  }

  //Create events
  var event = $("<div />");
  event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
  event.html(val);
  $('#external-events').prepend(event);

  //Add draggable funtionality
  ini_events(event);

  //Remove event from text input
  $("#new-event").val("");
});


  $(document).ready(function(){
$('[data-toggle="popover"]').popover();
});


});

$（函数（）{
/*初始化外部事件
-----------------------------------------------------------------*/
函数ini_事件（ele）{
元素每个（函数（）{
//创建一个事件对象(http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
//它不需要有开始或结束
var eventObject={
title:$.trim（$（this）.text（））//使用元素的文本作为事件标题
};
//将事件对象存储在DOM元素中，以便我们以后可以访问它
$（this）.data（'eventObject'，eventObject）；
//使用jQuery UI使事件可拖动
$（此）。可拖动({
zIndex:1070，
revert:true，//将导致事件返回其初始状态
revertDuration:0//拖动后的原始位置
});
});
}
ini#U事件（$（'#外部事件div.external-event'）；
/*初始化日历
-----------------------------------------------------------------*/
//日历事件的日期（虚拟数据）
变量日期=新日期（）；
var d=date.getDate（），
m=date.getMonth（），
y=日期。getFullYear（）；
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
按钮文字：{
今天:"今天",，
月：'月'，
周：“周”，
day:“day”
},
//随机默认事件
活动：[
{
标题：“全天活动”，
开始日期：新日期（y、m、1），
背景颜色：“f56954”//红色
边框颜色：“#f56954”//红色
描述：“知识是一种美德，是一种美德，是一种美德，是一种美德。”，
泰特罗：“泰特罗2号”
},
{
标题：“长期活动”，
开始日期：新日期（y、m、d-5），
结束：新日期（y、m、d-2），
背景色：“#f39c12”//黄色
边框颜色：“#f39c12”//黄色
描述：“知识是一种美德，是一种美德，是一种美德，是一种美德。”，
泰特罗：“泰特罗2号”
},
],
dayClick：函数（日期、全天、jsEvent、视图）{
$（'日历'）.fullCalendar（'客户事件'）
},
eventRender:函数（事件，元素）{
attr（'data-toggle'，'popover'）；
元素attr（'title'，event.titulo）；
element.attr（'data-content'，event.description）；
attr（'data-placement'，'bottom'）；
},
区域设置：“es”，
是的，
可拖放：true，//这允许将内容拖放到日历上！！！
drop:function（date，allDay）{//在删除某些内容时调用此函数
//检索已删除元素的存储事件对象
var originalEventObject=$（this.data（'eventObject'）；
//我们需要复制它，这样多个事件就不会引用同一个对象
var copiedEventObject=$.extend（{}，originalEventObject）；
//将其指定为报告的日期
copiedEventObject.start=日期；
copiedEventObject.allDay=全天；
copiedEventObject.backgroundColor=$（this.css（“背景色”）；
copiedEventObject.borderColor=$（this.css（“边框颜色”）；
//在日历上呈现事件
//最后一个'true'参数确定事件是否“持续”(http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$（“#calendar”）.fullCalendar（'renderEvent'，copiedEventObject，true）；
//是否选中了“删除后删除”复选框？
如果（$（'#drop remove'）。是（':checked'））{
//如果是，请从“可拖动事件”列表中删除该元素
$（this.remove（）；
}
}
});
/*添加事件*/
var currColor=“#3c8dbc”//默认为红色
//颜色选择器按钮
var colorChooser=$（“#颜色选择器btn”）；
$（“#颜色选择器>li>a”）。单击（函数（e）{
e、 预防默认值（）；
//保存颜色
currColor=$（this.css（“color”）；
//向按钮添加颜色效果
$（'#添加新事件'）.css（{“背景色”：currColor，“边框色”：currColor}）；
});
$（“#添加新事件”）。单击（函数（e）{
e、 预防默认值（）；
//获取值并确保它不为null
var val=$（“#新事件”）.val（）；
如果（val.length==0）{
返回；
}
//创建事件
变量事件=$（“”）；
css（{“background color”：currColor，“border color”：currColor，“color”：“#fff”}）.addClass（“外部事件”）；
html（val）；
$（“#外部事件”）。前置（事件）；
//添加可拖动功能
ini_事件（事件）；
//从文本输入中删除事件
$（“#新事件”）.val（“”）；
});
$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover（）；
});
});

要查找单击当天的所有事件，只需使用带有筛选器回调的“clientEvents”方法（如下所述：）：

---

要查找单击当天的所有事件，只需使用带有筛选器回调的“clientEvents”方法（如下所述：）：

---

你应该解释你在这里发现了哪些老问题，以及为什么它们不适合你。阅读应该指导你改进你的问题。你应该解释你在这里发现的老问题以及为什么它们不适合你。阅读本手册可以引导你改进你的问题。

dayClick: function(date, allDay, jsEvent, view) {
  var events = $('#calendar').fullCalendar( 'clientEvents', function (event) {
    //return true if the event starts the same day. Change the query a bit if you need something more sophisticated (e.g. events which _overlap_ the day 
    if ((event.start.startOf("day")).isSame(date)) { return true; }
    else { return false; }

  });
  console.log(JSON.stringify(events)); //just to test the result
}