Question

Need your help, trying to change this script:
https://github.com/MrHus/jquery-monthly-ical

To load external JSON data files. So not local in the javascript or with a PHP array with JSON but a real .json data file.

This is the current script:

    $(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."}    
                        ]
        });
    });

How can I use a .json file with the same data as: But the eventdates: line must be before it in the JavaScript because I dont have this in my JSON files.

    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."}    
                           ]

Currently no succes showing my JSON data from the file. This is the part of the JavaScript that handles the JSON. But not working, please help.

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

This is the json data example:

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

Answer 1

I think you are close with your commented out code.

It says that before every month is loaded it will use AJAX to get the event dates from the source you specify.

In the example, it tries to get events from the action.php script. However, if you want to use a hardcoded .json file for every month, you can simply replace action.php with test.json.

Your new code could be:

<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>

I haven’t actually used this particular library, but have used ones with a very similar syntax.