admin管理员组文章数量:1206255
Hi i am trying to use the fullcalendar plugin to create a calendar.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event title');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-12-01'
},
{
title: 'Long Event',
start: '2015-12-07',
end: '2015-12-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-16T16:00:00'
},
{
title: 'Conference',
start: '2015-12-11',
end: '2015-12-13'
},
{
title: 'Meeting',
start: '2015-12-12T10:30:00',
end: '2015-12-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-12-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-12-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-12-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-12-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-12-13T07:00:00'
},
{
title: 'Click for Google',
url: '/',
start: '2015-12-28'
}
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</div>
</body>
</html>
Here are the codes. However i want to do it in a way that when a person click on any of the date, it will redirect them to another html page. i went to research online and found out that it got something to link to dayclick or eventclick function. However i dont really know how to apply into it to suit my needs. hope anyone could help me. Help would be appreciated alot. Thanks in advance. :)
Hi i am trying to use the fullcalendar plugin to create a calendar.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event title');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-12-01'
},
{
title: 'Long Event',
start: '2015-12-07',
end: '2015-12-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-16T16:00:00'
},
{
title: 'Conference',
start: '2015-12-11',
end: '2015-12-13'
},
{
title: 'Meeting',
start: '2015-12-12T10:30:00',
end: '2015-12-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-12-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-12-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-12-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-12-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-12-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-12-28'
}
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</div>
</body>
</html>
Here are the codes. However i want to do it in a way that when a person click on any of the date, it will redirect them to another html page. i went to research online and found out that it got something to link to dayclick or eventclick function. However i dont really know how to apply into it to suit my needs. hope anyone could help me. Help would be appreciated alot. Thanks in advance. :)
Share Improve this question edited Jan 4, 2016 at 17:54 Harry 3691 silver badge11 bronze badges asked Jan 4, 2016 at 17:39 SukiyamSukiyam 811 gold badge1 silver badge4 bronze badges4 Answers
Reset to default 13You can just use the url property in the event data as follows:
events: [
{
title: 'All Day Event',
start: '2015-12-01',
url: 'http://google.com'
}
If you look at the docs here: http://fullcalendar.io/docs/event_data/Event_Object/ you can see all the different properties you can use.
use:
select:function()
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, jsEvent, view){
//wrtie your redirection code here
var root_url="http://localhost/";
window.location = root_url+"test1.html"
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-12-01'
},
{
title: 'Long Event',
start: '2015-12-07',
end: '2015-12-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-16T16:00:00'
},
{
title: 'Conference',
start: '2015-12-11',
end: '2015-12-13'
},
{
title: 'Meeting',
start: '2015-12-12T10:30:00',
end: '2015-12-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-12-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-12-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-12-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-12-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-12-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-12-28'
}
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
This is how to make the link open in new tab:
events: [
{
title: 'All Day Event',
start: '2015-12-01',
link_to_url: 'http://example.com' //if you use "url:", it will redirect you in the same tab with no Back functionality
}
]
and in the initialization use
eventRender: function (info) {
if (info.event.extendedProps.link_to_url != null && info.event.extendedProps.link_to_url != "") {
$(info.el).attr("href", info.event.extendedProps.link_to_url);
$(info.el).attr("target", "_blank");
}
}
A note: when I tried the answers mentioned by @Harry and @Ravi, I lost the possibility to get back by browser Back button (Firefox).
In version 4.0 onward, you can do like that.
From the backend, you can provide any link, custom html, or whatever you want, then in the render function you repopulate like below:
eventRender: function (info) {
var customTitleForMonth = info.event.title;
$(info.el).find('.fc-title').html(customTitleForMonth);/*For Month,Day and Week Views*/
var customTitleForList = info.event.title.replace("target=", "style='color:black;text-decoration:underline;' target=");
$(info.el).find('.fc-list-item-title').html(customTitleForList);/*For List view*/
$(info.el).find('.fc-content').css('min-height', '70px');
},
where info.event.title is the title which contains the custom html.
本文标签： javascriptFullCalendarAdd links to eventsStack Overflow
版权声明：本文标题：javascript - FullCalendar - Add links to events - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738714349a2108386.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论