Issue 891: Full Callender not showing events in firefox and internet explorer
Status:  Done
Owner: ----
Closed:  May 2011
Reported by sagarne...@gmail.com, Apr 5, 2011
Hi All,

I m facing one strange problem i m creating event manager and it is working 100% efficiantly in google chrome but my application showing blank calender in firefox and IE 8 will anyone will help me? 

i m using php for render events to full calender following is my code

Please Help me guys

$(document).ready(function() {
	
	$('#calendar').fullCalendar({
	header: {
	left: 'prev,next today',
	center: 'title',
	right: 'month,agendaWeek,agendaDay'
	},
        editable: true,
			
events: [
<?php
    $query_EventStr = "SELECT id, title,`start`, `end`, recurring, priority, Discription FROM eventcalender";
       $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['title']."',";
           $events .= "start:'".$row_EventStr['start']."',";
           $events .= "end:'".$row_EventStr['end']."', ";
           $events .= "allDay: false,";
           //$events .= "url:'".$row_EventStr['url']."',";
           $events.= "},";
           } while ($row_EventStr = mysql_fetch_assoc($EventStr)); 
	  
           mysql_free_result($EventStr);
                $EventStr = null;
                $events = trim($events, ",");
                //echo json_encode($events);
                echo $events;
                        ?>
],
eventClick: function(calEvent, jsEvent, view) {window.location = "update.php?id=" + calEvent.id}
					
	});
			
});		

Apr 5, 2011
#1 sagarne...@gmail.com
Hi,

above script generate this output

{id:'10244',title:'Activity Tracker Meeting 2',start:'2011-04-08 12:00 pm',end:'2011-04-08 04:00 pm', allDay: false,},{id:'10243',title:'Activity Tracker Meeting',start:'2011-04-06 04:30 pm',end:'2011-04-06 09:30 pm', allDay: false,},{id:'10245',title:'firefox test',start:'2011-04-15 12:00 am',end:'2011-04-15 04:00 pm', allDay: false,}
Apr 5, 2011
#2 sagarne...@gmail.com
Hi all found actual problem in script... when i m using am/pm with time it is not showing data into firefox and internet explorer... 

will anyone will suggest solution on it? 
Apr 15, 2011
#4 p.stud...@gmail.com
Try not to return am/pm.
Try using 24 hours instead. possibly because fullCalendar formats pm to p  and am to a by default and clashed with a browser.

"
,start:'2011-04-08T19:34',end:'2011-04-08T23:59', etc
"

Try to get a output like that above. works fine for me across major browsers. You can format your date then in FullCalendar instead. using dateFormat: hh:mm or something
Apr 15, 2011
#5 sagarne...@gmail.com
yes it solve my problem... thank you dude for help
May 8, 2011
Project Member #6 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Done
Oct 14, 2011
#7 jon...@gmail.com
Thanks, fixed my issue in PHP too.  In php just use a date format of 'c'.
Jan 27, 2012
#8 rkj...@gmail.com
Thanks, I was also having this problem in Firefox and Safari. Chrome was working fine. Im on rails so I just used  starttime.strftime('%Y-%m-%dT%R')
Mar 21, 2012
#9 prashant...@gmail.com
Hi ,I am using Version 1.5.3 for Full Calender as ,
@model EYGM.Client.WebApplication.ViewModels.CalendarViewModelHome
@{
    ViewBag.Title = "Home Page";
    bool isUserAuthenticated = (Model != null) && (Model.Context.IsUserAuthenticated);
    
    Layout = "~/Views/Calendar/_CalenderLayout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}
		
	#wrap {
		width: 1100px;
		margin: 0 auto;
		}
		
	#external-events {
		float: left;
		width: 150px;
		padding: 0 10px;
		border: 1px solid #ccc;
		background: #eee;
		text-align: left;
		}
		
	#external-events h4 {
		font-size: 16px;
		margin-top: 0;
		padding-top: 1em;
		}
		
	.external-event { /* try to mimick the look of a real event */
		margin: 10px 0;
		padding: 2px 4px;
		background: #3366CC;
		color: #fff;
		font-size: .85em;
		cursor: pointer;
		}
		
	#external-events p {
		margin: 1.5em 0;
		font-size: 11px;
		color: #666;
		}
		
	#external-events p input {
		margin: 0;
		vertical-align: middle;
		}

	#calendar {
		float: left;
		width: 500px;
		}
			#loading {
		position: absolute;
		top: 5px;
		right: 5px;
		}

</style>

<link rel="stylesheet" type="text/css"  href="@Url.Content("~/Content/fullcalendar.css")" />
<link rel="stylesheet" type="text/css"  href="@Url.Content("~/Content/fullcalendar.print.css")" media='print' />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.17.custom.min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/gcal.js")" type="text/javascript"></script>


</head>
<body>
<div id='wrap'>
<div style="width:100%;">
    <table style="width:100%">
        <tr>
            <td >
                <p>The Calendar keeps track of your time,per location,activity and project. Remember to check-in and enter your time regularly.</p>
                <p>Click Enter Time or click on the monthly calendar to enter time for your selected dates.</p>
                <p><i>Tip: For quick time entry,click and drag on the calendar to select a date range.</i></p>
               

            </td>
        </tr>
    </table>

 

</div>
<div id="external-events">
<h4>Draggable Events</h4>
<div class='external-event'>My Event 1</div>
<div class='external-event'>My Event 2</div>
<div class='external-event'>My Event 3</div>
<div class='external-event'>My Event 4</div>
<div class='external-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' /> <label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='loading' style='display:none'>loading...</div>
<div id="calendar"></div>

<div style='clear:both'></div>
</div>
</body>
</html>



<script type='text/javascript'>




    /* initialize the external events
    -----------------------------------------------------------------*/

    $('#external-events div.external-event').each(function () {

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });


    /* initialize the calendar
    -----------------------------------------------------------------*/

    $('#calendar').fullCalendar({
      // US Holidays
			events: '1',
			
			eventClick: function(event) {
				// opens events in a popup window
				window.open(event.url, 'gcalevent', 'width=700,height=600');
				return false;
			},
			
			loading: function(bool) {
				if (bool) {
					$('#loading').show();
				}else{
					$('#loading').hide();
				}
			},
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {

            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = '@Url.Content("~/Scripts/jquery-1.7.1.min.js")';
            script.src = '@Url.Content("~/Scripts/jquery-ui-1.8.17.custom.min.js")';
            script.src = '@Url.Content("~/Scripts/fullcalendar.js")';
            $("#calendar").append(script);
            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = dayDelta;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();

            }
            eventClick: function (calEvent, jsEvent, view) {

                alert('Event: ' + calEvent.title);
                alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                alert('View: ' + view.name);

                // change the border color just for fun
                $(this).css('border-color', 'red');

            }

        }
    });

		

</script>

It gets renderr in IE but its not rendering in Mozilla 5.1 Please help.
Thank You!