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參數。 您可以使用event-full類將CSS樣式應用於此。

background-color較淺，因為不透明度為0.3 ; 使用event-full類將其更改為1 。

要隱藏today按鈕，您必須在header對象中設置left, center, right屬性。

要限制月份導航，您可以使用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;
}

工作演示

Answer 2

我正在使用CSS驅動的解決方案，因為在這種情況下，讓庫完成它想要做的事情並解決它似乎更容易。 “今天”按鈕有一個特定的類，所以我顯示：無。 Event對象可以接受className prop。 使用它，我定位了一個：before元素來創建“FULL”文本。 最后，您的顏色變化是由於這些細胞的不透明度為0.3。 將其設置為1會顯示正在應用的全紅色背景顏色。 \\

.fc-today-button {
    display: none;
}
.event-full {
    position: relative;
    opacity: 1;
    &:before {
        content: "FULL";
        position: absolute;
        color: #fff;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
    }
}

和JS：

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',
                        className: 'event-full'
        },
        {
            start: '2016-09-20',
            allDay : true,
            rendering: 'background',
            backgroundColor: '#F00',
            title: 'full',
            textColor: '#000',
                        className: 'event-full'
        }
    ]
});

http://codepen.io/amishstripclub/pen/zqQqxx

Answer 3

我會使用disabled屬性而不是顯示和隱藏按鈕：

https://jsfiddle.net/uz0mx059/

  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").attr('disabled',true);
      return false;
    } else {
      $("#calendar .fc-next-button").attr('disabled',false);
    }

    if (view.start < start) {
      $("#calendar .fc-prev-button").attr('disabled',true);
      return false;
    } else {
      $("#calendar .fc-prev-button").attr('disabled',false);
    }
  }

再加上一點css：

button:disabled {
    color: grey;
}