时间戳

首页 > 解决方案 > FullCalender5如何使用setextendedproperty显示非标准属性

javascript - FullCalender5如何使用setextendedproperty显示非标准属性

问题描述

我不能使用 json 作为输入，因为它不符合我们的要求。我需要仅使用事件数组传递字段。

有人可以让我知道如何将非标准属性添加到事件数组吗？您能否通过示例代码显示我可以添加到我下面给定的代码中吗？

下面是我的 js 文件，用于将数据加载到事件数组中，标题、开始和结束正在打印，但 QuantityOrdered 未打印在全日历上

function renderData(self,data)  {
    self = this;
    this.events = [];
    data.forEach(element => {
        const obj ={};
    
        obj.title = element.TABLE_LITM.value,
        obj.start = new Date(element.TABLE_DRQJ.value),
        obj.end= new Date(element.TABLE_STRT.value),
        obj.QuantityOrdered = element.TABLE_UORG.value,
        events.push(obj);               
    });   
                 
    this.calendar = $ ('#calendar').fullCalendar(
    {    
    editable: true,
    weekends : false,
    selectable: true,
    selectHelper:true,  
    timeFormat: 'H(:mm)',
    displayEventTime: false,
    header:{
        left : 'prev,next,today',
        center : 'title',
        right : 'month,agendaWeek,agendaDay'
    },   
    events:  events,
});

标签： javascript

解决方案

您可以通过您提到的两种方式将非标准字段添加到 FullCalendar 事件：

var events = [];
concerts.forEach(concert => {
    events.push({
        title: concert.name,
        start: concert.startTime,
        end: concert.endTime,
        extendedProps: {
            price: concert.price
        },
        venue: concert.venue
    })
});

在上面的代码中，我们有priceinsideextendedProps和venuein 对象根。

在事件解析期间，venue将移动到 inside extendedProps。然后，您可以访问事件渲染挂钩中的两个字段eventDidMount，例如：

var calendar = new Calendar(calendarEl, {
  events: events,
  eventDidMount: function(info) {
    console.log(info.event.extendedProps.price);
    //will print 100
    console.log(info.event.extendedProps.venue);
    //will print "Mercedes-Benz Arena"
  }
});

推荐阅读