salesforce - Fullcalendar 部分显示日历上的事件

Question

我在 LWC 销售人员中实现了一个完整的日历来显示可用和预定的时段，因此日历将在四个时间段（8-10、10-12、12-2、2-4）中显示可用性/预定的时段。它显示了日历上除 2-4 插槽之外的所有事件。不知道有什么问题。请帮忙。

import { LightningElement, track, wire, api } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import FullCalendarJS from '@salesforce/resourceUrl/fullCalendarJS';
import getEvents from "@salesforce/apex/V3CalendarController.getEventsData";


//import getEventSessions from "@salesforce/apex/V3CalendarController.getSessionData";
export default class V3_SiteCalendar extends LightningElement {
    fullCalendarJsInitialised = false;
    error;
    @track 
    eventsData;
    selectedEvent;
    Buttontrue=true;
    title ='Site Survey Calendar';
    @api location;
    renderedCallback() {
        console.log('Location'+this.location);
        // Performs this operation only on first render
        if (this.fullCalendarJsInitialised) {
            return;
        }
        this.fullCalendarJsInitialised = true;

        // Executes all loadScript and loadStyle promises
        // and only resolves them once all promises are done
        Promise.all([
            loadScript(this, FullCalendarJS + '/fullCalendar/lib/jquery.min.js'),
            loadScript(this, FullCalendarJS + '/fullCalendar/lib/moment.min.js'),
            loadScript(this, FullCalendarJS + '/fullCalendar/fullcalendar.js'),
            loadStyle(this, FullCalendarJS + '/fullCalendar/fullcalendar.min.css'),
            // loadStyle(this, FullCalendarJS + '/fullcalendar.print.min.css')
        ])
            .then(() => {
                // Initialise the calendar configuration
                getEvents({recordTypeName : 'Site Survey', location:this.location})
                .then(result => {
                    result = result.replaceAll('endStr', 'end');
                    this.eventsData = JSON.parse(result);  
                    
                    
                    ('result-->', result);   
                    this.initialiseFullCalendarJs();  
                })
                .catch(error => {
                    this.error = error;
                    console.log('error-->', error);  
                });
                
            })
            .catch(error => {
                // eslint-disable-next-line no-console
                console.error({
                    message: 'Error occured on FullCalendarJS',
                    error
                });
            })
    }
    @api
    renderUpdatedCalendar(location){
        console.log('Location:'+location);
        this.location = Location;
        getEvents({recordTypeName : 'Site Survey', location : location})
        .then(result => {
            result = result.replaceAll('endStr', 'end');
            this.eventsData = JSON.parse(result);  
            console.log('result updated-->', result);   
            this.initialiseFullCalendarJs();  
        })
        .catch(error => {
            this.error = error;
            console.log('error-->', error);  
        });
    }

    initialiseFullCalendarJs() {
        console.log('this.eventsData', this.eventsData);
        const ele = this.template.querySelector('div.fullcalendarjs');
      
        // eslint-disable-next-line no-undef
        
        $(ele).fullCalendar({
            contentHeight:500,
            height:'auto',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
     
            defaultDate: new Date(), // default day is today
           // navLinks: true, // can click day/week names to navigate views
           // editable: true,
            eventLimit: true, // allow "more" link when too many events
            defaultView: 'agendaWeek',
            hiddenDays: [0],
            allDaySlot: false,
            
            defaultTimedEventDuration: '02:00:00',
            businessHours: {
                dow: [1,2,3,4,5,6],
                start: '08:00',
                end: '18:00'
            },

            views: {
                month: {
                    buttonText: 'Month'
                }, 
                listWeek: {
                    buttonText: 'List View'
                },               
                agendaWeek: {
                    buttonText: 'Week',
                    minTime: "08:00:00",
                    maxTime: "16:00:00",
                    editable: false,
                    slotLabelFormat: 'hA', // uppercase H for 24-hour clock
                    timeFormat: 'H:mm',
                    defaultTimedEventDuration: '02:00:00',
                    displayEventTime: false,
                    slotEventOverlap: false,
                    slots: [
                      {start: '08:00', end: '10:00'},
                      {start: '10:00', end: '12:00'},
                      {start: '12:00', end: '14:00'},
                      {start: '14:00', end: '16:00'}
                    ]
                },
                agendaDay: {
                    buttonText: 'Day',
                    minTime: "08:00:00",
                    maxTime: "16:00:00",
                    editable: false,
                    slotLabelFormat: 'hA', // uppercase H for 24-hour clock
                    timeFormat: 'H:mm',
                    defaultTimedEventDuration: '02:00:00',
                    displayEventTime: false,
                    slotEventOverlap: false,
                    slots: [
                      {start: '08:00', end: '10:00'},
                      {start: '10:00', end: '12:00'},
                      {start: '12:00', end: '14:00'},
                      {start: '14:00', end: '16:00'}
                    ]
                }
            },
            
            events :  this.eventsData

        });
    }

    
    closeModal(){
        this.isCreate = false;
    }
    openModal(){
        console.log('Event isCreate ',this.isCreate); 
        this.isCreate = true;
    }
}

.calendar-cls {
    max-width:1800px;
    display: block;
    width:85%;
    margin: 0 auto;
}
.font-head{
    font-size: 16pt;
    font-weight:bold;
}

.label-head{
    text-align:left;
    font-size: 12pt;   
    font-weight: bold;  
}

<template>
    <lightning-card  title={title} icon-name="standard:event">
    <div style="background:#ffffff;" class="slds-grid">
        <div id="calendar" class="fullcalendarjs calendar-cls calCls"></div>
    </div>
    </lightning-card>
</template>

标签： salesforcefullcalendarfullcalendar-scheduler