我开始使用javascript从jical获取数据，然后将其解析为列表中的显示，但是提供的代码不起作用，我没有显示任何数据。我对javascript一无所知，这让我不知道下一步该做什么。任何帮助这项工作将非常感激。
运行时基本上没有显示任何内容，我不确定从哪里开始尝试调试此方法我是否检查数据是否被调用？
我有三个文件可供我使用。
calendar.php
<?php
$url = 'https://p01-calendarws.icloud.com/ca/subscribe/1/n6x7Farxpt7m9S8bHg1TGArSj7J6kanm_2KEoJPL5YIAk3y70FpRo4GyWwO-6QfHSY5mXtHcRGVxYZUf7U3HPDOTG5x0qYnno1Zr_VuKH2M';
echo file_get_contents($url);
的index.php
<html>
<head>
<title>Magic Mirror</title>
<style type="text/css">
<?php include('css/main.css') ?>
</style>
<link rel="stylesheet" type="text/css" href="css/weather-icons.css">
<script type="text/javascript">
var gitHash = '<?php echo trim(`git rev-parse HEAD`) ?>';
</script>
<meta name="google" value="notranslate" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="top left"><div class="date small dimmed"></div><div class="time"></div><div class="calendar xxsmall"></div></div>
<div class="top right"><div class="windsun small dimmed"></div><div class="temp"></div><div class="forecast small dimmed"></div></div>
<div class="center-ver center-hor"><div class="dishwasher light">Vaatwasser is klaar!</div></div>
<div class="lower-third center-hor"><div class="compliment light"></div></div>
<div class="bottom center-hor"><div class="news medium"></div></div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.feedToJSON.js"></script>
<script src="js/ical_parser.js"></script>
<script src="js/moment-with-langs.min.js"></script>
<script src="js/config.js"></script>
<script src="js/rrule.js"></script>
<script src="js/main.js?nocache=<?php echo md5(microtime()) ?>"></script>
<script src="js/socket.io.min.js"></script>
</body>
</html>
ical_parser.js
/**
* Javascript ical Parser
* Proof of concept method of reading icalendar (.ics) files with javascript.
*
* @author: Carl Saggs
* @source: https://github.com/thybag/
* @version: 0.2
*/
function ical_parser(feed_url, callback){
//store of unproccesed data.
this.raw_data = null;
//Store of proccessed data.
this.events = [];
/**
* loadFile
* Using AJAX to load the requested .ics file, passing it to the callback when completed.
* @param url URL of .ics file
* @param callback Function to call on completion.
*/
this.loadFile = function(url, callback){
//Create request object
try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");} catch (e) { }
//Grab file
xmlhttp.onreadystatechange = function(){
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
//On success, run callback.
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
/**
* makeDate
* Convert the dateformat used by ICalendar in to one more suitable for javascript.
* @param String ical_date
* @return dt object, includes javascript Date + day name, hour/minutes/day/month/year etc.
*/
this.makeDate = function(ical_date){
//break date apart
var dtutc = {
year: ical_date.substr(0,4),
month: ical_date.substr(4,2),
day: ical_date.substr(6,2),
hour: ical_date.substr(9,2),
minute: ical_date.substr(11,2)
}
//Create JS date (months start at 0 in JS - don't ask)
var utcdatems = Date.UTC(dtutc.year, (dtutc.month-1), dtutc.day, dtutc.hour, dtutc.minute);
var dt = {};
dt.date = new Date(utcdatems);
dt.year = dt.date.getFullYear();
dt.month = ('0' + (dt.date.getMonth()+1)).slice(-2);
dt.day = ('0' + dt.date.getDate()).slice(-2);
dt.hour = ('0' + dt.date.getHours()).slice(-2);
dt.minute = ('0' + dt.date.getMinutes()).slice(-2);
//Get the full name of the given day
dt.dayname =["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][dt.date.getDay()];
dt.monthname = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ][dt.date.getMonth()] ;
return dt;
}
/**
* parseICAL
* Convert the ICAL format in to a number of javascript objects (Each representing a date)
*
* @param data Raw ICAL data
*/
this.parseICAL = function(data){
//Ensure cal is empty
this.events = [];
//Clean string and split the file so we can handle it (line by line)
cal_array = data.replace(new RegExp( "\\r", "g" ), "").replace(/\n /g,"").split("\n");
//Keep track of when we are activly parsing an event
var in_event = false;
//Use as a holder for the current event being proccessed.
var cur_event = null;
for(var i=0;i<cal_array.length;i++){
ln = cal_array[i];
//If we encounted a new Event, create a blank event object + set in event options.
if(!in_event && ln == 'BEGIN:VEVENT'){
in_event = true;
cur_event = {};
}
//If we encounter end event, complete the object and add it to our events array then clear it for reuse.
if(in_event && ln == 'END:VEVENT'){
in_event = false;
this.events.push(cur_event);
cur_event = null;
}
//If we are in an event
else if(in_event){
//var lntrim = ln.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
//var lnsplit = lntrim.split(':');
//type = lnsplit[0];
//val = lnsplit[1];
//Split the item based on the first ":"
idx = ln.indexOf(':');
//Apply trimming to values to reduce risks of badly formatted ical files.
type = ln.substr(0,idx).replace(/^\s\s*/, '').replace(/\s\s*$/, '');//Trim
val = ln.substr(idx+1).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
//If the type is a start date, proccess it and store details
if(type =='DTSTART'){
dt = this.makeDate(val);
val = dt.date;
//These are helpful for display
cur_event.start_time = dt.hour+':'+dt.minute;
cur_event.start_date = dt.day+'/'+dt.month+'/'+dt.year;
cur_event.day = dt.dayname;
cur_event.start_date_long = dt.day+'. '+dt.monthname+' '+dt.year ;
}
//If the type is an end date, do the same as above
else if(type =='DTEND'){
dt = this.makeDate(val);
val = dt.date;
//These are helpful for display
cur_event.end_time = dt.hour+':'+dt.minute;
cur_event.end_date = dt.day+'/'+dt.month+'/'+dt.year;
cur_event.day = dt.dayname;
}
//Convert timestamp
else if(type =='DTSTAMP'){
val = this.makeDate(val).date;
}
else {
val = val
.replace(/\\r\\n/g,'<br />')
.replace(/\\n/g,'<br />')
.replace(/\\,/g,',');
}
//Add the value to our event object.
cur_event[type] = val;
}
}
//Run this to finish proccessing our Events.
this.complete();
}
/**
* complete
* Sort all events in to a sensible order and run the original callback
*/
this.complete = function(){
//Sort the data so its in date order.
this.events.sort(function(a,b){
return a.DTSTART-b.DTSTART;
});
//Run callback method, if was defined. (return self)
if(typeof callback == 'function') callback(this);
}
/**
* getEvents
* return all events found in the ical file.
*
* @return list of events objects
*/
this.getEvents = function(){
return this.events;
}
/**
* getFutureEvents
* return all events sheduled to take place after the current date.
*
* @return list of events objects
*/
this.getFutureEvents = function(){
var future_events = [], current_date = new Date();
this.events.forEach(function(itm){
//If the event ends after the current time, add it to the array to return.
if(itm.DTEND > current_date) future_events.push(itm);
});
return future_events;
}
/**
* getPastEvents
* return all events sheduled to take place before the current date.
*
* @return list of events objects
*/
this.getPastEvents = function(){
var past_events = [], current_date = new Date();
this.events.forEach(function(itm){
//If the event ended before the current time, add it to the array to return.
if(itm.DTEND <= current_date) past_events.push(itm);
});
return past_events.reverse();
}
/**
* load
* load a new ICAL file.
*
* @param ical file url
*/
this.load = function(ical_file){
var tmp_this = this;
this.raw_data = null;
this.loadFile(ical_file, function(data){
//if the file loads, store the data and invoke the parser
tmp_this.raw_data = data;
tmp_this.parseICAL(data);
});
}
//Store this so we can use it in the callback from the load function.
var tmp_this = this;
//Store the feed url
this.feed_url = feed_url;
//Load the file
this.load(this.feed_url);
}
答案 0 :(得分：1)
仅供参考，我解决了这个Magic Mirror问题：http://michaelteeuw.nl/post/103473463837/fixing-the-magic-mirror-calendar