fullcalendar jquery eventRender problem

Posted on 2012-09-21
Last Modified: 2013-01-03
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" "">
<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'>
jQuery(document).ready(function() {
	var d = new Date();
	var y = d.getFullYear();
	var m = d.getMonth();
		draggable: false,
		weekends: false,
		showTime: false,
            	title  : 'event',
            	start  : '2012-09-25',
            	end    : '2012-09-25',
				description: 'sample description'
          eventRender: function (event, element)
                  content: event.description

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

<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;
<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>


Open in new window

Search Tags: fullcalendar javascript jscript script qtip render eventRender jquery internet explorer chrome firefox
Question by:theRounder
    LVL 42

    Expert Comment

    by:Chris Stanyon
    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.

    Author Comment


    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:

       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 :(

    Author Comment

    Solved this issue, by updating to a nightly qtip2 repository build. There must be some incompatibilities.

    jquery.qtip.js (Qtip2 nightly)

    works flawless.
    LVL 42

    Accepted Solution

    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

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now