从eventReceive获取ID [英] Getting id from eventReceive

问题描述

我试图从我的 div 中获取 id 属性值并放入日历中。我已经尝试了许多方法，但都没有成功。

I'm trying to get the id attribute value from my div and put in calendar. I've tried many ways without success.

我创建了以下 div ：

I have the following div that I created:

vv_lista_servico = vv_lista_servico +"<div class='fc-event fc-list draggable' data-event='{\"id\":\""+item.id+"\"}' data-duration='00:30'>"+item.descr+"</div>";

准备好后，我有以下html：

When ready, I have the following html:

<div class="fc-event fc-list draggable ui-draggable ui-draggable-handle" data-event="{"id":"244"}" data-duration="00:30">Test 1</div>

当我将事件拖入fullcalendar时，我的标题和持续时间在日历中起作用并呈现，但是id不行。

When I dragging the event into fullcalendar my title and duration works and render on calendar, but the id does not work.

我应该如何创建我的html来工作并获得id？

How I should create my html to work and get the id?

谢谢

推荐答案

事件数据需要根据 eventReceive 文档，所以在数据事件中使用双引号：

The event data needs to be valid JSON according to eventReceive documentation, so double quotes inside the data-event:

<div class='fc-event' data-event='{"id": 1, "randomProperty": "foobar", "title": "This is event 1"}'>My Event 1</div>

示例
https://jsfiddle.net/5wgoodwp/1/ ：

/* Edited from http://fullcalendar.io/js/fullcalendar-2.5.0/demos/external-dragging.html */

HTML

<div id='wrap'>

  <div id='external-events'>
    <h4>Draggable Events</h4>
    <div class='fc-event' data-event='{"id": 1, "randomProperty": "foobar", "title": "This is event 1"}'>My Event 1</div>
  </div>

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

  <div style='clear:both'></div>

</div>

JS

/* initialize the external events
        -----------------------------------------------------------------*/

$('#external-events .fc-event').each(function() {

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

});


/* initialize the calendar
-----------------------------------------------------------------*/

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  editable: true,
  droppable: true, // this allows things to be dropped onto the calendar
  drop: function() {
    $(this).remove();
  },
  eventReceive: function(event) {
    alert(JSON.stringify(event, null, 4));
  }
});

这篇关于从eventReceive获取ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！