j. Kalendarza jQuery - wydarzenia

Question

Pracuję z jQuery fullcalendar (wersja 2.7.1).

To jest to, co chcę zrobić:

Teraz mogę ustawić tło na czerwono, ale tekst nie pojawia się. To, co robię:

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

Jak to wygląda:

więc tekst nie dodaje .... Kolor jest znacznie jaśniejszy niż określony kolor.

Jak widać, nie dodałem również "dzisiaj" do mojej prawej nawigacji tylko, ale i tak została dodana ....

Zastanawiam się również, w jaki sposób mogę ograniczyć nawigację miesięcy. Że na przykład mogą wybrać tylko miesiące wrzesień, październik, listopad 2016 roku.

Czy ktoś może mi pomóc w tych pytaniach?

Answer 1

Można użyć eventAfterRender zwrotnego. W tym odwołaniu dołączamy parametr string FULL do element. Możesz zastosować stylizację CSS przy użyciu klasy event-full.

Urządzenie background-color jest lżejsze, ponieważ występuje nieprzezroczystość 0.3; zmień go na 1 używając klasy event-full.

Aby ukryć przycisk today, należy ustawić właściwości left, center, right w obiekcie header.

Aby ograniczyć nawigację miesięcy, można użyć oddzwaniania 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

Używam rozwiązania opartego na CSS, ponieważ w tym przypadku wydaje się łatwiejsze, aby biblioteka zrobiła to, co ma zrobić i obejść ją. Przycisk "Dzisiaj" ma określoną klasę, więc pokażę: nie ma tego. Obiekty Event mogą przyjmować propozycję className. Używając tego, umieściłem: before element, aby utworzyć tekst "FULL". Wreszcie, twoja odmiana koloru jest spowodowana nieprzezroczystością 0,3 na tych komórkach. Ustawienie na 1 pokazuje pełny czerwony kolor tła, który jest stosowany. \

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

i 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

Chciałbym użyć atrybut disabled zamiast pokazywać i ukrywanie przycisków:

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

Plus trochę CSS:

button:disabled { 
    color: grey; 
}