J'utilise le composant FullCalendar et j'ai besoin de colorer les week-ends, vendredi et samedi.
J'ai utilisé ce qui suit comme recommandé ici:
Puis-je définir une couleur différente pour le week-end sur l'affichage FullCalendar mensuel A > $(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$.getJSON('[@spring.url '/loadSomeData'/]', function (data) {
$.getJSON('[@spring.url '/loadOtherData/]', function (info) {
information = returnedPublicVacation;
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select:
function(start, end, allDay) {
vacationStart = start;
showTheCorrectDialog(vacationStart);
},
eventClick: function(calEvent, jsEvent, view) {
showTheCorrectDialog(calEvent.start);
// change the border color just for fun
$(this).css('border-color', 'red');
},
editable: true,
events:data.concat(information)
});
resourceVacation = data;
});
});
$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend');
});
9 Réponses :
Avez-vous ajout de style à la classe dans votre fichier CSS?
Vous pouvez également essayer ceci: (ou .fc-soleil pour dimanche)
Vous pouvez voir l'exemple ici: http://jsfiddle.net/rajesh13yadav/nf9whojl/1/
J'ai supprimé ma classe CSS pour "FC-week-end" et j'ai ajouté le vôtre. Il colorise le nombre pas de la cellule entière!
J'ai utilisé: .fc-fri {couleur: bleu; Couleur de fond: bleu}
Mais comment ça marche !! ... i Ahve enleva la ligne de jQuery et ça marche bien et les cellules sont colorées: $ ('Tableau.Calendar> Tody> TR> TD: Nth-enfant (-N + 2)'). Addclass ('FC-week-end '); ... Savez-vous comment !!
FullCalendar ajoute .fc-day (lunde | Mar | Mer | Jeu | Fri | Sam | Soleil) automatiquement sur la création de calendrier afin que vous n'ayez pas besoin de faire quoi vous-même vous-même. Vous devez juste le styler. couleur est attribut pour la couleur de la police! N'utilisez pas la même couleur pour la couleur de la police et la couleur de la police (modifier l'une ou l'autre des Couleur: valeur ou arrière-plan-couleur: valeur .
Cela a du sens maintenant que je cherchais ".fc-vendredi" @ FullCalendar CSS.Merci.
Mais sa volonté ne colorera pas le mois suivant affaiblir car à cette époque le mois prochain n'est pas à dom.so y a-t-il une alternative
Essayez la classe FC-Day-Sun
AJS.$(document).ready(function () {
AJS.$(".fc-weekend-column").each(function(i,el){
AJS.$(this).css("background-color", "#FFF7F7");
});
});
Cela a fonctionné pour moi:
.fc-sun {
color:#337ab7;
border-color: black;
background-color: #ffa58c; }
Essayez la classe FC-Day-Sun pour 5. *
Dans la version 4, vous pouvez ajouter un événement pour tous les dimanches ou un autre jour ensemble en utilisant " jours de Daysofweek strong>". events: [
{
daysOfWeek: [0,6], //Sundays and saturdays
rendering:"background",
color: "#ff9f89",
overLap: false,
allDay: true
}]
Ce code travaillant avec moi:
#calendar .fc-bgevent {
background: #000000;
}
solution en FullCalendar Version 5: Appliquez le style CSS sur le FC-Day-SAT et fc-jour-soleil classe: si vous ne voulez pas changer la couleur de l'en-tête de calendrier (Qui affiche le "SAT" et "SUN"), vous pouvez appliquer précisément le CSS pour le FC-day-sat FC-Day -sun classe en ajoutant TD tag:
appliquer également BGColor sur une classe commune fera le travail maintenant. .fc-sam et .fc-soleil a été converti en .fc- jour-sam et .fc-jour-soleil . .fc-jour-sam, .fc-day-sat < / code> ne fonctionnera plus, car ils ont appliqué BGColor à .fc-non-business qui est la classe enfant la plus profonde.
en FullCalendar version 5 La classe CSS pendant des jours a été modifiée comme indiqué ci-dessous. .fc-soleil -> .FC-Day- Soleil .fc- jour-mar .FC-thu ->. FC-Day-thu .fc-vendredi -> .fc-day-vendredi .FC-SAT - > .fc-day-sat
Si vous souhaitez supprimer la couche supérieure du week-end, utilisez le code suivant
.fc-day-sat .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
display: none;
}
.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
display: block;
}
.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness .fc-non-business{
display: none;
}