jQuery fullcalendar - 事件

Question

我正在使用jQuery fullcalendar(版本2.7.1).

这就是我想要做的:

现在我可以将背景设置为红色,但文本不会出现.这就是我正在做的事情:

var m = moment('2016-09-19');

$('#calendar').fullCalendar({
    // put your options and callbacks here
    left:   'title',
    center: '',
    right:  'prev,next',
    weekends: false,
    weekNumbers: true,
    defaultView: 'month',
    defaultDate: m,
    events: [
        {
            start: '2016-09-19',
            allDay : true,
            rendering: 'background',
            backgroundColor: '#F00',
            title: 'full',
            textColor: '#000'
        },
        {
            start: '2016-09-20',
            allDay : true,
            rendering: 'background',
            backgroundColor: '#F00',
            title: 'full',
            textColor: '#000'
        }
    ]
});

这是它的样子:

所以文字没有添加...... 并且颜色比指定的颜色轻得多.

正如你所看到的,我也没有在我的右侧导航中添加"今天",但无论如何都添加了....

我也想知道如何限制几个月的导航.例如,他们只能在2016年10月,10月,11月选择月份.

任何人都可以帮我解决这个问题吗？

Answer 1

你可以使用eventAfterRender回调.在此回调中,将字符串附加FULL到element参数.您可以CSS使用event-full类将样式应用于此.

在background-color因为有一个不透明度为轻0.3; 将其更改为1使用event-full类.

要隐藏today按钮,您必须left, center, right在header对象中设置属性.

要限制几个月的导航,您可以使用viewRender回调.

JS

var m = moment('2016-09-19');

$('#calendar').fullCalendar({
    // put your options and callbacks here
    header: {
        left: 'title',
        center: '',
        right: 'prev,next'
    },
    weekends: false,
    weekNumbers: true,
    defaultView: 'month',
    defaultDate: m,
    events: [{
        start: '2016-09-19',
        allDay: true,
        rendering: 'background',
        backgroundColor: '#F00',
        title: 'full',
        textColor: '#000',
        className: 'event-full'
    }, {
        start: '2016-09-20',
        allDay: true,
        rendering: 'background',
        backgroundColor: '#F00',
        title: 'full',
        textColor: '#000',
        className: 'event-full'
    }],
    eventAfterRender: function (event, element, view) {
        element.append('FULL');
    },
    viewRender: function (view, element) {
        var start = new Date("2016-09-01");
        var end = new Date("2016-11-30");

        if (end < view.end) {
            $("#calendar .fc-next-button").hide();
            return false;
        } else {
            $("#calendar .fc-next-button").show();
        }

        if (view.start < start) {
            $("#calendar .fc-prev-button").hide();
            return false;
        } else {
            $("#calendar .fc-prev-button").show();
        }
    }
});

CSS

.event-full {
    color: #fff;
    vertical-align: middle !important;
    text-align: center;
    opacity: 1;
}

工作演示