fullCalendar V2 event background title

Question

Korzystam z nowych wydarzeń w tle w fullCalendar V2, aby pokazać, w których gniazdach można zarezerwować rezerwacje, ale chciałbym również pokazać jakiś tytuł w wydarzeniu w tle. Ustawienie "title" na wydarzeniu nic nie pokazuje.

Czy tak jest w ogóle?

Dzięki

Answer 1

Niedawno miałem podobny problem. Buduję swoją prostą aplikację do zarządzania czasem pracy i chciałem korzystać z funkcji fullcalendar i pokazywać, ile godzin pracowałem każdego dnia. Standardowe zdarzenia pokazujące cienki prostokąt, który nie wyglądał dobrze. Zauważyłem, że są wydarzenia w tle, więc użyłem ich do zaznaczenia, w którym dniu pracowałem. Wyglądało znacznie lepiej, ponieważ cały dzień był podświetlony. Ale podobnie jak ty chciałem pokazać pewne informacje, a mianowicie godziny na dobę. Więc wymyślam następujące rozwiązanie. Tworzę dwa wydarzenia na dany dzień. Najpierw tworzy się wydarzenie tła, a drugie tworzy normalne zdarzenie z tytułem ustawionym na godziny, ale z tłem ustawionym jako przezroczyste. Przy odrobinie pomocy css wyrównuję tekst do standardowego wydarzenia. Kod wygląda następująco:

$('#calendar').fullCalendar({ 
      eventBackgroundColor: '#ABFFA6', 
      eventColor: 'transparent', 
      eventBorderColor: 'transparent', 
      eventTextColor: '#000', 
      events: [ 
       {"start":"2015-01-02","rendering":"background"}, 
       {"title":"06:10","start":"2015-01-02","backgroundColor":"transparent"}, 
      ] 
     }); 

Ten kod będzie oznaczać II stycznia jasnym zielonym tłem i dodać do niego etykietę 6:10. To rozwiązanie można ekstrapolować na inne widoki (np. Widok dnia).

Answer 2

Możesz użyć tego kodu. Spróbuj.

eventRender: function(event, element){ 
    if(event.source.rendering == 'background'){ 
     element.append("YOUR HTML CODE"); 
    } 
} 

Answer 3

Mam zmodyfikowany „eventRender” kalendarza tak, że jeśli zdarzenie wykryje renderowania w tle, a także pokazać tytuł:

eventRender: function (event, element) { 
    if (event.rendering == 'background') { 
     element.append(event.title); 
    } 
}