如何使用javascript填充日历

How can I populate a calendar with javascript?

本文关键字：日历 填充 javascript 何使用      更新时间：2023-09-26

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

您可以使用 renderEvent

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

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

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

对你来说，我想这会转化为这样的东西：

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

我没有使用fullCalendar，但是如果这不起作用，请摆弄一下您所拥有的内容，我将为您制作一个工作示例。

相关文章：