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

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

于 2010-12-01T21:06:40.833 回答
1

我知道这是一篇较旧的帖子，但我今天早上正在寻找类似的东西。在查看了其他一些解决方案后，我觉得我的解决方案要简单得多。 一件事是我在锚标签中使用了很棒的字体。

当用户单击事件时，我想在我的日历上显示一个事件。所以我编写了一个单独的标签，如下所示：

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

下面是我的全日历应用程序的 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>

您必须拥有自己的谷歌日历 ID 和 API 密钥。

我希望当您需要一个简单的弹出显示时这会有所帮助

于 2016-09-01T21:30:06.717 回答