Получение идентификатора от eventReceive

javascript jquery html fullcalendar

2102 просмотра

1 ответ

Я пытаюсь получить значение атрибута id из моего div и положить в календарь . Я пробовал много способов без успеха.

У меня есть следующий div, который я создал:

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:

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

Когда я перетаскиваю событие в fullcalendar, мой заголовок и продолжительность работают и отображаются в календаре, но идентификатор не работает.

Как я должен создать свой HTML, чтобы работать и получить идентификатор?

Спасибо

Автор: brigman Источник Размещён: 12.11.2019 09:03

Ответы (1)


1 плюс

Решение

Данные события должны быть действительными в формате JSON в соответствии с документацией eventReceive , поэтому двойные кавычки внутри события data:

<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));
  }
});
Автор: smcd Размещён: 29.12.2015 04:45
Вопросы из категории :
32x32