Lorsque je configurais FullCalendar et définissez Rappel de la fonction EventRender, je souhaite définir la couleur de l'événement en fonction de la nullide ou non. Mais cela ne semble pas fonctionner même si la documentation le dit: http: / /arshaw.com/fullcalendar/docs/event_data/event_Object/#color-Options
existe-t-il un moyen de définir la couleur de l'événement pour changer en fonction des données? P>
calendar = $('#dayview').fullCalendar({
....
timeFormat: 'HH:mm',
columnFormat: {
agendaDay: 'dddd dd/MM/yyyy'
},
eventClick: function (calEvent, jsEvent, view) {
var leadUrl = "/Leads/" + calEvent.LeadId;
window.location = leadUrl;
},
eventRender: function (event, element) {
if (event.LeadId != null) {
event.eventColor = "#B22222";
event.eventBackColor = "#B22222";
}
},
5 Réponses :
Essayez d'utiliser la couleur à la place EventColor Event.color = "# B22222";
http://arshaw.com/fullcalendar/ DOCS / Event_Data / Event_Object / P>
Utilisez ce code P>
$('#calendar').fullCalendar('renderEvent', {
id : 99,
title : 'Some event',
start : y + '-' + m + '-28',
color : 'red'
}, true);
J'ai essayé cela et ça ne marche pas. En fait, la propriété n'existe même pas sur l'objet événement. L'objet Event a toutes mes propriétés qui ont quitté le serveur. Des idées? J'ai ajouté une mise à jour à ma question.
Ceci est le code complet:
function addTestEvents() {
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth() + 1;
if (m < 10)
m = '0' + m;
$('#calendar').fullCalendar('renderEvent', {
id : 99,
title : 'Some event',
start : y + '-' + m + '-28',
color : 'red'
}, true);
}
Edit 2: Quelques nouvelles modifications apportées à la classe de la peau FC-Event-Skin ... Ce n'est que FC-événement, de sorte que le coiffage ne soit pas un problème. Veuillez vérifier la note de l'auteur ici ici FullCalendar Classe FC-Event ...
Edit 1: Peut-être pas un bogue exactement. P>
La meilleure approche consiste à définir le nom de classe dans l'objet d'événement et à l'ajouter aux éléments trouvés par une classe 'FC-Event-Skin'. Cependant, votre classe ajoutée viendra plus tard dans la CSS et les couleurs ne priment pas, vous devez donc l'utiliser! IMPORTANT. Cela conserve également les "faux" coins arrondis ... p>
fil de cette méthode sur le calendrier ... p> ceci dans votre propre feuille de style ... p> réponse originale: p> Je pense que c'est un bogue mineur dans le code de rendu. Le paramètre Elément est un objet JQuery. Vous pouvez donc modifier cela en fonction de vos données d'événement personnalisées. Si vous définissez le style et le texte de l'élément, il rendra avec la couleur que vous avez définie; Cependant, il me semble que d'autres styles sont retirés de l'élément tel que les coins arrondis et le formatage du temps et du texte. P> eventRender:
function (event, element) {
if (event.LeadId != null) {
element.css('color', 'blue');
element.css('background-color', 'yellow');
element.text(element.text);
}
Merci pour cela, oui la classe de la peau .fc-événement est la clé. Comme: var bloc = $ (élément) .Find (". FC-Event-Skin"); Ensuite, ajoutez simplement la classe. Je n'ai même pas besoin de l'attribut CSS IMPORTANT.
Je crois que c'est un bug, au moins des sortes.
Le problème est que, dans Je doute que le correctif est facile, mais je pense que cela se qualifie comme un bug. Il me semble que le rappel Rendereventer devrait être effectué très tôt, et certainement avant que le code HTML soit généré.
(ma solution de contournement est d'essayer de définir les couleurs de l'élément bien à l'avance des appels FullCalendar - c'est-à-dire à pas Utilisez EventCalendar's EventRendar Rappel pour définir des couleurs) renduevents dans FullCalendar.js que le rappel "code> eventrender s'appelle après la fonction Setskincsss . Donc, toute modification de la couleur d'un élément ne sera pas reflétée tant que la prochaine fois qu'elle est rendue.
edit # 2 de la réponse acceptée mentionne que .FC-Event-Skin n'est plus nécessaire, mais l'extrait de code n'a pas été mis à jour.
Vous pouvez maintenant dire: P>
.black-background {
color: white !important;
background-color: black !important;
border-color: black;
}