fullCalendar changing Event CSS am Tag Klicken Sie auf

Question

Haben Sie eine Version von fullCalendar erstellt, deren Ereignis durch einen Punkt dargestellt wird. Die Ereignisdetails werden an anderer Stelle auf der Seite aufgefüllt. Standardmäßig hat die Farbe des Ereignispunkts die gleiche Farbe wie der aktuell markierte Tag, aber wenn der Tag gewählt wird, sieht es aus, als ob es keinen Tag gibt es.

How it looks at the moment

How it should look when on a day with an event

Blick durch, wie der Kalender initialisiert wird, werden die einzelnen Ereignisse in der Tabelle nicht über Alle Daten-Datum-Attribute wie die Tage haben.

Dies ist, wie ich auf dem dayClick Ereignisse die Hintergrundfarbe des Tages am Wechsel:

dayClick: function (date, jsEvent, view) { 
    $(".fc-state-highlight").removeClass("fc-state-highlight"); 
    $(jsEvent.target).addClass("fc-state-highlight"); 

}, 

Answer 1

Sie können UTF-8 Verschiedene Symbole verwenden. Sie können ⚫ wo Sie den Punkt möchten anhängen. Und style es.

dayClick: function (date, jsEvent, view) { 
     $(".fc-state-highlight").removeClass("fc-state-highlight"); 
     $(jsEvent.target).addClass("fc-state-highlight"); 
     $(jsEvent.target).append("⚫"); 

    }, 

Etwas wie folgt aus:

$('.day').on('click', function(){ 
 
     $('.day').addClass("selected"); 
 
     $('.selected').append('<span class="dot">&#9899;<span>'); 
 
    });

a { 
 
    color:#fff; 
 
    text-decoration: none; 
 
}  
 
.day { 
 
     position:relative; 
 
     background: #555; 
 
     border-radius: 50%; 
 
     width:30px; 
 
     height: 30px; 
 
     text-align: center; 
 
    } 
 
    .selected { background: red;} 
 
    .dot { 
 
     color:#fff; 
 
     font-size: 10px; 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 41%; 
 
    }

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
     crossorigin="anonymous"></script> 
 
    <a href="#"><div class="day"><p>1</p></div></a>