Javascript 向 fullcalendar 添加点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2524971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding a click event to fullcalendar
提问by sbekele
How can I add a click event on an event and pass the day and event time as a url variable to another page? When a user clicks on an event I want to pass the date and event time to another page for processing.
如何在事件上添加点击事件并将日期和事件时间作为 url 变量传递到另一个页面？当用户单击一个事件时，我想将日期和事件时间传递到另一个页面进行处理。
回答by Dustin Laine
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
window.location = "http://www.domain.com?start=" + calEvent.start;
}
});
Look here for more info: http://arshaw.com/fullcalendar/docs/mouse/eventClick/
在这里查看更多信息：http: //arshaw.com/fullcalendar/docs/mouse/eventClick/
回答by terry
callback for clicking date grid:
单击日期网格的回调：
dayClick: function(date, allDay, jsEvent, view) {
...
}
callback for clicking event:
点击事件回调：
eventClick: function(event) {
...
}
You can try this real world demo: http://www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm
你可以试试这个真实世界的演示：http: //www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm
回答by Roger
I know this is an older post but I was looking for something similar this morning. I feel that my solution was much simpler after looking over some of the other solutions. One thing is that I use font awesome in the anchor tag.
我知道这是一个较旧的帖子，但我今天早上正在寻找类似的东西。在查看了其他一些解决方案后，我觉得我的解决方案要简单得多。 一件事是我在锚标记中使用了很棒的字体。
I wanted to display an event on my calendar when the user clicked the event. So I coded a separate tag like so:
当用户单击事件时，我想在我的日历上显示一个事件。所以我编码了一个单独的标签，如下所示：
<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>
I find it easier to use class names in my jquery since I am using asp.net.
我发现在我的 jquery 中使用类名更容易，因为我使用的是 asp.net。
Below is the jquery for my fullcalendar app.
下面是我的 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>
You must have your own google calendar id and api keys.
您必须拥有自己的谷歌日历 ID 和 API 密钥。
I hope this helps when you need a simple popup display
我希望当您需要一个简单的弹出显示时这会有所帮助
回答by partkyle
There is a url parameter on the Event object. This will just create an <a> tag. You could build this in the back end yourself to pass whatever arguments you need over the url. @durilai's javascript method would work as well.
Event 对象上有一个 url 参数。这只会创建一个 <a> 标签。您可以自己在后端构建它，以通过 url 传递您需要的任何参数。@durilai 的 javascript 方法也可以。
回答by Justin B
Okay, looks like I answered my own question. Javascript function escape()does the trick.
好的，看起来我回答了我自己的问题。Javascript 函数escape()可以解决问题。
回答by Hasan Ozgan
Here's how I call the dialog and populate it:
这是我调用对话框并填充它的方法：
$('#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 () {
}
});
