从另一个文件调用完整日历方法/回调 [英] Calling a fullcalendar method/callback from another file

问题描述

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

下面是我的问题编号：

1. Events.js中的SELECT回调不起作用(我已经尝试过了 还有$(Document).ady())(如果它在该单独的文件中 (虽然它只包含在一个文件中，但它工作正常，不出所料)。多么 我可以成功调用此方法吗？
2. 如何在页面加载时立即从localstorage.getItem()呈现事件？(这也将在以后分开)
3. 为什么calendar.js中的localstorage.getItem()获取 物品是否重复存放3次？(这个真让我烦死了)

编辑：我自己解决了几个问题(但遵循第一条评论的建议)： 我现在的立场：

1. 事件现在使用以下代码在选择时成功创建 从Events.js中分离出主calendar.js文件

页面加载时，我仍然需要从localStorage呈现事件(而不是像我那样从单独的文件呈现事件，傻瓜 Goose)

2. localStorage.getItem()不再重复存储的事件3次.我需要一个数组，我又傻了。

   /li>

更新代码： 以下是我的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);
        }
    }

推荐答案

从函数(也分成另一个函数和另一个文件)提升StodEvents解决：

我的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;
}

这篇关于从另一个文件调用完整日历方法/回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！