Question

如何在事件上添加click事件并将日期和事件时间作为url变量传递给另一个页面？当用户点击某个事件时，我想将日期和事件时间传递给另一个页面进行处理。

Answer 1

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

    }
});

点击此处了解更多信息：http://arshaw.com/fullcalendar/docs/mouse/eventClick/

Answer 2

单击日期网格的回调：

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

点击事件的回调：

eventClick: function(event) {
...
}

您可以尝试这个真实世界的演示：http://www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm

Answer 3

Event对象上有一个url参数。这将只创建一个＆lt; a＆gt;标签。您可以在后端自己构建它，以便在URL上传递您需要的任何参数。 @durilai的javascript方法也可以。

Answer 4

好的，好像我回答了我自己的问题。 Javascript函数escape()可以解决问题。

Answer 5

以下是我如何调用对话框并填充它：

$('#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 () {
    }

});

Answer 6

我知道这是一篇较老的帖子，但今天早上我正在寻找类似的东西。在查看了其他一些解决方案后，我觉得我的解决方案更简单了。 One thing is that I use font awesome in the anchor tag.

我希望在用户点击该活动时在我的日历上显示一个事件。所以我编写了一个单独的标签，如下所示：

<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>

我发现在我的jquery中使用类名更容易，因为我使用的是asp.net。

以下是我的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密钥。

我希望当你需要一个简单的弹出窗口时，这会有所帮助

将click事件添加到fullcalendar

6 个答案: