javascript - 如何通过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"),
    //...
});

如果未指定数据属性，您可能需要稍微增强一下以回退到某些默认值。