2016-07-05 13 views
1

TL auf Fullcalendar Spalten ändern; DR: Ich möchte einen Cursor Zeiger auf grünen Zellen und Cursor auf grauen Zellen deaktiviertWie Cursor

ich eine Anwendung am Bau, die verwenden Fullcalendar und ich stelle ein Problem, das ich nicht lösen kann:
Ich versuche, den Cursor direkt auf Zellen (nicht Ereignisse) zu ändern Ich habe versucht, die «. Fc-Zukunft», «. Fc-heute» und «. fc-Vergangenheit »Vollkalender-Klassen und wenden Sie einen Stil wie« Cursor: Zeiger »oder« Cursor: nicht erlaubt »ohne Erfolg. Hier

ist ein Screenshot von dem, was ich habe:

enter image description here

Wer weiß, wie kann ich den Cursor auf Spalten ändern?
Danke für Ihre Hilfe!

Mein Projekt:

  • Fullcalendar 2.8.0

Antwort

0

Danke für Ihre schnelle Antwort!

Ich konnte nicht herausfinden, wie Sie dies einrichten, wie Sie in Ihrem Beitrag erklärt haben. So habe ich einen Workaround gefunden.
In Fullcalendar, habe ich ein Hintergrund Ereignisobjekt:

{ 
    start: moment().startOf('isoWeek'), # beginning of week 
    end: moment().utc().endOf('day'), # end of current day 
    rendering: 'background', 
    className: 'disabled-cell' 
} 

Dieses „fake Ereignis“ deaktivieren der ganzen Tages von Anfang Woche bis zum Ende des aktuellen Tages.

Für den Cursor, habe ich eine CSS-Klasse:

// Sass code 
.disabled-cell 
    background-color: gray 
    opacity: 1 
    &:hover 
    cursor: not-allowed 

.fc-view 
    td 
    cursor: pointer 
0

<div class="fc-scroller-canvas"> enthält zwei div s, eine mit der fc-content Klasse und zum anderen mit fc-bg Klasse. Sie legen den Hintergrund für die Elemente innerhalb der fc-bg fest. Setzen Sie die CSS-Eigenschaft cursor für die gleichen Elemente innerhalb der fc-bg. Um den Cursor durch die fc-content zu zeigen, müssen Sie pointer-events: none; für die fc-content div. Dadurch wird es für den Mauszeiger transparent gemacht, so dass Sie die Elemente im darunterliegenden div mit der Maus verschieben oder anklicken können. Das bedeutet, dass Sie den Cursor sehen können, den Sie brauchen.

Offensichtlich kann dies möglicherweise einige der Funktionalität deaktivieren, die Sie benötigen, so müssen Sie pointer-events: auto; auf Dinge, die Sie benötigen, z. B. auf Ereignisse selbst setzen (wenn Sie irgendetwas mit EventClick, zum Beispiel).