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

Question

我可以通过以下方式在每个单元格上添加按钮:

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

    });
 });

Answer 1

我自己拿到了，

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

    });