Question

这是我的jQuery Fullcalendar脚本，它在网格视图中显示日历。现在onClick事件我想在弹出窗口中显示详细信息而不是在浏览器中打开，我尝试了很多回调但是没有工作。有人曾经做过吗？

$(document).ready(function() {

    $('#calendar').fullCalendar({

        // US Holidays
        // events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',


        eventClick: function(event) {
            // opens events in a popup window
            window.open(event.url, 'gcalevent', 'width=700,height=600');
            return false;
        },

        loading: function(bool) {
            if (bool) {
                $('#loading').show();
            }else{
                $('#loading').hide();
            }
        }

    });

});

尝试下面的事情，但没有工作

eventClick: function(event) {
            if (event.url) {
              $('#myDialog')
                .load(event.url)
                .dialog({
                  width: 500,
                  height:300
                });
              return false;
        }},

Answer 1

如果通过

在弹出窗口中显示详细信息

你的意思是警告，你可以这样做：

eventClick: function(calEvent, jsEvent, view) {
    alert('Event: ' + calEvent.title);
    // change the border color just for fun
    $(this).css('border-color', 'red');
}

行动中：http://jsfiddle.net/vegemite4me/N8XT9/

Answer 2

尝试一下：

HTML

<div id="popup"></div>

CSS

#popup {
    display: none;
}

JQuery的

eventClick: function(event) {
    // opens events in a popup window
    $('#popup').html('<iframe src="'+event.url+'" width="700" height="600"></iframe>');
    $('#popup').dialog({autoOpen: false, modal: true, width: 750, height: 675});
    return false;
},

注意：如果还没有，请确保下载并包含JQuery UI from here。

JSFiddle

Answer 3

您可以像下面那样使用eventClick获取完整的日历

 $('#calendar').fullCalendar({
 eventClick: function(calEvent, jsEvent, view) {
// call your javascript function to open modal or popup here
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);

// change the border color just for fun
$(this).css('border-color', 'red');

 }
});

文档链接为here。

jQuery FullCalendar onclick show popup

3 个答案: