| Issue 891: | Full Callender not showing events in firefox and internet explorer | |
| 1 person starred this issue and may be notified of changes. | Back to list |
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
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
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
yes it solve my problem... thank you dude for help
May 8, 2011
(No comment was entered for this change.)
Status:
Done
Oct 14, 2011
Thanks, fixed my issue in PHP too. In php just use a date format of 'c'.
Jan 27, 2012
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
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!
|
|
| ► Sign in to add a comment |
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,}