FullCalendar not rendering in polymer project

Question

I am trying to create a calendar using FullCalendar in my polymer project. I followed the demo pages provided in the FullCalendar folder, however, everything renders except the calendar. Is there a special way to use Jquery plugins with polymer projects? Here is how I've tried using FullCalendar.

Imported the styles and scripts.

<link rel="stylesheet" href="fullcalendar/fullcalendar.css"/>
<link rel="stylesheet" href="fullcalendar/fullcalendar.print.css"/>

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="fullcalendar/lib/moment.min.js"></script>
<script src="fullcalendar/lib/jquery.min.js"></script>
<script src="fullcalendar/fullcalendar.min.js"></script>

html markup

<div id="calendar"></div>

Javascript to create the table

<script>
$(document).ready(function() {
  $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: '2016-01-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
            {
                title: 'All Day Event',
                start: '2016-01-01'
            },
            {
                title: 'Long Event',
                start: '2016-01-07',
                end: '2016-01-10'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2016-01-09T16:00:00'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2016-01-16T16:00:00'
            },
            {
                title: 'Conference',
                start: '2016-01-11',
                end: '2016-01-13'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T10:30:00',
                end: '2016-01-12T12:30:00'
            }
        ]
    });
});
</script>

Answer 1

When using 3rd party libraries the following steps have prove useful to me:

1) Create a wrapper element (eg fullcalendar-wrapper.html ) Inside it put all the script references to the external required scripts

2) Create a custom component that will have the calendar ( eg calendar-test.html )

• Import the fullcalendar-wrapper like any other dependency

• Use the 'ready' event of the component to initialise the calendar. So you should move the code under document.on('ready') to the 'ready' event of your polymer component

Right now you are setting up things when the page is ready, but the Polymer system may not be ready yet.

Answer 2

I may assume that the issue is in two included jQuery libraries (one from code.jquery.com (the 1st script tag) and another one from fullcalendar (the 3rd script tag). Please try to remove one of them.
And is there any error message in a Browser Developer Console?