javascript - 动态添加完整日历不起作用

Question

我尝试添加完整的日历。我第一次单击该按钮并添加了成功。在我使用 jquery empty() 方法清除 ScheduleCalender div 后。我重新运行完整的日历代码。但完整的日历并没有出现。至少 div 内不会出现任何内容。这是我的代码。我的 div 选择器工作正常。我测试过。

$('#addNewTimeScheduleEntry').click(function () {
    $('#scheduleCalendar').empty();
    var scheduleYear = $('.scheduleYear').val();
    var scheduleMonth = $('.scheduleMonth').val();

    $('#scheduleCalendar').fullCalendar({
        defaultDate: scheduleYear + '-' + scheduleMonth + '-01',
        header: {
            left: '',
            center: '',
            right: 'title'
        },
        eventRender: function (event, element) {
            element.qtip({
                content: event.description,
                style: {
                    classes: 'qtip-dark qtip-shadow'
                },
                position: {
                    my: 'top left', // Position my top left...
                    at: 'bottom right', // at the bottom right of...
                    target: $(element) // my target
                }
            });

        },
        height: $('.panel-body').height()-50

    });

});

here has full calendar link

这是我的 html

<div class="panel-body fixed-content">
    <div class="year-month-control">
    <select class="selectpicker scheduleYear">
    </select>

    <select class="selectpicker scheduleMonth">
    </select>

        <button type="button" id="addNewTimeScheduleEntry" class="btn btn-default" id="addnewScheduleEntry"><i class="fa fa-plus"></i>&nbsp;Add Entry</button>
        <button type="button" id="addNewTimeScheduleEntry" class="btn btn-default" id="saveScheduleEntry" ><i class="fa fa-upload"></i>&nbsp;Save Entry</button>
    </div>
    <br/>
    <div id='scheduleCalendar'></div>

</div>

Answer 1

即使清空 div 后它也可以正常运行。唯一的区别是我已将其放入文档就绪事件中，但我认为这不会有任何区别。这里有 2 个 jsfiddles； http://jsfiddle.net/2qs8tyg1/2/

$(document).ready(function() {

    $('#addNewTimeScheduleEntry').click(function () {
        $('#scheduleCalendar').empty();
        $('#scheduleCalendar').fullCalendar({});
        var scheduleYear = date.getFullYear();
        var scheduleMonth = date.getMonth();

        $('#scheduleCalendar').fullCalendar({
            defaultDate: scheduleYear + '-' + scheduleMonth + '-01',
            header: {
                left: '',
                center: '',
                right: 'title'
            },
            eventRender: function (event, element) {
                element.qtip({
                    content: event.description,
                    style: {
                        classes: 'qtip-dark qtip-shadow'
                    },
                    position: {
                        my: 'top left', // Position my top left...
                        at: 'bottom right', // at the bottom right of...
                        target: $(element) // my target
                    }
                });

            },
            height: $('.panel-body').height()-50

        });

    });

});

http://jsfiddle.net/justinobney/uaNgR/

jQuery(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            viewDisplay: function(view) {
                window.location.hash = "month=" + (view.start.getMonth() + 1) + "&year=" +view.start.getFullYear();
            },
            editable: true,
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                },
                {
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ]
        });

    function setupRouting() {
        $.jsRouter.mapRoute('Month Change', 'month={month}&year={year}', MonthChanged);
    }

    function MonthChanged(args) {
        var vMonth = args.month;
        var vYear = args.year;
        console.log('event trapped:', args);
    }
        $.getScript('http://www.tasktrackr.com/js/routing.js',setupRouting);
    //jQuery.deparam.fragment()
    //$.getScript('https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js')
    });