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。还有＆＃34;按钮＆＃34;该示例创建的不是真正的按钮，它们是跨越的，而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'
    }
});

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

完整日历在标题中添加行

2 个答案: