javascript - 完整日历在标题中添加行

Question

这些天我正在使用完整日历，我对它不熟悉，所以我尝试在标题中添加一个新行，我尝试过这个

addButtons();

bindButtonActions();

function addButtons() {
    // create buttons
    var month = $("<span/>")
        .addClass("fc-button fc-button-month fc-state-default fc-corner-left fc-state-active")
        .attr({
            unselectable: "on"
        })
        .text("moth");

    var week = $("<span/>")
        .addClass("fc-button fc-button-agendaWeek fc-state-default")
        .attr({
            unselectable: "on"
        })
        .text("week");

    var day = $("<span/>")
        .addClass("fc-button fc-button-agendaDay fc-state-default fc-corner-right")
        .attr({
            unselectable: "on"
        })
        .text("day");

    // create tr with buttons.
    // Please note, if you want the buttons to be placed at the center or right,
    // you will have to append more <td> elements
    var tr = $("<tr/>").append(
        $("<td/>")
            .addClass("fc-header-left")
            .append(month)
            .append(week)
            .append(day)
    );

    // insert row before title.
    $(".fc-header").find("tr:first").before(tr);
}

function bindButtonActions(){
    var date = new Date();
    // bind actions to buttons
    $(".fc-button-month, .fc-button-agendaWeek, .fc-button-agendaDay").on('click', function() {
        var view = "month";
        if ($(this).hasClass("fc-button-agendaWeek")) {
            view = "agendaWeek";
        } else if ($(this).hasClass("fc-button-agendaDay")) {
            view = "agendaDay";
        }

        $('#calendar').fullCalendar('changeView', view);

    });

它根本不显示第一行，我想在标题之前插入行，所以月、周、日、年出现在第一行，其他内容出现在第二行

Answer 1

fullCalendar 3.x 中的 HTML 结构与早期版本相比发生了显着变化。您在上面发布的代码以 2.x 为目标，因此将不再创建正确的项目或将它们附加到正确的位置。

您可以通过查看标题元素的结构来弄清楚这一点，标题元素已从使用表格更改为使用 div。此外，示例创建的“按钮”并不是真正的按钮，它们是跨度，并且 fullCalendar 按钮类不适用于跨度。

此版本的代码适用于 3.x:

function addButtons() {
    // create buttons
    var month = $("<button/>")
        .addClass("fc-button fc-button-month fc-state-default fc-corner-left fc-state-active")
        .attr({
            unselectable: "on",
            type: "button"
        })
        .text("month");

    var week = $("<button/>")
        .addClass("fc-button fc-button-agendaWeek fc-state-default")
        .attr({
            unselectable: "on",
            type: "button"
        })
        .text("week");

    var day = $("<button/>")
        .addClass("fc-button fc-button-agendaDay fc-state-default fc-corner-right")
        .attr({
            unselectable: "on",
            type: "button"
        })
        .text("day");

    // create tr with buttons.
    // Please note, if you want the buttons to be placed at the center or right,
    // you will have to append more <td> elements
    var toolbar = $("<div/>")
      .addClass("fc-toolbar")
      .addClass("fc-header-toolbar")
      .append(
          $("<div/>")
            .addClass("fc-left")
            .append(month)
            .append(week)
            .append(day)
    );
    toolbar.append($("<div/>", { "class": "fc-clear"}));

    // insert row before title.
    $(".fc-header-toolbar").before(toolbar);
}

参见https://jsfiddle.net/soreewrj/1/一个工作示例。