jQuery fullcalendar - sự kiện

Question

Tôi đang làm việc với jQuery fullcalendar (phiên bản 2.7.1).

Đây là những gì tôi muốn làm:

Bây giờ tôi có thể thiết lập nền sang màu đỏ nhưng các văn bản không xuất hiện. Đây là những gì tôi đang làm:

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' 
     } 
    ] 
}); 

Đây là cách nó trông:

Vì vậy, các văn bản không được thêm vào .... Và màu sắc nhẹ hơn nhiều so với màu được chỉ định.

Như bạn có thể thấy tôi cũng không thêm 'hôm nay' vào điều hướng bên phải của mình nhưng vẫn được thêm vào ....

Tôi cũng tự hỏi làm thế nào tôi có thể giới hạn điều hướng của tháng. Rằng họ ví dụ chỉ có thể chọn tháng tháng chín, tháng mười, tháng mười một năm 2016 ...

Có ai có thể giúp tôi với câu hỏi này không?

Answer 1

Bạn có thể sử dụng eventAfterRender gọi lại. Trong cuộc gọi lại này, hãy thêm tham số FULL đến element. Bạn có thể áp dụng kiểu dáng CSS cho kiểu này bằng cách sử dụng lớp event-full.

background-color nhẹ hơn vì có độ mờ là 0.3; thay đổi nó thành 1 sử dụng lớp event-full.

Để ẩn today, bạn phải đặt left, center, right thuộc tính trong đối tượng header.

Để giới hạn điều hướng các tháng bạn có thể sử dụng gọi viewRender gọi lại.

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

Tôi đang sử dụng giải pháp dựa trên CSS vì có vẻ dễ dàng hơn trong trường hợp này để cho thư viện làm những gì nó được dự định làm và làm việc xung quanh nó. Nút "Hôm nay" có một lớp cụ thể để tôi hiển thị: không có gì. Các đối tượng Event có thể chấp nhận một className prop. Sử dụng điều đó, tôi đã định vị một: trước phần tử để tạo văn bản "ĐẦY ĐỦ". Cuối cùng, biến thể màu của bạn là do độ mờ đục là 0,3 trên các ô đó. Đặt giá trị đó thành 1 cho biết màu nền đỏ đầy đủ đang được áp dụng. \

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

và 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

tôi sẽ sử dụng thuộc tính tàn tật thay vì hiển thị và hidding nút:

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

Cộng với một chút css:

button:disabled { 
    color: grey; 
}