1

这是我的 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;
        }},
4

3 回答 3

2

如果通过

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

你的意思是一个警报，你可以这样做：

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/

于 2013-09-10T14:39:48.267 回答
1

试试这个：

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（如果您还没有的话）。

JSFiddle

于 2013-09-10T15:14:49.463 回答
1

您可以使用 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');

 }
});

文档链接在这里。

于 2019-02-07T09:41:28.680 回答