如何在v4 ng-fullcalendar中使用“资源”?

时间:2019-04-15 21:47:34

标签: angular resources fullcalendar-4

fullcalendar v4无法识别语法“ resources”。

写为“ resources:”的部分出现错误。

  

WeekgridComponent

import { Component, ViewChild } from '@angular/core';
import { OptionsInput, EventApi, View } from '@fullcalendar/core';

import resourceTimeGridDay from '@fullcalendar/timegrid';
import resourceTimeGrid from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

import { CalendarComponent } from 'ng-fullcalendar';

@Component({
  selector: 'weekgrid',
  templateUrl: './weekgrid.component.html',
  styleUrls: ['./weekgrid.component.css']
})

export class WeekgridComponent {

  constructor() { }

  @ViewChild('fullcalendar') fullcalendar: CalendarComponent;
  options: OptionsInput = {
    plugins: [ resourceTimeGridDay, interactionPlugin , resourceTimeGrid],
    timeZone: 'UTC',
    defaultView: 'resourceTimeGridDay',
    views: {
      listDay: { buttonText: 'list day' },
      listWeek: { buttonText: 'list week' },
      listMonth: { buttonText: 'list month' }
    },
    header: {
      left: '',
      center: 'prev,next',
      right: ''
    },
    minTime: '6:00',
    maxTime: '20:00',
    height: 'auto',
    editable: true,
    selectable: true,
    droppable: true,
    weekends: false,
    weekNumbers:true,
    weekNumbersWithinDays:true,
    resources: [
      { id: 'a', title: 'Room A' },
      { id: 'b', title: 'Room B', eventColor: 'green' },
      { id: 'c', title: 'Room C', eventColor: 'orange' },
      { id: 'd', title: 'Room D', eventColor: 'red' }
    ],
    events:[
        {
          id:'1',
          title:"My repeating event",
          start:'2019-04-15 10:00',
          end:'2019-04-15 12:00',
          eventColor: '#378006',
        }
    ],
    eventRender: function(args:{event:EventApi, el:HTMLElement,
view: View}) {
      args.el.addEventListener("dblclick", function(){
        console.log("issa")
      });

    },
    eventClick: function({el, event, jsEvent, view}){

    },
    eventDrop: function({el, event, jsEvent, view}){
      console.log(event);
    },
    eventResize: function( eventResizeInfo ) {
      console.log(eventResizeInfo.event);
    }
    };

}

它应该像示例https://fullcalendar.io/docs/vertical-resource-mixed-demo中那样工作, 但相反,即使文档中受支持,它也无法识别不存在的语法。

1 个答案:

答案 0 :(得分:0)

我认为是因为您可能在事件文本中缺少以下内容:

"resourceId":"a",