Question

我在实现我的fullCalendar示例时遇到了一些问题，因为我是javascript，jquery和fullcalendar本身的菜鸟。简短摘要：我的项目结构是索引html，它获取了我需要的js库，并且只有一个div包含fullcalendar，一个calendar.js文件，我保存我的fullcalendar配置，我从外部源和localstorage获取事件，最后是events.js文件，我通过选择时间块并将它们存储到localstorage来实现事件创建。文件应该像这样分开，以保持选项的代码和选择和存储的代码分离，组织和清理。此外，谷歌日历事件也可以作为本地存储事件的备用事件源。

以下是我的问题编号：

来自events.js的select回调不起作用（我试过了与$（document）.ready（）一起，如果它在那个单独的文件中（虽然它只包含在一个，它按预期工作正常）。怎么样我可以成功调用此方法吗？
如何在页面加载时立即从localstorage.getItem（）呈现事件？（这也意味着稍后分开）
为什么calendar.js中的localstorage.getItem（）得到了物品重复存放3次？（这个真的让我烦恼）

编辑：我自己解决了一些问题（但是遵循第一条评论的建议）：我现在的立场：

现在，在使用代码进行选择时，会成功创建事件从events.js
我仍然需要在页面加载时从localStorage渲染事件（而不是像我那样从单独的文件中渲染，愚蠢鹅）
localStorage.getItem（）不再重复存储的事件3次......我需要一个数组，再次愚蠢的我。

更新后的代码： 这是我的calendar.js代码

$(document).ready(function() {
   calendar = $("#calendar").fullCalendar({
        editable: true,
        selectable: true,
        selectHelper: true,
        //Retrieves the function that allows events to be created by selecting cells on the calendar
        select: eventCreaterOnSelection
    });
});

这是我更新的events.js代码：

eventCreaterOnSelection = function(start, end, allDay) {
        // After selection user will be promted to renter the title for the event and if it is an all day event.
        var title = prompt("Event Title:"); //Setting the title for the event
        var allDay;
        //This is an array to store the event attributes
        var save = [];
        //If the user inputs a title then the event will be saved otherwise nothing will occur
        if (title) {
            //First we check and store if it is an all day event
            allDay = confirm("All Day event?");
            //Create the event object with a method to store it in Local Storage
            var newEvent = {
                title: title,
                start: start,
                end: end,
                allDay: allDay,
                //Define Local storage storing and making it readable (stringify for JSON)
                save: localStorage.setItem(title, JSON.stringify({
                    "title": title,
                    "start": start,
                    "end": end,
                    "allDay": allDay
                }))
            };
            //Render the event object and make it "stick"
            calendar.fullCalendar("renderEvent", newEvent, true);
        }
        //Remove the selection on exiting the event creation
        calendar.fullCalendar("unselect");
        //Get the events from storage
        var storedEvents = [];
        for (title in localStorage) {
            storedEvents = localStorage.getItem(title);
            //(testing only. getItem is now successful. To now render on the document this code must go to calendar.js)
            console.log(storedEvents);
        }
    }

Answer 1

通过从函数中提升storedEvents（也分成另一个函数和另一个文件）来解决：

我的fullcalendar.js代码：

$(document).ready(function() {
   calendar = $("#calendar").fullCalendar({   
       //...
       eventSources: [
            {
                //source1 a google calendar url
            },
            {
                events: localStorageEventFetcher()
            }
        ],
        select: eventCreaterOnSelection
        //...
    });
});

我的eventCreatorOnSelection.js：

eventCreaterOnSelection = function(start, end, allDay) {
    var title = prompt("Event Title:");
    var allDay;
    var save = [];
    if (title) {
        allDay = confirm("All Day event?");
        var newEvent = {
            title: title,
            start: start,
            end: end,
            allDay: allDay,
        };
        save.push(localStorage.setItem(title, JSON.stringify(newEvent)));
        calendar.fullCalendar("renderEvent", newEvent, true);
    }
    calendar.fullCalendar("unselect");
}

我的新localStorageEventFetcher.js文件：

localStorageEventFetcher = function(title) {
    var storedEvents = [];
    for (title in localStorage) {
        storedEvents.push(JSON.parse(localStorage.getItem(title)));
    }    
    return storedEvents;
}

Answer 2

您正在初始化日历两次（基本上所谓的第二个是唯一创建的日历）。如果你想要分离你的事件代码，只需从events.js中的方法返回一个具有适当值的对象（或者我猜你可以在全局范围内创建变量），然后你需要将它与事件结合起来你在calendar.js中使用的对象（看看jquery函数合并或扩展为此，我不记得哪一个更合适）
不确定是什么问题。什么是本地存储？它与您的Google日历活动有何关系？您可能应该使用eventSources，因为这允许您指定多个源。
eventRender针对每个事件运行。我认为从您的谷歌日历调用中返回了3个事件，然后您为每个事件运行eventRender，这将导致您的3个电话

从另一个文件调用fullcalendar方法/回调

2 个答案: