Question

我第一次使用Fullcalendar。我花了一天时间研究和解决问题，并遇到了一个我无法解决的问题。我有一个循环运行Ajax调用的结果来填充事件。我还有一个在悬停时显示在事件项目上的图层，以提供编辑/删除功能。当我使用静态数据（在测试中）时，这一切都运行良好但现在我已经使它变得动态，它没有！

问题是eventMouseOver（）在循环之外，所以我无法定义id。我知道这很明显但是让我问的是我在循环之外定义了另一个变量，它为事件添加了一个描述，也使用了Ajax调用中的数据。在循环外定义的每个描述都位于不同事件的位置。

任何人都可以帮助我将id输入我的内联函数调用 - editEvent和deleteEvent吗？

events: function(start, end, timezone, callback) {

                    $.ajax({
                        url: 'inc/scripts/expenses-scripts.php',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            // our hypothetical feed requires UNIX timestamps
                            start: start.unix(),
                            end: end.unix(),
                            getExpenses: true,    // an option!
                            salonId: $('#globalSalonId').text(),  // an option!
                        },
                        encode: true,

                        success: function(doc) {

                            if(doc.success==true)
                            {

                                var events = [];

                                for(x=0; x<doc.event.length; x++)
                                {

                                    events.push({
                                        title: doc.event[x].description,
                                        start: doc.event[x].start,
                                        editable: true,
                                        backgroundColor: doc.event[x].backgroundColor,
                                        eventStartEditable: true,
                                        eventDurationEditable: true,
                                        description: doc.event[x].title+' - '+doc.event[x].price,

                                    });

                                }

                                callback(events);

                            }
                        }

                    });

                },

            eventResize: function(event, delta, revertFunc, element) {

                alert(event.title + " end is now " + event.end.format());

                if (!confirm("is this okay?")) {
                    revertFunc();
                }

            },

            eventDrop: function(event, delta, revertFunc, element) {

                alert(event.id + " was dropped on " + event.start.format());

                if (!confirm("Are you sure about this change?")) {
                    revertFunc();
                }

            },

            // I lose the event.id here //
            eventMouseover: function(event, domEvent, element) {
                var layer = "<div id='events-layer' class='fc-transparent' style='position:absolute; width:100%; height:100%; top:-2px; text-align:right; z-index:100'> <a> <img border='0' style='padding-right:5px;' src='img/pencil.png' width='10' onClick='editEvent("+event.id+");'></a><a><img border='0' style='padding-right:5px;' src='img/invalid.png' width='10' onClick='deleteEvent("+event.id+");'></a></div>";
                $(this).append(layer);
            },   

            eventMouseout: function(event, domEvent) {
                $("#events-layer").remove();
            }, 

            // ADD A DESCRIPTION TO AN EVENT //

            // I have access to the event.description here though //
            eventRender: function(event, element) { 
                element.find('.fc-title').append("<br/>" + event.description); 
            }

Ajax回调中返回的数据是

while($row = $result->fetch_object())
        {

            $data['event'][$x]['start'] = $row->expenseDate;
            $data['event'][$x]['title'] = $row->expenseTitle;               
            $data['event'][$x]['id'] = $row->id;
            $data['event'][$x]['category'] = $row->expenseCategory;
            $data['event'][$x]['editable'] = 'true';
            $data['event'][$x]['backgroundColor'] = '#3399cc';
            $data['event'][$x]['eventStartEditable'] = 'true';
            $data['event'][$x]['eventDurationEditable'] = 'true';
            $data['event'][$x]['description'] = $row->expenseCategory;
            $data['event'][$x]['price'] = '&pound;'.$row->expenseTotal;
            $data['event'][$x]['allDay'] = false;

            $x++;

        }

Answer 1

@ stephen.vakil回答

我的事件数组中没有id使其无法使用。

更新了代码......

events.push({

    id: doc.event[x].id,
    title: doc.event[x].description,
    start: doc.event[x].start,
    editable: true,
    backgroundColor: doc.event[x].backgroundColor,
    eventStartEditable: true,
    eventDurationEditable: true,
    description: doc.event[x].title+' - '+doc.event[x].price,

});

该ID现已可用

Fullcalendar - 在循环之外获取id

1 个答案: