fullcalendar EventReceive Pass value when throwing an event

时间:2017-08-13 13:49:37

标签: javascript ajax fullcalendar

Good afternoon. I can not pass the value in the div tag when the event is called by throw. All Google rummaged, could not find how correctly to receive properties div Example code below

// здесь подключил функцию дропа события - начало droppable: true, // Это позволяет опускать вещи на календарь

        drop: function() {
            // Установлен флажок «удалить после падения»?
                      $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                      // var title1 = $('.draggable').data('event', { title: 'my event' });
                      var date_start = $.fullCalendar.moment(event.start).format('YYYY-MM-DD');
                       var title1 = $.fullCalendar.moment(event.start).format('YYYY-MM-DD');
                       $.post('testhuhu', { field1: title1, field2 : date_start}, 
                            function(returnedData){
                                 alert("Данные успешно отправлены на сервер");
                        });
        },

Here is the code of the tag

<div id='wrap'>

    <div id='external-events'>
        <h4>Упражнения</h4>
        <div class='fc-event' data-event='1'>Упражение 1</div>
        <div class='fc-event' data-event='2'>Упражение 2</div>
        <div class='fc-event' data-event='3'>Упражение 3</div>
        <div class='fc-event' data-event='4'>Упражение 4</div>
        <div class='fc-event' data-event='5'>Упражение 5</div>
        <p>
            <input type='checkbox' id='drop-remove' />
            <label for='drop-remove'>remove after drop</label>
        </p>
    </div>

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

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

</div>

How do I transfer data from div data-event = '1' In the variable var id Very much I ask to help. Thank you

2 个答案:

答案 0 :(得分:0)

根据文档:(https://fullcalendar.io/docs/dropping/drop/)&#34; this保存已被删除的DOM元素。&#34;因此,在&#34; drop&#34;函数,您可以编写$(this).data("event"),它将返回元素的数据事件值。

请参阅此处了解此基本工作演示:http://jsfiddle.net/sbxpv25p/585/

答案 1 :(得分:0)

您需要在html中再添加一个数据才能使建议的解决方案正常工作:

<div id='external-events'>
        <h4>Упражнения</h4>
        <div class='fc-event' data-key="key1" data-event='1'>Упражение 1</div>
        <div class='fc-event' data-key="key2" data-event='2'>Упражение 2</div>
        <div class='fc-event' data-key="key3" data-event='3'>Упражение 3</div>
        <div class='fc-event' data-key="key4" data-event='4'>Упражение 4</div>
        <div class='fc-event' data-key="key5" data-event='5'>Упражение 5</div>
        <p>
            <input type='checkbox' id='drop-remove' />
            <label for='drop-remove'>remove after drop</label>
        </p>
    </div>

data-key将作为被删除元素的中间id,在代码中构建外部事件时生成它,或者将它们手动放入html中。 Btw fullCalendar会自动将此key数据参数添加到事件中,稍后可以在javascript代码中使用event.key访问它。

无论如何,我们现在可以通过data-key找到您删除的元素,并在data-event函数中使用jquery提取其eventReceive

    var myDropped = $('#external-events').find('div').filter(function() {
        return $(this).data('key') === event.key;});
    var myParam = myDropped.data("event");