带有 jQ​​uery 的 JSON 数据文件

Question

需要您的帮助，尝试更改此脚本： https://github.com/MrHus/jquery-monthly-ical

加载外部 JSON 数据文件。所以不是本地的 javascript 或带有 JSON 的 PHP 数组，而是一个真正的 .json 数据文件。

这是当前脚本：

    $(document).ready(function()
    {   
        $("#ical").ical({
            /*beforeMonth:function(date)
            {
                $.ajax({
                    type: "GET",
                    url: "action.php",
                    dataType: "json",
                    data: "date="+date,
                    async: false,
                    success: function(json){
                        $.fn.ical.changeEventDates(json); 
                    }   
                })
            },*/
            //daynames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            //startOnSunday: true,


              eventdates: [{"date": "2009-03-21", "title": "My birthday", "desc": "Its my birthday!"},
                         {"date": "yyyy-01-01", "title": "New Year", "desc": "Its a new year!"},
                         {"date": "2009-mm-01", "title": "New Month", "desc": "First day of the new month!"},
                         {"date": "2010-mm-01", "title": "New Month", "desc": "First day of the new month!"},
                         {"date": "2010-09-01", "title": "Convention", "desc": "September convention."}, 
                         {"date": "2010-09-02", "title": "Convention", "desc": "September convention day two."}, 
                         {"date": "2010-mm-01", "title": "Towl", "desc": "Dont forget to bring a towl."}    
                        ]
        });
    });

我如何使用具有相同数据的 .json 文件：但 eventdates: 行必须在 JavaScript 中位于它之前，因为我的 JSON 文件中没有它。

    eventdates: [{"date": "2009-03-21", "title": "My birthday", "desc": "Its my birthday!"},
                         {"date": "yyyy-01-01", "title": "New Year", "desc": "Its a new year!"},
                         {"date": "2009-mm-01", "title": "New Month", "desc": "First day of the new month!"},
                         {"date": "2010-mm-01", "title": "New Month", "desc": "First day of the new month!"},
                         {"date": "2010-09-01", "title": "Convention", "desc": "September convention."}, 
                         {"date": "2010-09-02", "title": "Convention", "desc": "September convention day two."}, 
                         {"date": "2010-mm-01", "title": "Towl", "desc": "Dont forget to bring a towl."}    
                           ]

目前无法从文件中显示我的 JSON 数据。这是处理 JSON 的 JavaScript 部分。但不起作用，请帮助。

            var month = getMonthNumber($("#currentmonth", obj).text());
            var year = $("#currentyear", obj).text();

            var formatdate = formatDate(year, month, i);

            var jsondates  = getEventDates(formatdate)

            if (jsondates.length === 0)
            {
                options.beforeDay(formatdate);
                $(".icaltable tr:last", obj).append("<td id = '"+formatdate+"'>"+i+"</td"); //add day
            }
            else
            {
                var firstEvent = true;
                for (var k = 0; k < jsondates.length; k++)
                {
                    var datejson = jsondates[k];
                    options.beforeDay(formatdate);

                    //alert(datejson.title);

                    var str = "<li><span class='title'>"+ datejson.LOCATION +"</span><span class='desc'>"+ datejson.SUMMARY +"</span></li>"

                    if (firstEvent)
                    {
                        $(".icaltable tr:last", obj).append("<td class='date_has_event' id = '"+ formatdate +"'>"+i+"<div class='events'><ul id ='ul-"+ formatdate +"'>"+ str +"</ul></div></td>"); //add day  
                        firstEvent = false;
                    }
                    else
                    {
                        $("#ul-" + formatdate, obj).append(str);
                    }
                }
            }
        };

        if (options.startOnSunday){
            startOnSunday = 1;
        } 

        for (var i = 0; i < afterpadding - startOnSunday; i++) //add after padding
        {
            $(".icaltable tr:last", obj).append("<td class = 'padding'></td");
        }

        highlightToday(obj);
    };

    function getMonthNumber(month){
        for (var i = 0; i < options.monthnames.length; i++)
        {
            if (options.monthnames[i] === month)
            {
                return i;
            }
        }
    };

    function getDaysInMonth(year, month){
        return 32 - new Date(year, month, 32).getDate();
    };

    function highlightToday(obj){
        var today = new Date();
        today = formatDate(today.getFullYear(), today.getMonth(), today.getDate());
        $("#"+today, obj).addClass("today");
    };

    function getEventDates(date){

        var results = [];

        for (var i = 0;  i < eventdates.length; i++)
        {     
            var evaldate = evaluateEventDate(eventdates[i]["DTSTART"], date);
            if (date === evaldate)
            {
                results.push(eventdates[i]);
            } 
        }

        return results;
    };

    function evaluateEventDate(eventdate, date){
        var eventdate = eventdate.split('-');
        var date = date.split('-');

        if (eventdate[0] === 'yyyy')
        {
            eventdate[0] = date[0];
        }

        if (eventdate[1] === 'mm') 
        {
            eventdate[1] = date[1];
        }

        if (eventdate[2] === 'dd')
        {
            eventdate[2] = date[2];
        }

        return eventdate[0]+'-'+eventdate[1]+'-'+eventdate[2];
    };

    function getLastDayOfMonth(year, month, days){
        var date = new Date(year, month, days);
        if (date.getDay() == 0)//we start on monday!
        {
            return 6;
        }
        else
        {
            return date.getDay() -1;
        }
    };

这是json数据示例：

            [
  {
    "DTSTAMP": "20010101T000000Z", 
    "DESCRIPTION": "Hartel-Kuwait", 
    "TRANSP": "TRANSPARENT", 
    "SUMMARY": "HW ", 
    "LOCATION": "Hartel", 
    "DTEND": "20110816", 
    "DTSTART": "20110815", 
    "CATEGORIES": "Tide20110815HARTKWT", 
    "UID": "0.625169509629817"
  }
            ]

Answer 1

我认为您已接近注释掉的代码。

它说在每个月加载之前，它将使用 AJAX 从您指定的来源获取事件日期。

在示例中，它尝试从action.php 脚本中获取事件。但是，如果您希望每个月都使用硬编码的 .json 文件，您可以简单地将 action.php 替换为 test.json。

您的新代码可能是：

<script type="text/javascript">
    $(document).ready(function()
    {   
        $("#ical").ical({
            beforeMonth:function(date)
            {
                $.ajax({
                    type: "GET",
                    url: "test.json",
                    dataType: "json",
                    async: false,
                    success: function(json){
                        $.fn.ical.changeEventDates(json); 
                    }   
                })
            }
        });
    });
</script>

我实际上并没有使用过这个特定的库，但使用了语法非常相似的库。