Hello guys,

Can anybody help with Jquery Plugins into VFpage.
I am trying to Insert a Custom Calender but its not Loading .
Let me know where i am going wrong.
There is a static resource called Calender
   and 3 .JS file and 3 .css files.
​
VF Page
<apex:page controller="Customcalendar"  action="{!pageLoad}" showHeader="false" sidebar="false" docType="html-5.0">
   
    <script href="{!$Resource.Calendar}" rel="stylesheet" />
    <apex:stylesheet value="{!URLFOR($Resource.Calendar, 'fullcalendar.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Calendar, 'fullcalendar.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Calendar, 'fullcalendar.print.css')}" />
    <script src="{!URLFOR($Resource.Calendar, 'jquery-1.4.4.js')}"/>
    <script src="{!URLFOR($Resource.Calendar, 'fullcalendar.min.js')}"/>
    <script src="{!URLFOR($Resource.Calendar, 'fullcalendar.js')}"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
   
  <script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            defaultDate: '2015-12-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
             events:
                [
                    //At run time, this APEX Repeat will reneder the array elements for the events array
                    
                    <apex:repeat value="{!events}" var="e">
                        {
                            title: "{!e.title}",
                            start: '{!e.startString}',
                            end: '{!e.endString}',
                            url: '{!e.url}',
                            allDay: {!e.allDay},
                            className: '{!e.className}'
                        },
                    </apex:repeat>
                ]
        });
        
    });
    
     var value='';
         function swap(date,datetime)
         {
        
          var e = document.getElementById("j_id0:myform:selectevent");
    var value= e.options[e.selectedIndex].value;
    
           if(value=='Event')
           {
           
            document.getElementById(datetime).style.display = 'block';
            document.getElementById(date).style.display = 'none';
            }
        else
        {
         document.getElementById(datetime).style.display = 'none';
         document.getElementById(date).style.display = 'block';
        }
        }
        
        function onsel()
        {
            alert('hi');
        }
</script>

 <style>
        #cal-options {float:Right; margin-left:200px ;margin-top:-100px}
        #cal-legend { float:right;}
        #cal-legend ul {margin:0;padding:0;list-style:none;margin-top: -150px;}
        #cal-legend ul li {margin:0;padding:5px;float:left;}
        #cal-legend ul li span {display:block; height:16px; width:16px; margin-right:4px; float:left; border-radius:4px;}
        #calendar {margin-top:-400px;margin-left:250px}
        #calendar a:hover {color:#fff !important;}
         
        .fc-event-inner {padding:3px;}
        .event-birthday {background:#235386;border-color:#235386;}
        .event-campaign {background:#f7b01a;border-color:#f7b01a;}
        .event-personal {background:#3ab6e6;border-color:#3ab6e6;}
        .buttong2y:active {border-top-color: #91af6a;background: #91af6a; color: #cc0000;}
    </style>

   <apex:outputPanel id="calPanel">
  <apex:form id="myform">
  </apex:form>
    </apex:outputPanel>
</apex:page>

Controller:
public class Customcalendar {

 public list<calEvent> events {get;set;} 
 String dtFormat = 'EEE, d MMM yyyy HH:mm:ss z';
     public String sobjectname{get;set;} 
    public Date startdate{get;set;} 
    public Date enddate{get;set;}
     public DateTime startdatetime{get;set;} 
    public DateTime enddatetime{get;set;}
  public class calEvent{
        public String title {get;set;}
        public Boolean allDay {get;set;}
        public String startString {get;set;}
        public String endString {get;set;}
        public String url {get;set;}
        public String className {get;set;}
    }
    
    public PageReference pageLoad() {
      events = new list<calEvent>();
//My Logic 
 

   return null;
    }

}