如何在点击超链接时调用全日历回调
How to call fullcalendar callback on click of hyperlink
我可以用这个在每个单元格上添加按钮:
var add_button = '<input type="button" value="+" />';
$(".fc-day-number").prepend(add_button);
但我希望在点击这个 link:
后发生这种情况
<a id="test" style="background-color:#3a87ad; border-radius: 5px; padding:10px 30px; font-weight:600; letter-spacing: 0.8px; color: #fff; font-size:1.1em; text-shadow:none;">1:00 AM - 2:00 AM</a> <em class="glyphicon glyphicon-remove" style="position: relative; top: -20px;"><span class="sr-only sr-only-focusable">Remove</span></em></a>
我已经试过了,但没用:
$('#test').bind('click', function( event ){
alert('Hi there!');
$('$calendar').fullcalendar({
var add_button = '<input type="button" value="+" />';
$(".fc-day-number").prepend(add_button);
});
});
我自己搞定的,
在 link
中添加了 onClick 事件
<li><a onClick="setTimeSlot('1:00 AM - 2:00 AM')" style="background-color:#3a87ad; border-radius: 5px; padding:10px 30px; font-weight:600; letter-spacing: 0.8px; color: #fff; font-size:1.1em; text-shadow:none;">1:00 AM - 2:00 AM</a> <em class="glyphicon glyphicon-remove" style="position: relative; top: -20px;"><span class="sr-only sr-only-focusable">Remove</span></em></a></li>
已创建 javascript 函数:
<script type="text/javascript">
var timeSlot; //Created global variable to add timeslot
function setTimeSlot(time) {
alert("Time slot is in function :" + time);
timeSlot = time;
}
</script>
现在在全日历中添加了这段代码。
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2015-01-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-01-01'
},
{
title: 'Long Event',
start: '2015-01-07',
end: '2015-01-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-01-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-01-16T16:00:00'
},
{
title: 'Conference',
start: '2015-01-11',
end: '2015-01-13'
},
{
title: 'Meeting',
start: '2015-01-12T10:30:00',
end: '2015-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-01-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-01-12T17:30:00'
},
{
title: 'UI Development Meeting',
start: '2015-01-21',
end: '2015-01-21'
},
{
title: 'Two Day Event',
start: '2015-01-29',
end: '2015-01-31'
}
],
dayClick: function(date) {
addEvent(date);
},
});
function addEvent(date) {
var newEvent = {
title: timeSlot,
start: date.format()
};
}
$('#calendar').fullCalendar('renderEvent',newEvent,true);
}
});
我可以用这个在每个单元格上添加按钮:
var add_button = '<input type="button" value="+" />';
$(".fc-day-number").prepend(add_button);
但我希望在点击这个 link:
后发生这种情况<a id="test" style="background-color:#3a87ad; border-radius: 5px; padding:10px 30px; font-weight:600; letter-spacing: 0.8px; color: #fff; font-size:1.1em; text-shadow:none;">1:00 AM - 2:00 AM</a> <em class="glyphicon glyphicon-remove" style="position: relative; top: -20px;"><span class="sr-only sr-only-focusable">Remove</span></em></a>
我已经试过了,但没用:
$('#test').bind('click', function( event ){
alert('Hi there!');
$('$calendar').fullcalendar({
var add_button = '<input type="button" value="+" />';
$(".fc-day-number").prepend(add_button);
});
});
我自己搞定的,
在 link
中添加了 onClick 事件<li><a onClick="setTimeSlot('1:00 AM - 2:00 AM')" style="background-color:#3a87ad; border-radius: 5px; padding:10px 30px; font-weight:600; letter-spacing: 0.8px; color: #fff; font-size:1.1em; text-shadow:none;">1:00 AM - 2:00 AM</a> <em class="glyphicon glyphicon-remove" style="position: relative; top: -20px;"><span class="sr-only sr-only-focusable">Remove</span></em></a></li>
已创建 javascript 函数:
<script type="text/javascript">
var timeSlot; //Created global variable to add timeslot
function setTimeSlot(time) {
alert("Time slot is in function :" + time);
timeSlot = time;
}
</script>
现在在全日历中添加了这段代码。
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2015-01-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-01-01'
},
{
title: 'Long Event',
start: '2015-01-07',
end: '2015-01-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-01-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-01-16T16:00:00'
},
{
title: 'Conference',
start: '2015-01-11',
end: '2015-01-13'
},
{
title: 'Meeting',
start: '2015-01-12T10:30:00',
end: '2015-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-01-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-01-12T17:30:00'
},
{
title: 'UI Development Meeting',
start: '2015-01-21',
end: '2015-01-21'
},
{
title: 'Two Day Event',
start: '2015-01-29',
end: '2015-01-31'
}
],
dayClick: function(date) {
addEvent(date);
},
});
function addEvent(date) {
var newEvent = {
title: timeSlot,
start: date.format()
};
}
$('#calendar').fullCalendar('renderEvent',newEvent,true);
}
});