完整日历添加行中的行

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上发布的代码，因此将不再创建正确的项目或在正确的位置附加。

您可以通过查看头部元素的结构来弄清楚这一点，这些结构已从使用表变为divs。此外，该示例创建的"按钮"不是真正的按钮，它们是跨度，并且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/。

Answer 2

在调用FullCalendar函数时尝试指定标头，

jQuery('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    }
});

上面的代码未测试，但您可以对此进行一些实验。希望这会有所帮助。