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
Sylvie Serplet 1Sylvie Serplet 1 

Full Calendar v2 multi day event - wrong end date

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.


 
s kalvas kalva
Please provide me codes, If you find any solution on this.
 
Sylvie Serplet 18Sylvie Serplet 18
I ended up just adding a day in my code:
DateTime endDT = leav.End_Date__c + 1;