Hi,
I'm trying to use FullCalendar to display a calendar in a VP page, but when I click "Preview", nothing renders. There are no errors when I compile, so I can't tell what the problem is. Below is my code:

VP Page

<apex:page controller="Calendar" action="{!pageLoad}" standardStylesheets="false">
    
    <link href="{!$Resource.fullCalendarCSS}" rel="stylesheet" />
    <link href="{!$Resource.fullCalendarPrintCSS}" rel="stylesheet" media="print" />
    
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="{!URLFOR($Resource.FullCalendar,'lib/jquery.min.js')}"></script>
    <script src="{!URLFOR($Resource.FullCalendar,'lib/jquery-ui.custom.min.js')}"></script>
    <script src="{!URLFOR($Resource.FullCalendar,'fullcalendar/fullcalendar.min.js')}"></script>
    <script src="{!URLFOR($Resource.FullCalendar,'lib/moment.min.js')}"></script>
    
    <script type="text/javascript">
        var j$ = jQuery.noConflict(true);
        j$(function() {
        	j$('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month.agendaWeek.agendaDay'
                },
                editable: false,
                events:
                [
                    <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>
                    	{
                    	}
                ]
			});
		});
	</script>

    <style>
		#cal-options {float:left;}
		#calendar {margin-top:20px;}
		#calendar a:hover {color:#fff !important;}
		 
		.fc-event-inner {padding:3px;}
		.course {background:#56458c;border-color:#56458c;}
	</style>

	<apex:sectionHeader title="Cursos Calendar"/>
	<div id='calendar'></div>

</apex:page>

Controller:

public class Calendar {
    public List<CalEvent> events {get; set;}
    private static String dtFormat = 'EEE, d MMM yyyy HH:mm:ss z';
    
    public Calendar() {
    }
    
    public PageReference pageLoad() {
        events = new List<CalEvent>();
        
        for (Curso__c cur: [SELECT Name,
                           		   Fecha_de_Inicio__c,
                           		   Fecha_de_Finalizacion__c,
                           		   Frecuencia__c,
                           		   D_as__c
                            FROM Curso__c
                           ]) {
            List<Date> dates = CalculateDates.getDates(cur.Fecha_de_Inicio__c,
                                                       cur.Fecha_de_Finalizacion__c,
                                                       cur.D_as__c,
                                                       cur.Frecuencia__c
                                                      );
            for (Date dat: dates) {
            	CalEvent course = new CalEvent();
                course.title = cur.Name;
                course.allDay = true;
                DateTime d = (DateTime) dat;
                course.startString = d.format(dtFormat);
                course.endString = null;
                course.url = '/' + cur.Id;
                course.className = 'course';
                events.add(course);
            }
        }
        return null;
    }
    
    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;}
    }

}

If you could let me know what I can do to fix this, I would be super grateful! Thank you

I have created a calendar view in Salesforce using Full Calendar V2 in a Visualforce page. I have different types of events (standard and custom objects). All one day event works fine, but when I have multi days event it displays one day short on the calendar. I have made a lot of research without finding a solution that works for me. I do not need to works with time only date.  The code I use was done before the addition of Momentjs. I suspect this is to do about the way the date is calculated but could not figure it how. Any help will be greatly appreciate.

Please see below my controller (to limit the lenght of the code I have put only one type of event):

public class LeaveCalendar_Controller {
public list<calEvent> events {get;set;}
 String dtFormat = 'd MMM yyyy';
 public PageReference pageLoad() {
    events = new list<calEvent>();
//Get Other Leave

        for(Leave__c leav : [select Id, Name__c, Start_Date__c, End_Date__c, Leave_Type__c, Name__r.Name, Description__c, No_of_Days__c from Leave__c where Leave_Type__c = 'Other Leave'and Start_Date__c > LAST_MONTH]){
            DateTime startDT = leav.Start_Date__c;
            DateTime endDT = leav.End_Date__c;
            calEvent leavEvent = new calEvent();
            leavEvent.title = leav.Name__r.Name +'-'+ leav.Leave_Type__c ;
            leavEvent.allDay = true;
            leavEvent.startString = startDT.format(dtformat);
            leavEvent.endString = endDT.format(dtformat);
            leavEvent.url = '/' + leav.Id;
            leavEvent.className = 'OL'; 
            leavEvent.Description = leav.Description__c;
            leavEvent.duration = leav.No_of_Days__c;
            events.add(leavEvent);    }
    }
          return null;
}
//Class to hold calendar event data

  public class calEvent{
        public String title {get;set;}
        public String type {get;set;}
        public Boolean allDay {get;set;}
        public String startString {get;private set;}
        public String endString {get;private set;}
        public String url {get;set;}
        public String className {get;set;}
        public String Description {get;set;}
        public Double duration {get;set;}
                    }
}

And my apex page:

<apex:page controller="CalendarExample_Controller" action="{!pageLoad}">
    <link href="{!$Resource.fullCalendarCSS}" rel="stylesheet" />
    <link href="{!$Resource.fullCalendarPrintCSS}" rel="stylesheet" media="print" />
    <script src="{!$Resource.jqueryminjs}"></script>
    <script src="{!$Resource.jqueryuicustomminjs}"></script>
    <script src="{!$Resource.momentminjs}"></script>
    <script src="{!$Resource.fullCalendarMinJS}"></script>
<script>
    $(document).ready(function()
          {   
                  $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: false,
            events:
            [
                <apex:repeat value="{!events}" var="e">
                    {
                        title: "{!e.title}",
                        type: "{!e.type}",
                        start: '{!e.startString}',
                        end: '{!e.endString}',
                        url: '{!e.url}',
                        allDay: {!e.allDay},
                        className: '{!e.className}'
                    },
                </apex:repeat>
            ]
        });

    });                           
</script>
    <style>
    #cal-options {float:left;}
    #cal-legend { float:right;}
    #cal-legend ul {margin:0;padding:0;list-style:none;}
    #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:16px;}
    #calendar a:hover {color:#fff !important;}
    .fc-event-inner {padding:3px;}
    .OL {background:#C10FD1;border-color:#C10FD1;}

</style>
   <apex:outputText style="font-size: large; font-weight: bold" value="Leave Calendar" />
      <apex:outputPanel id="calPanel">
    <apex:form >
        <div id="cal-legend">
            <ul>
                <li><span class="OL"></span>Other Leave</li>
            </ul>
            <div style="clear:both;"><!--fix floats--></div>
        </div>
        <div style="clear:both;"><!--fix floats--></div>
        <div id="calendar"></div>
   </apex:form>
</apex:outputPanel>         
      </apex:page>

Thank you in advance.


 

Hi,
I'm trying to use FullCalendar to display a calendar in a VP page, but when I click "Preview", nothing renders. There are no errors when I compile, so I can't tell what the problem is. Below is my code:

VP Page

<apex:page controller="Calendar" action="{!pageLoad}" standardStylesheets="false">
    
    <link href="{!$Resource.fullCalendarCSS}" rel="stylesheet" />
    <link href="{!$Resource.fullCalendarPrintCSS}" rel="stylesheet" media="print" />
    
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="{!URLFOR($Resource.FullCalendar,'lib/jquery.min.js')}"></script>
    <script src="{!URLFOR($Resource.FullCalendar,'lib/jquery-ui.custom.min.js')}"></script>
    <script src="{!URLFOR($Resource.FullCalendar,'fullcalendar/fullcalendar.min.js')}"></script>
    <script src="{!URLFOR($Resource.FullCalendar,'lib/moment.min.js')}"></script>
    
    <script type="text/javascript">
        var j$ = jQuery.noConflict(true);
        j$(function() {
        	j$('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month.agendaWeek.agendaDay'
                },
                editable: false,
                events:
                [
                    <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>
                    	{
                    	}
                ]
			});
		});
	</script>

    <style>
		#cal-options {float:left;}
		#calendar {margin-top:20px;}
		#calendar a:hover {color:#fff !important;}
		 
		.fc-event-inner {padding:3px;}
		.course {background:#56458c;border-color:#56458c;}
	</style>

	<apex:sectionHeader title="Cursos Calendar"/>
	<div id='calendar'></div>

</apex:page>

Controller:

public class Calendar {
    public List<CalEvent> events {get; set;}
    private static String dtFormat = 'EEE, d MMM yyyy HH:mm:ss z';
    
    public Calendar() {
    }
    
    public PageReference pageLoad() {
        events = new List<CalEvent>();
        
        for (Curso__c cur: [SELECT Name,
                           		   Fecha_de_Inicio__c,
                           		   Fecha_de_Finalizacion__c,
                           		   Frecuencia__c,
                           		   D_as__c
                            FROM Curso__c
                           ]) {
            List<Date> dates = CalculateDates.getDates(cur.Fecha_de_Inicio__c,
                                                       cur.Fecha_de_Finalizacion__c,
                                                       cur.D_as__c,
                                                       cur.Frecuencia__c
                                                      );
            for (Date dat: dates) {
            	CalEvent course = new CalEvent();
                course.title = cur.Name;
                course.allDay = true;
                DateTime d = (DateTime) dat;
                course.startString = d.format(dtFormat);
                course.endString = null;
                course.url = '/' + cur.Id;
                course.className = 'course';
                events.add(course);
            }
        }
        return null;
    }
    
    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;}
    }

}

If you could let me know what I can do to fix this, I would be super grateful! Thank you