FullCalendar 2.3.0 Ändern Tag Farbe auf hover

Ich versuche den Tag zu ändern hintergrund-Farbe auf Maus hover.

Den hover-Ereignis muss festgehalten werden auf .fc-bg .fc-day und .fc-content-skeleton .fc-day-number für diesen Zweck. Dies funktioniert ok, bis ich verwenden hintergrund-Rendern Ereignisse als allDay-events, denn dann gibt es eine Dritte Ebene mit Klasse .fc-bg-event-skeleton die liegen auf der Oberseite der beiden anderen Ebenen. Die Ereignisse der zugrunde liegenden Elemente noch nicht ausgelöst mehr und, da die Zellen gerendert werden, die mit einem "colspan" ich kann nicht markieren Sie nur einen Tag, wenn es im hintergrund Rendern Ereignisse in einer Reihe.

Gibt es keine Möglichkeit, highlight-Tage auf mouseover-in fullcalendar? Ich bin mit der Monatsansicht.

<div class="fc-bg">...</div>
<div class="fc-content-skeleton">...</div>
<div class="fc-bgevent-skeleton">
    <table><tbody>
        <tr>
             <td class="fc-week-number" style="width:21px"></td>
             <td colspan="3"></td>
             <td colspan="1" class="fc-bgevent available"></td>
             <td colspan="3"></td>
        </tr>
   </tbody></table>
</div>
InformationsquelleAutor chmielot | 2015-03-04
  1. 17

    Ihre beste Wette ist zu verwenden pointer-events:none zu ermöglichen, den hover zu Durchlaufen, bestimmte container-Elemente und - pointer-events:auto zu re-aktivieren, es auf die Kind-Elemente, die müssen noch pointer-events.

    .fc-day:hover{
    background:lightblue;
}

/*Allow pointer-events through*/
.fc-slats, /*horizontals*/
.fc-content-skeleton, /*day numbers*/
.fc-bgevent-skeleton /*events container*/{
    pointer-events:none
}

/*Turn pointer events back on*/
.fc-bgevent,
.fc-event-container{
    pointer-events:auto; /*events*/
}

    JSFiddle

    Es sei denn, dies bewirkt, dass eine bestimmte unlösbares problem für Sie, ist dies der beste Weg. Sie konnte Durcheinander mit z-index, transparent-overlays oder eine Menge von JS aber diese Lösung verursacht die geringsten Kopfschmerzen, die durch weit.

    • Tut mir Leid, ich habe gerade die information, dass ich mit den alltägliche Ereignisse als hintergrund-events (in der Monatsansicht). In diesem Fall ist dein Beispiel nicht funktioniert. Außerdem ist es keine option, dass alle pointer-events, nur um in der Lage sein, um markieren Sie einen Tag, wenn die Maus über die Nummer des Monats überschrift und Veranstaltungen.
    • Aktualisiert. Gibt es einen bestimmten Grund, den Sie nicht mögen, erlauben pointer-events? Sie können schalten Sie Sie wieder auf, wie gebraucht.
    • Ich bin mit "normalen" Veranstaltungen auch. Diese normalen Ereignisse sollte öffnen Sie ein tooltip am Mauszeiger und Sie sollten in der Lage sein zu klicken Sie auf Sie für zusätzliche action. Nach der Deaktivierung der pointer-events dieser nicht mehr funktioniert. Ich verstehe, dass das deaktivieren von pointer-events offensichtlich ermöglicht die div in den hintergrund "durchscheinen" bei :hover in der Tabelle die Zeile mit der background-render-Ereignisse.
    • Wenn Sie die Maus über ein Ereignis, sollte es noch highlight an diesem Tag? Oder einfach nur zeigen Sie die QuickInfo?
    • Die fiddle hat sich die Zusammenarbeit tooltips werden jetzt für regelmäßige Veranstaltungen. Hinzufügen einer hintergrund-Ereignisse ist trivial.
    • Gibt es eine Möglichkeit, ich kann schweben, eine Zelle in Agendaweek anzeigen. stackoverflow.com/questions/34917919/...
    • Genial Lösung danke 😀
    • vielen Dank, hat mich gerettet eine Menge Zeit

    InformationsquelleAutor slicedtoad
Schreibe einen Kommentar