Question

我尝试在salesforce闪电组件中实现fullcalendar调度程序。

这里是我使用的fullcalendar和scheduler的版本和文件：

<aura:component controller="SchedulerEvents" implements="force:appHostable" access="public">
<ltng:require scripts="{!join(',',
        $Resource.fullcalendar310 +'/fullcalendar-3.1.0/lib/jquery.min.js' ,
        $Resource.fullcalendar310 + '/fullcalendar-3.1.0/lib/moment.min.js',
        $Resource.fullcalendar310 + '/fullcalendar-3.1.0/fullcalendar.js',
        $Resource.fullcalendar310 + '/fullcalendar-3.1.0/fullcalendar.min.js',
        $Resource.fullcalendarScheduler161 + '/fullcalendar-scheduler-1.6.1/lib/jquery.min.js',
        $Resource.fullcalendarScheduler161 + '/fullcalendar-scheduler-1.6.1/lib/fullcalendar.min.js' ,
        $Resource.fullcalendarScheduler161 + '/fullcalendar-scheduler-1.6.1/lib/gcal.min.js' ,
        $Resource.fullcalendarScheduler161 + '/fullcalendar-scheduler-1.6.1/lib/moment.min.js',
        $Resource.fullcalendarScheduler161 + '/fullcalendar-scheduler-1.6.1/scheduler.js',
        $Resource.fullcalendarScheduler161 + '/fullcalendar-scheduler-1.6.1/scheduler.min.js'


        )}" afterScriptsLoaded="{!c.afterScriptsAreLoaded}"/>
<ltng:require styles="{!$Resource.fullcalendar310 + '/fullcalendar-3.1.0/fullcalendar.css'}"/>
<ltng:require styles="{!$Resource.fullcalendarScheduler161 + '/fullcalendar-scheduler-1.6.1/scheduler.css'}"/>
<ltng:require styles="{!$Resource.fullcalendarScheduler161 + '/fullcalendar-scheduler-1.6.1/scheduler.min.css'}"/>

<aura:attribute name="events" type="Object[]" />
<div aura:id="scheduler"></div>

我的javascript函数设置日历：

loadDataToCalendar :function(component,data){
    var ele = component.find('scheduler').getElement();
    $(ele).fullCalendar({
        defaultView:'timelineDay',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },

        navLinks: true,
        editable: true,
        eventLimit: true,
        resources: [
            { id: 'a', title: 'Auditorium A' },
            { id: 'b', title: 'Auditorium B', eventColor: 'green' },
            { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
            { id: 'd', title: 'Auditorium D', children: [
                { id: 'd1', title: 'Room D1' },
                { id: 'd2', title: 'Room D2' }
            ] },
            { id: 'e', title: 'Auditorium E' },
            { id: 'f', title: 'Auditorium F', eventColor: 'red' },
            { id: 'g', title: 'Auditorium G' },
            { id: 'h', title: 'Auditorium H' },
            { id: 'i', title: 'Auditorium I' },
            { id: 'j', title: 'Auditorium J' },
            { id: 'k', title: 'Auditorium K' }
        ],
        events: [
            { id: '1', resourceId: 'b', start: '2017-05-02T02:00:00', end: '2017-05-04T05:00:00', title: 'timed' },
            { id: '3', resourceId: 'd', start: '2017-05-03', end: '2015-08-05', title: 'allday' }
        ],

       //groupByDateAndResource :true,
        groupbyresource:true,
        defaultDate: '2017-05-01',
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source'
    });
},

标准日/周/月按钮按预期工作，并且事件正确显示。我的问题是当我将defaultview设置为timelineDay时，我得到以下结果： enter image description here

缺少每个资源的日信息和事件。我尝试了不同版本的库和js / css文件，但无法使其正常工作。有人知道吗？

Fullcalendar调度程序未在雷电组件中呈现相关性

0 个答案: