如何通过html更改fullcalendar io的字段

Question

我把它设置成这样

$('#calendar_dash').fullCalendar({
    theme: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,agendaWeek,month'
    },
    height: 400,
    defaultView: 'agendaDay',
    defaultTimedEventDuration: '00:30:00',
    forceEventDuration: true,
    editable: false,
    eventLimit: true, // allow "more" link when too many events
    events: events,
    eventClick: function (calEvent, jsEvent, view) {
        if (jsEvent.url)
            window.location = view.url;
    }
});

但现在我想通过我调用的模板来修改高度。我该怎么做？

如果我只是在像这样的html中使用它

<div id="calendar_dash"></div>

我怎样才能从模板传递一个高度，比如说600？

Answer 1

您可以使用div上的数据属性来传递可配置的高度：

<div id="calendar_dash" data-height="{{ calendar_height }}"></div>

其中calendar_height是已传递给模板上下文的整数。

然后在你的JS:中

var calendar_div = $('#calendar_dash');
calendar_div.fullCalendar({
    // ...
    height: calendar_div.data("height"),
    //...
});

如果没有指定数据属性，您可能需要对其进行一点增强，以恢复到某个默认值。