jQuery Vollkalender - Ereignisse

Question

Ich arbeite mit jQuery fullcalendar (Version 2.7.1). Diese

ist das, was ich tun möchte:

Jetzt kann ich den Hintergrund auf rot gesetzt, aber der Text nicht angezeigt. Das ist, was ich tue:

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

Dies ist, wie es aussieht:

So wird der Text nicht hinzugefügt .... Und die Farbe ist viel heller als die angegebene Farbe.

Wie Sie sehen, habe ich auch nicht "heute" zu meinem rechten Navigation hinzufügen, aber es ist trotzdem hinzugefügt ....

Ich frage mich auch, wie ich die Navigation von Monaten begrenzen kann. Dass sie zum Beispiel nur die Monate September, Oktober, November 2016 auswählen können.

Kann mir jemand bei diesen Fragen helfen?

Answer 1

können Sie eventAfterRender Rückruf verwenden. In diesem Callback wird die Zeichenfolge FULL an element Parameter angehängt. Sie können CSS Styling anwenden, indem Sie event-full Klasse verwenden.

Die background-color ist leichter, weil es eine Opazität von 0.3 gibt; ändern Sie es in 1 mit event-full Klasse.

Um today Schaltfläche auszublenden, müssen Sie left, center, right Eigenschaften in header Objekt festlegen.

Um die Navigation von Monaten zu begrenzen, können Sie viewRender Rückruf verwenden.

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

Ich benutze eine CSS-gesteuerte Lösung, da es in diesem Fall einfacher scheint, die Bibliothek einfach machen zu lassen, was sie tun soll und um sie herum zu arbeiten. Die Schaltfläche "Heute" hat eine bestimmte Klasse, so dass ich Folgendes anzeigen würde: keine. Die Event-Objekte können eine className-Stütze akzeptieren. Ich positionierte ein: before-Element, um den "FULL" -Text zu erstellen. Schließlich ist Ihre Farbvariation aufgrund einer Opazität von 0,3 auf diesen Zellen. Wenn Sie das auf 1 setzen, wird die volle rote Hintergrundfarbe angezeigt, die angewendet wird. \

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

und 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

ich das disabled-Attribut anstatt zu zeigen, und Hidding Tasten verwenden würden:

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 ein bisschen CSS:

button:disabled { 
    color: grey; 
}