| Issue 393: | Problem with IE not displaying info error in js code (fullcalendar.js and min) | |
| 1 person starred this issue and may be notified of changes. | Back to list |
i have fullcalendar working on my site but as you know IE is VERY picky. im having a problem with the JS code in fullcalendar.js(and min too) i did get it to display the calendar by taking out the last , but its not displaying the events now due to code error heres the errors, Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Sat, 13 Mar 2010 14:57:51 UTC Message: 'undefined' is null or not an object Line: 868 Char: 2 Code: 0 URI: http://familiesinchrist.org/js/fullcalendar.js and Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Sat, 13 Mar 2010 14:58:24 UTC Message: 'undefined' is null or not an object Line: 17 Char: 9214 Code: 0 URI: http://familiesinchrist.org/js/fullcalendar.min.js please understand Google chrome(best choice IMO for a browser) there is no problem displaying the events. ONLY IE Ill try and work on this problem but the code looks fine, maybe a IE if then statement may work or a if null undefined handle hope this gets worked out OH heres the site and what i did to it, as i have popups(toolbars) working and data is pulled from mysql via json. http://familiesinchrist.org/calendar.php oh one other thing im going to work on a way to display the data for current month but i believe a rewrite of your code will be needed to use the advancement and deadvancemnt buttons for each month as it prints ALL the info the events has to display the calendar it be better to pull each months data from the database as needed, just a suggestion. not so much event code at one time being parsed, only info needed for display at the time of need. i may make another post for this.
Mar 15, 2010
Project Member
#1
adamrs...@gmail.com
Status:
Done
Mar 15, 2010
ie might be choking on your curly quote characters in your event titles. this thread might help you escape those characters: https://code.google.com/p/fullcalendar/issues/detail?id=107
Mar 16, 2010
please see code below,
How would i fix the data can i do this a different way?
** i could not get json feed to work right so i made php fill in the data.
as you can see im working on adding other routines too sorry for the mess
im not sure how to incorp what you have said as i did it diffrently
thanks for the replies so far
heres the code i have to display calendar
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev, today',
center: 'title',
right: 'next'
},
// US Holidays
//events:
$.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/admin@familiesinchrist.
org/public/basic'),
//America/New_York
timeFormat: "h(:mm) TT",
//timeFormat: "g:ix-{g:ix}",
//2009-11-05T13:15:30Z
//output is 2010-01-08 16:12:12
//renderEvent: function(event, element) {
// element.attr('title', event.description);
//},
events: [
<?php
$query_EventStr = "SELECT UNIX_TIMESTAMP(event_start) as
newdate,id,event_title,event_body,url,event_start,event_stop FROM events2";
$EventStr = mysql_query($query_EventStr) or
die(mysql_error());
$row_EventStr = mysql_fetch_assoc($EventStr);
$events = "";
do {
$events .= "\n{";
$events .= "id:'".$row_EventStr['id']."',";
$events .=
"title:'".$row_EventStr['event_title']."',";
$events .= "start:'".$row_EventStr['event_start']."',
";
$events .= "end:'".$row_EventStr['event_stop']."', ";
$events .= "allDay: false,";
$events .= "url:'".$row_EventStr['url']."',";
$date_fix=date("F j, Y, g:i
a",strtotime($row_EventStr['event_start']));
$events .= "tooltip:'<FONT
COLOR=#000><strong>".$row_EventStr['event_title']."</strong></font><br/><FONT SIZE=-2
COLOR=#008000>Date: ".$date_fix."</FONT><hr style=\"width:100%;text-
align:left;margin-
left:0\">".str_replace("\r\n","<br>",$row_EventStr['event_body'])."'";
$events.= "},\n";
} while ($row_EventStr = mysql_fetch_assoc($EventStr));
mysql_free_result($EventStr);
$EventStr = null;
$events = trim($events, ",");
echo $events;
?>
],
/* works really well offset on tip*/
eventMouseover: function(e,m) {
//console.log(e);
var tPosX = m.pageX + 5 ;
var tPosY = m.pageY - 50 ;
$('#tooltip').css({top: tPosY, left: tPosX, display:
'block'});
var tt = '';
tt += e.tooltip+'<br />';
$('#tooltip').html(tt);
$('#tooltip').fadeIn("slow");
},
eventMouseout: function() {
$('#tooltip').css({display: 'none'});
},
eventClick: function(calEvent, jsEvent, view) {
//alert('Event: ' + calEvent.title);
//alert('Coordinates: ' + jsEvent.pageX + ',' +
jsEvent.pageY);
//alert('View: ' + view.name);
//alert('EVENT CLICK ' + calEvent.tooltip);
//bgiframe: true,
//autoOpen: true,//false,
//height: 320,
//modal: true,
// change the border color just for fun
//$(this).css('border-color', 'red');
$(this).addClass('thickbox');
if (calEvent.url) {
window.open(calEvent.url,
calEvent.title,'class=thickbox,width=525,height=490,toolbar=no,location=no,directorie
s=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=no');
return false;
}
},
/*
jQuery("#dialog").dialog({
bgiframe: true, autoOpen: false, height: 100, modal:
true
});
*/
/* works
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'thickbox',
'width=525,height=490,toolbar=no,location=no,directories=no,status=no,menubar=no,scro
llbars=no,copyhistory=no,resizable=no');
return false;
},
*/
loading: function(bool) {
if (bool) {
$('#loading').show();
}else{
$('#loading').hide();
}
}
});
});
</script>
Mar 16, 2010
it looks like it correctly did all the code. How can i make this a json and make it so i can pass the current month info so it does not load the complete years data only whats shown, as im useing only monthly views this will fix my problem for issue number 394 and this one at the same time then if we convert it to json please. ask if you need anything else
Mar 16, 2010
i took mysql and parsed JUST one dates info and i dont see any problems with the feed at all and IE is STILL having a problem with it http://familiesinchrist.org/calendar_test.php how is this wrong for data events: [ {id:'104',title:'Book of the Month Club',start:'2010-03-16 19:00:00', end:'2010-03-16 20:00:00', allDay: false,url:'',tooltip:'<FONT COLOR=#000><strong>Book of the Month Club</strong></font><br/><FONT SIZE=-2 COLOR=#008000>Date: March 16, 2010, 7:00 pm</FONT><hr style="width:100%;text-align:left;margin-left:0">Bible Study'}, ],
Mar 16, 2010
theres no way theres a problem now Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Tue, 16 Mar 2010 12:01:31 UTC Message: Expected identifier, string or number Line: 67 Char: 122 Code: 0 URI: http://familiesinchrist.org/cal_test.html theres one event stripped way down and its still having issues http://familiesinchrist.org/cal_test.html events: [{id:'1',title:'Book of the Month Club',start:'2010-03-16 19:00:00', end:'2010-03-16 20:00:00', allDay: false,},], i hate that i dont know jquery very well yet.. and this is driving me to cry to fix this stupid problem. and did i ever say i hate ALL ms products and IE is at the top of the list, i can understand why people have issues and go postal, because ms cant fix there stuff. every browser BUT IE shows the dang calendar just fine..but NOOOOO IE has to check stuff and be stupid and not display it..GRRRRRRR frustrating ok sorry had to rant a sec. SO how do i fix all this please im stuck and have no clue and im frustrated at all this too. please help me
Mar 16, 2010
Pull off the last ",":
events: [{id:'1',title:'Book of the Month Club',start:'2010-03-16 19:00:00',
end:'2010-03-16 20:00:00', allDay: false,},]
Mar 16, 2010
http://familiesinchrist.org/cal_test.html made a manual page to test if it works took off trailing , STILL NO JOY!!! thanks for reply
Mar 16, 2010
HA!!! you are right av...@pancer.us it was inside the on the allday:false, now works go figure lets see if i can get it to display the rest of the code correctly now, where it maybe breaking else ware but i did notice it has a problem with the background color on IE, grrr IE is tuff t accommodate. i do want to make this a json so i can use the next/prev months buttons with only data displayed at the moment.. think i should open a new question or that or continue here anyone?
Mar 16, 2010
well ill be... that little , did the trick works in ie and google no errors now
save the dum ie thinking it needs to have a white background for the event..
ill dive in and try to see how the heck to fix that... goes to look for solution
still need to know how to do json tho.
heres the working code in case anyone would like to see it
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev, today',
center: 'title',
right: 'next'
},
// US Holidays
//events:
$.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/admin@familiesinchrist.
org/public/basic'),
//America/New_York
timeFormat: "h(:mm) TT",
//timeFormat: "g:ix-{g:ix}",
//2009-11-05T13:15:30Z
//output is 2010-01-08 16:12:12
//renderEvent: function(event, element) {
// element.attr('title', event.description);
//},
events: [
<?php
$today = date("c");
$query_EventStr = "SELECT UNIX_TIMESTAMP(event_start) as
newdate,id,event_title,event_body,url,event_start,event_stop FROM events2";
//$query_EventStr = "SELECT * FROM events2 where event_start
>= '$today' order by event_start asc LIMIT 0, 1";
$EventStr = mysql_query($query_EventStr) or
die(mysql_error());
$row_EventStr = mysql_fetch_assoc($EventStr);
$events = "";
do {
$events .= "{";
$events .= "id:'".$row_EventStr['id']."',";
$events .=
"title:'".$row_EventStr['event_title']."',";
$events .= "start:'".$row_EventStr['event_start']."',
";
$events .= "end:'".$row_EventStr['event_stop']."', ";
$events .= "allDay: false,";
//$events .= "url:'".$row_EventStr['url']."',";
$date_fix=date("F j, Y, g:i
a",strtotime($row_EventStr['event_start']));
$events .= "tooltip:'<FONT
COLOR=#000><strong>".$row_EventStr['event_title']."</strong></font><br/><FONT SIZE=-2
COLOR=#008000>Date: ".$date_fix."</FONT><hr style=\"width:100%;text-
align:left;margin-
left:0\">".str_replace("\r\n","<br>",$row_EventStr['event_body'])."'";
$events.= "},";
} while ($row_EventStr = mysql_fetch_assoc($EventStr));
mysql_free_result($EventStr);
$EventStr = null;
$events = trim($events, ",");
//echo json_encode($events);
echo $events;
?>
],
/* works really well offset on tip*/
eventMouseover: function(e,m) {
//console.log(e);
var tPosX = m.pageX + 5 ;
var tPosY = m.pageY - 50 ;
$('#tooltip').css({top: tPosY, left: tPosX, display:
'block'});
var tt = '';
tt += e.tooltip+'<br />';
$('#tooltip').html(tt);
$('#tooltip').fadeIn("slow");
},
eventMouseout: function() {
$('#tooltip').css({display: 'none'});
},
eventClick: function(calEvent, jsEvent, view) {
//alert('Event: ' + calEvent.title);
//alert('Coordinates: ' + jsEvent.pageX + ',' +
jsEvent.pageY);
//alert('View: ' + view.name);
//alert('EVENT CLICK ' + calEvent.tooltip);
//bgiframe: true,
//autoOpen: true,//false,
//height: 320,
//modal: true,
// change the border color just for fun
//$(this).css('border-color', 'red');
$(this).addClass('thickbox');
if (calEvent.url) {
window.open(calEvent.url,
calEvent.title,'class=thickbox,width=525,height=490,toolbar=no,location=no,directorie
s=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=no');
return false;
}
},
/*
jQuery("#dialog").dialog({
bgiframe: true, autoOpen: false, height: 100, modal:
true
});
*/
/* works
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'thickbox',
'width=525,height=490,toolbar=no,location=no,directories=no,status=no,menubar=no,scro
llbars=no,copyhistory=no,resizable=no');
return false;
},
*/
loading: function(bool) {
if (bool) {
$('#loading').show();
}else{
$('#loading').hide();
}
}
});
});
</script>
Mar 30, 2010
to change the background color for an event, look at the following documentation: http://arshaw.com/fullcalendar/docs/event_rendering/Colors/
Jun 30, 2010
I had the same problem, feeding the calendar with php, and I solved it by adding and empty event {} after the last event I added and it worked...
|
|
| ► Sign in to add a comment |