如何使用javascript填充日历?

时间:2014-12-19 10:58:02

标签: javascript jquery calendar cross-platform tizen

我正在尝试开发一个我需要使用此日历的应用程序: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文件。

1 个答案:

答案 0 :(得分:0)

您可以使用renderEvent

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

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

根据the docs,事件必须是具有标题的事件对象,并且至少从头开始。通常,一旦日历重新获取其事件源,事件将消失(例如:单击prev / next时)。但是,将stick指定为true将导致事件永久固定到日历。

对你而言,我想这会转化为:

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

我还没有使用过fullCalendar,但是如果这不起作用,那就做一个你已经得到的东西,我会让你成为一个有效的榜样。