Question

我正在使用React实现FullCalendar，并想添加自定义按钮。 FullCalendar文档涵盖自定义按钮，但不适用于React。

我尝试了文档中显示的自定义按钮代码的不同变体，但在React中我什么都做不到。我已将自定义按钮放入数组中。我尝试将自定义按钮代码移出render方法。

 SELECT bad.agent as agents,
 bad.status as thestatus,
 desc.description as product,
 retail.booking_actual_retail as actualretail,
 country.analysis_master1 as countries
 from BHD bad
 inner join BHD bad on ftb.booking_reference = bad.FULL_REFERENCE
 inner join DRM Country on bad.agent = country.code
 inner join OPT desc on bad.id = desc.id

我收到一条错误消息，告诉我myCustomButton未定义。

Answer 1

将以下属性添加到FullCalendar React组件中：

<FullCalendar
    ...
    customButtons={{
        myCustomButton: {
            text: 'custom!',
            click: function() {
                alert('clicked the custom button!');
            },
        },
    }},
    header={{
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    }}
    ...
/>

Answer 2

按如下所示使用它，看一下双花括号，这是由于React / JSX语法引起的：

...    
customButtons={{
                  myCustomButton: {
                    text: 'custom!',
                    click: function() {
                      alert('clicked the custom button!');
                    },
                  },
                }}
...

在React中创建FullCalendar自定义按钮

2 个答案: