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 に答える