如何在完整的日历中重新排列表头中的按钮

Question

我已经使用FullCalendar生成了一些事件。我想重新排列页眉中的按钮。

例如，“月”、“周”和“日”按钮应显示在第一行。标题应该放在prev和next按钮之间。如何实现这一点？

提前道谢。

$('#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

对于其他遇到这个问题的人来说，在V2.4.0中，自定义按钮被添加到FullCalendar中：

https://fullcalendar.io/docs/display/custombuttons/

$('#calendar').fullCalendar({
    customButtons: {
        myCustomButton: {
            text: 'custom!',
            click: function() {
                alert('clicked the custom button!');
            }
        }
    },
    header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    }
});

Answer 2

使用fullcalendar 2.0.3

在完整日历的初始化中，您可以将

 header: {
        left: 'prev,title,next today',
        center: '',
        right: 'month,agendaWeek,agendaDay'
      },

在render（）内部的完整calendar.js中

function render() {
        tm = options.theme ? 'ui' : 'fc';
        var sections = options.header;
        if (sections) {
            element = $("<table class='fc-header' style='width:100%'/>")
               .append($("<tr/>").append(renderSection('right')))
                .append(
                    $("<tr/>")
                        .append(renderSection('left'))
                ).append(renderSection('center')
                );
            return element;
        }
    }

您可以根据需要自定义表创建。

但正如@Milz所说，编辑代码可能会破坏您在下一个完整日历版本中所做的更改。

Answer 3

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

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

第二个方法将click操作绑定到按钮（也就是说，当您单击Week时，将有一个对changeView方法的调用）。

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

下面是一个工作的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>