jQuery 单击具有关联 url 的事件时在 fullcalendar 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22128825/
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
in fullcalendar when clicking on an event with an associated url
提问by Tiny
In full calendar when clicking on an event with an associated URL, how you do you change from the default open in active window to opening the URL in a new window or tab?
在完整日历中单击具有关联 URL 的事件时，如何将默认在活动窗口中打开更改为在新窗口或选项卡中打开 URL？
I have found the event function on Arshaws docs but cannot find the relevent function in any of the scripts. Do I need to add the click-event function, and if so where?
我在 Arshaws 文档上找到了事件函数，但在任何脚本中都找不到相关函数。我是否需要添加点击事件功能，如果需要，在哪里？
Sorry, im still having problems with this, this is the script im using to control the calendar, im not sure how to add the event parameters via json format to get the click function to open the event in a new window. I have indicated the event function im having a problem with
抱歉，我仍然有这个问题，这是我用来控制日历的脚本，我不确定如何通过 json 格式添加事件参数以获取单击功能以在新窗口中打开事件。我已经指出我有问题的事件函数
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
weekMode: 'liquid',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "fullcalendar/fullcalendar/events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'fullcalendar/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
})
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'fullcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'fullcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventClick: function(event) {
var decision = confirm("Do you really want to delete this Event?");
if (decision==true) {
$.ajax({
url: 'fullcalendar/fullcalendar/delete_events.php',
data:'&id=' + event.id,
type: "POST",
success: function(json) {
alert("Removed Succesfully");
}
});
$('#calendar').fullCalendar('removeEvents', event.id);
****************************************************************************
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-01-01',
url: 'http://stackoverflow.com/'
}
// other events here
],
eventClick: function(event) {
if (event.url) {
window.open(event.url, "_blank");
return false;
}
*****************************************************************************
}
});
} else {
}
}
});
});
</script>
回答by Derek
You can use the eventClick callback in fullcalendar
您可以在 fullcalendar 中使用 eventClick 回调
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-01-01',
url: 'http://stackoverflow.com/'
}
// other events here
],
eventClick: function(event) {
if (event.url) {
window.open(event.url, "_blank");
return false;
}
}
});
回答by Typolist
Thanks for this!
谢谢你！
If you want to distinguish between internal linking (same window) and external linking (new window), you could solve it as follows:
如果要区分内部链接（同窗口）和外部链接（新窗口），可以如下解决：
...
eventClick: function(event) {
// If extern url/domain
if (event.url.indexOf(document.location.hostname) === -1) {
// Open url in new window
window.open(event.url, "_blank");
// Deactivate original link
return false;
}
},
...
回答by Prashant Rijal
fullCalendar({
viewRender: function(view, element) {
if (view.name != 'month') {
$(element).find('.fc-scroller').perfectScrollbar();
}
},
header: {
left: 'title',
center: 'month',
right: 'prev,next,today'
},
defaultDate: today,
disableDragging: true,
editable: false,
selectable: true,
selectHelper: true,
views: {
month: { // name of view
titleFormat: 'MMMM YYYY'
},
week: {
titleFormat: " MMMM D YYYY"
},
day: {
titleFormat: 'D MMM, YYYY'
}
},
select: function(start, end) {
swal({
title: 'Create an Event',
html: '<div class="form-group">' +
'<input class="form-control" placeholder="Event Title" id="input-field">' +
'</div>',
showCancelButton: true,
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false
}).then(function(result) {
var eventData;
event_title = $('#input-field').val();
if (event_title) {
eventData = {
title: event_title,
start: start,
end: end
};
$calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
}
$calendar.fullCalendar('unselect');
}).catch(swal.noop);
},
eventLimit: true, // allow "more" link when too many events
events: {
url: base_url+'p-teacher/calendar.php',
failure: function() {
document.getElementById('script-warning').style.display = 'block'
}
},
eventClick: function(event) {
if (event.url) {
window.open(event.url, "_blank");
return false;
}
}
});
This works for me.
这对我有用。
回答by maskedjellybean
If using V4 of FullCalendar, try this instead:
如果使用 FullCalendar 的 V4，请尝试以下操作：
eventClick: function(event) {
if (event.event.url) {
event.jsEvent.preventDefault()
window.open(event.event.url, "_blank");
}
}
