jquery - 如何重新排列完整日历中标题中的按钮

Question

我使用 FullCalendar 来生成一些事件。我想重新排列标题中的按钮。

例如，月、周和日按钮应显示在第一行。标题应放置在上一个按钮和下一个按钮之间。如何实现这一目标？

提前致谢。

$('#calendar').fullCalendar({
    header: {
        left: 'prev',
        center: 'title',
        right : 'next'
    },
    titleFormat: {
        month: 'MMMM yyyy',
        week: 'MMMM yyyy',
        day: 'MMMM yyyy'                   
    },
    contentHeight: 300,
    height: 200 ,
    eventRender: function(event, element) {
        element.popover({
            title: event.title1,
            placement: 'auto',
            html: true,
            trigger: 'click',
            animation:'true',
            content: event.msg,
            container: 'body'
        });

        $('body').on('click', function(e) {
            if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
                element.popover('hide');
        });
    },
    events: eventData 
});

Answer 1

FullCalendar 中没有可用的方法来提供您所需的内容。

但是，您可以手动添加。在下面的代码中，我添加了在 FullCalendar 初始化后调用的函数 addButtons 和 bindButtonActions。第一个函数创建按钮所需的 DOM，并将生成的内容附加到 FullCalendar header 。

第二种方法将click操作绑定(bind)到按钮(也就是说，当您单击Week时，将调用changeView方法)。

另一个选择是更改 FullCalendar 的源代码，但我不同意这个选项，因为更新插件会更加困难。

这是一个working jsfiddle和代码。

<div id="calendar"></div>
<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev',
                center: 'title',
                right : 'next'
            },
            titleFormat: {
                month: 'MMMM YYYY',
                week: 'MMMM YYYY',
                day: 'MMMM YYYY'
            },
            contentHeight: 300,
            height: 200,
            eventRender: function(event, element) {
                element.popover({
                    title: event.title1,
                    placement: 'auto',
                    html: true,
                    trigger: 'click',
                    animation:'true',
                    content: event.msg,
                    container: 'body'
                });

                $('body').on('click', function(e) {
                    if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
                        element.popover('hide');
                });
            }
        });

        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);
            });
        }
    });
</script>