Hi,

I have a vf controller from where I need to insert records into the userterritory table. However, I am receiving a compilation error which is as follows:-

Hi,

I have a vf controller from where I need to insert records into the userterritory table. However, I am receiving a compilation error which is as follows:-

Been beating my head against a wall all day over this-I am using the jquery plug-in fullCalendar within my Salesforce VFPage and have been unable to call Apex variables from within the javascript that constructs the calendar.

When I use the typical notation of {!someVariable} then the calendar just flat-out doesn't render. After some searching I came across the strategy to utilize a separate VFpage and controller extension to create a JSON feed that passes the event data.

I tried this method, but still nothing-the calendar does render, but no event pops up within it. Even after I hardcoded a bunch of values for testing purposes I still had no luck. Below you will find the VFPage of my calendar page along with the VFPage and controller extension of the JSON feed pages-any help would be GREATLY appreciated, thanks guys.

Calendar VFPage: 

<apex:page standardController="Event" title="Appointments">
<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.fullcalendar, 'cupertino/theme.css')}" />
<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.fullcalendar, 'fullcalendar/fullcalendar.css')}" />
<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.fullcalendar, 'fullcalendar/fullcalendar.print.css')}" media="print" />
<script type="text/javascript" src="{!URLFOR($Resource.fullcalendar, 'jquery/jquery-1.5.2.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.fullcalendar, 'jquery/jquery-ui-1.8.11.custom.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.fullcalendar, 'fullcalendar/fullcalendar.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.fullcalendar, 'fullcalendar/gcal.js')}"></script>
<script src="/soap/ajax/23.0/connection.js" type="text/javascript"></script> 
<script src="/soap/ajax/23.0/apex.js" type="text/javascript"></script>
<script type="text/javascript">         
    $(document).ready( function(){
  
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();        
        
        var calendar = $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'agendaWeek',
            selectable: true,
            selectHelper: true,
            allDaySlot: true,
            aspectRatio: 1.75,
            minTime: 7,
            maxTime: 20,
            //weekMode: 'variable',
            editable: false,
            eventClick: function(event) {
                // opens events in a popup window
                window.open(event.url, 'gcalevent', 'width=700,height=600');
                return false;
            },  
            eventSources: [
                    {
                    // U.S. holidays
                    url: 'https://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
                    color: '#6B6B6B'
                    }
                ],  
            events: '/apex/queryToJSON?evId=a58U0000008MhIzIBL'
        });
    });
</script>
<apex:form >

<apex:pageBlock >
<div id="calendar" style="width: 820px; float: left;"></div>
<br style="clear: both;" />
<br />
<apex:commandButton action="{!Save}" value="Done" />
<apex:commandButton action="{!Cancel}" value="Cancel" />
<br />
<br />
</apex:pageBlock>
</apex:outputPanel>
</apex:form>
</apex:page>

JSON Feed VFPage: 

<apex:page controller="queryToJSON" 
contentType="application/x-JavaScript; charset=utf-8" showHeader="false" standardStylesheets="false" sidebar="false">[<apex:repeat value="{!allEvents}" var="ev" >{
"title":{!ev.name},
"start": {!ev.start},
"end": {!ev.stop},
"allDay": false,
"color": "#36C",
"url":{!ev.url}
}
</apex:repeat>]
</apex:page>

JSON Feed Controller:

public class queryToJSON {

        public custEvent__c thisEvent;
        public fullCalendarEvent allEvents{get;set;}

         public queryToJSON() { 
        if (ApexPages.currentPage().getParameters().get('evId')!=null){
                String evId = ApexPages.currentPage().getParameters().get('evId');
                thisEvent = [SELECT Id, Customer_Name__r.Name from custEvent__c where Id = :evId LIMIT 1];
                allEvents = new fullCalendarEvent(thisEvent);
        }
                
     }
     
     public class fullCalendarEvent {
        
        public String name{get;set;}
        public String url{get;set;}
        public String start{get;set;}
        public String stop{get;set;}
        
        public fullCalendarEvent(custEvent__c thisEvent) {
                name = JSON.serialize(thisEvent.Customer_Name__r.Name);
                url = JSON.serialize('/'+thisEvent.Id);
                start = JSON.serialize(datetime.now());
                stop = JSON.serialize(datetime.now().addDays(2));
        }
        
     }
    
}

Hi - 

I found this really cool gantt chart, but for some reason I'm having problem embedding it into my Visual Force page. The link of the gantt chart is the following:

http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml

I was wondering if anyone can help me figure out what's wrong with the below code? I'm not really getting any error message but the inspect element has "Uncaught TypeError: Cannot call method 'addEventListener' of null". 

<apex:page >

    <apex:stylesheet value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.css')}"/>
    <script type="text/javascript" language="JavaScript" src="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxcommon.js')}"></script>
    <script type="text/javascript" language="JavaScript" src="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.js')}"></script>


    <head>


    <script language="JavaScript" type="text/javascript">
        function createChartControl(htmlDiv1)
        {
            //project 1
            var project1 = new GanttProjectInfo(1, "Applet 11redesign", new Date(2010, 5, 11));
    
            var parentTask1 = new GanttTaskInfo(1, "Old code review", new Date(2010, 5, 11), 208, 50, "");
            parentTask1.addChildTask(new GanttTaskInfo(2, "Convert to J#", new Date(2010, 5, 11), 100, 40, ""));
            parentTask1.addChildTask(new GanttTaskInfo(13, "Add new functions", new Date(2010, 5, 12), 80, 90, ""));
    
            var parentTask2 = new GanttTaskInfo(3, "Hosted Control", new Date(2010, 6, 7), 190, 80, "1");
            var parentTask5 = new GanttTaskInfo(5, "J# interfaces", new Date(2010, 6, 14), 60, 70, "6");
            var parentTask123 = new GanttTaskInfo(123, "use GUIDs", new Date(2010, 6, 14), 60, 70, "");
            parentTask5.addChildTask(parentTask123);
            parentTask2.addChildTask(parentTask5);
            parentTask2.addChildTask(new GanttTaskInfo(6, "Task D", new Date(2010, 6, 10), 30, 80, "14"));
    
            var parentTask4 = new GanttTaskInfo(7, "Unit testing", new Date(2010, 6, 15), 118, 80, "6");
            var parentTask8 = new GanttTaskInfo(8, "core (com)", new Date(2010, 6, 15), 100, 10, "");
            parentTask8.addChildTask(new GanttTaskInfo(55555, "validate uids", new Date(2010, 6, 20), 60, 10, ""));
            parentTask4.addChildTask(parentTask8);
            parentTask4.addChildTask(new GanttTaskInfo(9, "Stress test", new Date(2010, 6, 15), 80, 50, ""));
            parentTask4.addChildTask(new GanttTaskInfo(10, "User interfaces", new Date(2010, 6, 16), 80, 10, ""));
            parentTask2.addChildTask(parentTask4);
    
            parentTask2.addChildTask(new GanttTaskInfo(11, "Testing, QA", new Date(2010, 6, 21), 60, 100, "6"));
            parentTask2.addChildTask(new GanttTaskInfo(12, "Task B (Jim)", new Date(2010, 6, 8), 110, 1, "14"));
            parentTask2.addChildTask(new GanttTaskInfo(14, "Task A", new Date(2010, 6, 7), 8, 10, ""));
            parentTask2.addChildTask(new GanttTaskInfo(15, "Task C", new Date(2010, 6, 9), 110, 90, "14"));
    
            project1.addTask(parentTask1);
            project1.addTask(parentTask2);
    
            //project 2
            var project2 = new GanttProjectInfo(2, "Web Design", new Date(2010, 5, 17));
    
            var parentTask22 = new GanttTaskInfo(62, "Fill HTML pages", new Date(2010, 5, 17), 157, 50, "");
            parentTask22.addChildTask(new GanttTaskInfo(63, "Cut images", new Date(2010, 5, 22), 78, 40, ""));
            parentTask22.addChildTask(new GanttTaskInfo(64, "Manage CSS", null, 90, 90, ""));
            project2.addTask(parentTask22);
    
            var parentTask70 = new GanttTaskInfo(70, "PHP coding", new Date(2010, 5, 18), 120, 10, "");
            parentTask70.addChildTask(new GanttTaskInfo(71, "Purchase D control", new Date(2010, 5, 18), 50, 0, ""));
            project2.addTask(parentTask70);
    
            var ganttChartControl = new GanttChart();
            ganttChartControl.setImagePath("{!URLFOR($Resource.Timeline, 'codebase/imgs/')}");
            
            ganttChartControl.setEditable(true);
            
            ganttChartControl.addProject(project1);
            
            ganttChartControl.create(htmlDiv1);
        }
    </script>
    
    <style>
        body {font-size:12px}
        .{font-family:arial;font-size:12px}
        h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
        xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
        .hdr{
            background-color:lightgrey;
            margin-bottom:10px;
            padding-left:10px;
        }
    </style>

    </head>

    <body onload="createChartControl('GanttDiv');">
        <div style="width:950px;height:620px;position:absolute;" id="GanttDiv"></div>
    </body>



</apex:page>