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：line必须在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>

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

使用jQuery的JSON数据文件

1 个答案: