[英]adding a click event to fullcalendar
如何在事件上添加點擊事件並將日期和事件時間作為 url 變量傳遞到另一個頁面? 當用戶單擊一個事件時,我想將日期和事件時間傳遞到另一個頁面進行處理。
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
window.location = "http://www.domain.com?start=" + calEvent.start;
}
});
在這里查看更多信息: http : //arshaw.com/fullcalendar/docs/mouse/eventClick/
單擊日期網格的回調:
dayClick: function(date, allDay, jsEvent, view) {
...
}
點擊事件回調:
eventClick: function(event) {
...
}
你可以試試這個真實世界的演示: http : //www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm
這是我調用對話框並填充它的方法:
$('#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 () {
}
});
Event 對象上有一個 url 參數。 這只會創建一個 <a> 標簽。 您可以自己在后端構建它,以通過 url 傳遞您需要的任何參數。 @durilai 的 javascript 方法也可以。
我知道這是一個較舊的帖子,但我今天早上正在尋找類似的東西。 在查看了其他一些解決方案后,我覺得我的解決方案要簡單得多。 一件事是我在錨標記中使用了很棒的字體。
當用戶單擊事件時,我想在我的日歷上顯示一個事件。 所以我編碼了一個單獨的標簽,如下所示:
<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>
您必須擁有自己的谷歌日歷 ID 和 API 密鑰。
我希望當您需要一個簡單的彈出顯示時這會有所幫助
好的,看起來我回答了我自己的問題。 Javascript 函數escape()
可以解決問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.