Question

我目前正在尝试将qtip2添加到我的fullCalendar窗口，这样我就可以显示qtip并有一个链接/按钮来删除日历上的所选事件，不幸的是我遇到了麻烦。这是我的fullCalendar的样子：

$('#calendar_main').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView:'agendaWeek',
            minTime:8,
            height:600,
            maxTime:20,
            editable: true,
            allDaySlot:false,
            theme: true,
            firstDay: 1,
            selectable: true,
               selectHelper: true,

            eventRender: function(event, element) {
               element.qtip({ 
                content: "<a onlick='alert('Remove')> Remove me</a>",
                title: {
                  text: 'RDV',
                       button: false
                }
                },
                position: {
                    at: 'right-bottom'
                },
                show: {
                    solo: true
                },
                hide: false,
                style: 'ui-tooltip-light ui-tooltip-rounded'
               });
            } 
        });

我认为问题在qtip的content属性中，但不确定为什么这不起作用。在这种情况下，我只是试图显示警报，但它不起作用（Qtip显示，但当我点击“删除我”时，没有任何反应。一旦我开始工作，我将能够用我自己的JS函数，它将删除我的数据库中的选定事件。

ps：我正在与Adobe Air合作，不确定这是否是一个问题。

Answer 1

对于一个人来说，你需要逃避单引号以在警报中形成字符串。

其次，您忘记使用标记中的单引号关闭警报。希望它有所帮助...

'<a onlick="alert(\'Remove\');"> Remove me</a>'

这应该是它的样子。

Answer 2

可能你正在使用qTip的调用程序，但实际上你使用的是qTip2。在真实（源脚本）旧版本qTip 1.00xxx中使用，一切都会好的 - 我确实这样做了。

Answer 3

我实际上在做同样的事情，我可以将其删除。我遇到的唯一问题是当事件被破坏时，qtip会一直存在，因此遇到一个永远不会被调用的问题。

无论如何我打电话给calendarEventRender：

        $('#calendar').fullCalendar({
            firstDay: 1,
            header: {
                left: '',
                center: '',
                right: ''
            },
            defaultView: 'agendaWeek',
            allDaySlot: false,
            columnFormat: {
              week: 'ddd'
            },
            selectable: true,
            selectHelper: true,
            editable: true,
            droppable: true,
            eventRender: function(event, element) {
                calendarEventRender(event, element);
            }
        });

以下是我的功能：

function calendarEventRender(event, element)
{
    element.qtip({
        content: {
            title: { text: event.title },
            text: '<button type="button" onclick="removeEvent(' + event.id + ')">Delete</button>'
        },
        show: {
            event: 'click',
            solo: true
        },
        hide: {
            event: 'unfocus click'
        }
    });
}

function removeEvent(eventId, userId)
{    
    //Delete the event
    $('#calendar').fullCalendar('removeEvents', eventId);
}

这一切似乎都有效。我没有时间去抓取你的代码，但希望这会有所帮助。此外，如果你可以获得http://jsfiddle.net/它的工作，人们可以更轻松地测试和修复它。

嗯所以我创建了一个jsfiddle来测试它：http://jsfiddle.net/MusicMonkey5555/pZdyt/1/ 它似乎在那里不起作用。我的猜测是它是jquery或qtip或fullcalendar版本。这就是jsfiddle的一个问题就是获得所有内容的正确版本。我在我的网站上工作的那个是：

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css
//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js
//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.css

所以我建议尝试使用这些版本并查看它是否有效。大多数情况下，这是因为jquery有一个bug，你需要一个不同的版本。

使用qtip2从fullCalendar中删除元素

3 个答案: