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年9月，10月，11月。

任何人都可以幫我解決這個問題嗎？

Answer 1

可以使用eventAfterRender回調。在此回調中，附加字符串FULL至element參數。您可以使用event-full課程將CSS樣式應用於此。

由於0.3的不透明度，因此background-color更輕;使用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; 
} 

WORKING DEMO

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

我會使用禁用的屬性，而不是展示和hidding按鈕：

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; 
}