如何在点击超链接时调用fullcalendar回调

How to call fullcalendar callback on click of hyperlink

本文关键字：调用 fullcalendar 回调超链接更新时间：2023-09-26

我可以在每个单元格上添加以下按钮：

var add_button = '<input type="button" value="+" />'; 
$(".fc-day-number").prepend(add_button);

但我希望点击这个链接后发生这种情况：

<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);
    });
 });

我自己得到的，

在链接中添加了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>

现在在fullcalendar中添加了此代码。

$(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);
        }
    });