12

イベントにクリック イベントを追加し、日付とイベント時間を URL 変数として別のページに渡すにはどうすればよいですか? ユーザーがイベントをクリックすると、日付とイベント時間を別のページに渡して処理したいと考えています。

4

6 に答える 6

22 
$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {
        window.location = "http://www.domain.com?start=" + calEvent.start;

    }
});

詳細については、こちらをご覧ください: http://arshaw.com/fullcalendar/docs/mouse/eventClick/

于 2010-03-26T16:42:36.443 に答える
2

日付グリッドをクリックするためのコールバック:

dayClick: function(date, allDay, jsEvent, view) {
...
}

クリックイベントのコールバック:

eventClick: function(event) {
...
}

この実際のデモを試すことができます: http://www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm

于 2012-09-04T11:47:39.920 に答える
1

ダイアログを呼び出して入力する方法は次のとおりです。

$('#calendar').fullCalendar({ 
    dayClick: function (date, allDay, jsEvent, view) {  
        $("#dialog").dialog('open');
    },   
});

$("#dialog").dialog({
    autoOpen: false,
    height: 350,
    width: 700,
    modal: true,
    buttons: {
        'Create event': function () {
            $(this).dialog('close');
        },
        Cancel: function () {
            $(this).dialog('close');
        }
    },

    close: function () {
    }

});
于 2012-04-11T07:16:00.750 に答える
1

Event オブジェクトには url パラメータがあります。これは <a> タグを作成するだけです。これをバックエンドで自分で構築して、必要な引数を URL に渡すことができます。@durilai の JavaScript メソッドも同様に機能します。

于 2010-04-09T01:50:44.643 に答える
1

これは古い投稿であることは知っていますが、今朝、似たようなものを探していました。他のいくつかのソリューションを調べた後、私のソリューションははるかに簡単だったと感じています。 1 つは、アンカー タグで font awesome を使用していることです。

ユーザーがイベントをクリックしたときにカレンダーにイベントを表示したいと考えていました。そこで、次のように別のタグをコーディングしました。

<div id="eventContent" class="eventContent" style="display: none; border: 1px solid #005eb8; position: absolute; background: #fcf8e3; width: 30%; opacity: 1.0; padding: 4px; color: #005eb8; z-index: 2000; line-height: 1.1em;">
    <a style="float: right;"><i class="fa fa-times closeEvent" aria-hidden="true"></i></a><br />
    Event: <span id="eventTitle" class="eventTitle"></span><br />
    Start: <span id="startTime" class="startTime"></span><br />
    End: <span id="endTime" class="endTime"></span><br /><br />
</div>

asp.net を使用しているため、jquery でクラス名を使用する方が簡単です。

以下は、私の fullcalendar アプリの jquery です。

<script>

    $(document).ready(function() {
    
        $('#calendar').fullCalendar({
            googleCalendarApiKey: 'APIKEY',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            events: {
                googleCalendarId: '@group.calendar.google.com'
            },
            eventClick: function (calEvent, jsEvent, view) {
                var stime = calEvent.start.format('MM/DD/YYYY, h:mm a');
                var etime = calEvent.end.format('MM/DD/YYYY, h:mm a');
                var eTitle = calEvent.title;
                var xpos = jsEvent.pageX;
                var ypos = jsEvent.pageY;
                $("#eventTitle").html(eTitle);
                $("#startTime").html(stime);
                $("#endTime").html(etime);
                $("#eventContent").css('display', 'block');
                $("#eventContent").css('left', '25%');
                $("#eventContent").css('top', '30%');
                return false;
            }
        });
        $("#eventContent").click(function() {
            $("#eventContent").css('display', 'none');
        });
    });

</script>

独自の Google カレンダー ID と API キーが必要です。

シンプルなポップアップ表示が必要な場合に、これが役立つことを願っています

于 2016-09-01T21:30:06.717 に答える
1

さて、私は自分の質問に答えたようです。JavaScript関数escape()がそのトリックを行います。

于 2010-12-01T21:06:40.833 に答える