• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5216
  • Last Modified:

fullcalendar jquery eventRender problem

Got a wierd display issue with fullcalendar for jquery. (see screenshots)

When I remove the eventRender function below, everything displays normal in IE. When I add the eventRender, it no longer displays properly in IE8, but continues to display correctly in other browsers (chrome, etc).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='../jquery/jquery-1.8.1.min.js'></script>
<script type='text/javascript' src='../jquery/jquery-ui-1.8.23.custom.min.js'></script>

<script type='text/javascript'>
$.noConflict();
			
jQuery(document).ready(function() {
	var d = new Date();
	var y = d.getFullYear();
	var m = d.getMonth();
	
	jQuery('#calendar').fullCalendar({
		draggable: false,
		weekends: false,
		showTime: false,
		events:
		[
			{
            	title  : 'event',
            	start  : '2012-09-25',
            	end    : '2012-09-25',
				description: 'sample description'
        	}
	
		],
		
          eventRender: function (event, element)
		  {
              	element.qtip
				({
                  content: event.description
				});
          }
		

	}); //jQuery('#calendar').fullCalendar({
}); //jQuery(document).ready(function() {

</script>
<style type='text/css'>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 12px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: 900px;
		margin: 0 auto;
	}
</style>
</head>
<body>
<div id='calendar'></div>

<script type='text/javascript' src='../jquery/jquery-1.8.1.min.js'></script>
<script type='text/javascript' src='../jquery/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='../jquery/jquery.qtip-1.0.0-rc3.js'></script>
<script type='text/javascript' src='../jquery/jquery.qtip-1.0.0-rc3.min.js'></script>

</body>
</html>

Open in new window







Search Tags: fullcalendar javascript jscript script qtip render eventRender jquery internet explorer chrome firefox
ie1.png
ie2.png
0
theRounder
Asked:
theRounder
  • 2
  • 2
1 Solution
 
Chris StanyonCommented:
Haven't tested your code, but my first observation is that you are loading your scripts more than once. You are loading jQuery and jQuery UI twice (once in HEAD and once at the bottom of BODY.  You are also loading qtip twice - one minified and one not. Make sure you only load each script once.

From your screenshots, it difficult to tell what the problem is. Do you have this setup anywhere for us to take a look at. It'll make debugging a lot easier.
0
 
theRounderAuthor Commented:
Hi;

I don't currently have it online, but I will probably be getting a live host this week.

The reason there was scripts being double loaded, is because I thought that might be the problem and was trying different things, using different files (min/reg), and trying them by loading at the top and bottom of the page.

I forgot to remove the duplicates. :)

It still displays the same in IE, no matter what I do. The only way it goes back to normal is by removing:

element.qtip
({
   content: event.description
});

Open in new window


So it has to be a problem with qtip, or fullcalendar(render), i just can't figure out which :(
0
 
theRounderAuthor Commented:
Solved this issue, by updating to a nightly qtip2 repository build. There must be some incompatibilities.

jquery-1.8.2.min.js
fullcalendar.js
jquery.qtip.js (Qtip2 nightly)

works flawless.
0
 
Chris StanyonCommented:
Cool. I was just about to comment that you need to make sure all your scripts are up to date. I know older version of fullCalendar won't work with jQuery >1.8.0, although I've tested the code using the same version of qtip as you and it worked fine across all browsers:

jQuery 1.8.1
qtip 1.0.0 rc3
fullCalendar 1.5.4
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now