如何用JavaScript填充日历？

Question

我正在尝试开发一个需要使用此日历的应用程序： http : //fullcalendar.io/

问题是我可以手动填充它，但是不能从数据库填充它。

这是填充日历的功能：

$('#calendar').fullCalendar({
       header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        eventLimit: true, 
        events:[
            {
                title: "aaaa",
                start: "2014-12-12"
            },
            {
                title: "bbb",
                start: "2014-12-13"
            }
        ]


    });



});

这是允许我从数据库中获取数据的函数：

function getEvents(db){

        db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM NOTES', [], function (tx, results) {
           // var allEvents = [];
           var allEvents=[]; 

            for (var i = 0; i < results.rows.length; i++){
            //var event = {};
            allEvents.push({
                title: results.rows.item(i).note,
                start: results.rows.item(i).whenn

            });


            }


            $.each(allEvents, function(idx, obj){
                alert(obj.title);
                });
        }, null);

        });



    };

当我在事件中调用函数getEvents（db）时，它向我显示警报，但不填充日历。

PS：我不能使用php文件。

Answer 1

您可以使用renderEvent

.fullCalendar( 'renderEvent', event [, stick ] )

顾名思义，它在日历上呈现了一个新事件。

根据docs ，事件必须是一个带有标题的事件对象，并且至少要开始。 通常，一旦日历重新获取其事件源，该事件就会消失（例如：单击上一个/下一个时）。 但是，将stick指定为true会使事件永久固定在日历上。

对于您来说，我想这会转化为：

$.each(allEvents, function(idx, obj){
  $('#calendar').fullCalendar( 'renderEvent', obj);
});

我没有使用过fullCalendar，但是如果这样做不起作用，请弄清楚您所拥有的内容，然后我将为您提供一个可行的示例。