Question

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

我在这个网站上搜索了一个解决方案，但这些帖子都是旧帖子，并且工作不正常。

当我点击一天时，我需要在弹出窗口或类似事件上显示事件。

有什么想法吗？

这是我现在的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();
});


});

Answer 1

要查找当前点击的所有事件，只需使用＆＃34; clientEvents＆＃34;带有过滤器回调的方法（如下所述：https://fullcalendar.io/docs/event_data/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
}

通过FullCalendar中的提醒或Bootstrap Popover在点击日获取活动

1 个答案: