function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Kishore B T 21Kishore B T 21 

Can anybody help with Jquery Plugins into VFpage.

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

}
pconpcon
If you look at your browsers developer console, do you see that all of the javascript and CSS are being downloaded correctly?  Additionally I do not see any elements in your Visualforce page / HTML page that have an id of calendar and so I don't know what your jQuery is binding to.
Kishore B T 21Kishore B T 21
Pcon,
All my css and JQuery are in static resource but its not loading .. I am getting a 404 server not loading error. Please guide me on this.
Browser console Error.
User-added image

Static Resource: 
User-added image
Files Under this Static Resource
User-added image


Thanks in Advance
 
pconpcon
When you created the zip file and uploaded it as a static resource are all of those files in the base of the zip?  My guess is your zip file contains a folder called "Fullcalendar" at it's base and these are under that folder.  You can do one of two things.  You can either recreate the zip file with all of these files in the base of the zip, or you can update tall of your Visualforce references to be prefaced with Fullcalendar like below:
 
<apex:stylesheet value="{!URLFOR($Resource.Calendar, 'Fullcalendar/fullcalendar.css')}"/>

(As a side note, your very first script tag makes no sense and should be removed)