jQuery Girl
  1. jQuery Girl
  3. Fullcalendar: Change la couleur pour des jours spécifiques
Intereting Posts
JQuery Ajouter une classe à un élément de liste jquery draggable a-t-il un problème de glissement? Désactiver le bouton d’interface utilisateur Jquery lors de l’envoi du formulaire Comment accéder à la variable à l’intérieur d’un bloc jQueryUI JSON auto-complétée ne renvoyant pas les données attendues Slick slider – Ajout de la classe active au premier dans l’onglet de fondation actuellement ouvert (Éditeur de texte enrichi Jquery) Comment corriger un bogue dans l’éditeur de texte enrichi – lorsque vous appuyez sur entrée dans la balise ‘br’ créée par Firefox mais dans la balise ‘p’ créée par IE? $ .ajax vs $ .post vs $ .get vs $ .load Comment puis-je afficher plusieurs images? Clavier plein écran pour application Android par Phonegap build Détection de suspension / blocage du navigateur Arrêter la case cochée deux fois lorsque vous êtes dans une li avec un événement click comment accepter la valeur transmise par ajax Simuler des écanvass de survol (faites avec des sélecteurs dans css) jQuery mouseup n’est pas détecté correctement

Fullcalendar: Change la couleur pour des jours spécifiques

Je suis coincé avec un projet au travail. J’ai besoin de changer la couleur de fond de certains jours. C’est un calendrier où l’utilisateur doit voir, quels jours sont disponibles et lesquels ne le sont pas. J’ai découvert qu’il y avait un atsortingbut appelé “data-date”, mais je n’ai pas trouvé la possibilité de l’utiliser.

Y a-t-il un moyen de manipuler le fond de certains jours?

Je pense qu’il doit y avoir un moyen, car la cellule qui affiche la date actuelle a également une autre couleur.

Pour le month vues, basicWeek et basicDay vous pouvez modifier le rendu des jours en fournissant une fonction dayRender . Par exemple: 

 $("#calendar").fullCalendar({ dayRender: function (date, cell) { cell.css("background-color", "red"); } });

La documentation de dayRender est disponible ici: http://arshaw.com/fullcalendar/docs/display/dayRender/

Et voici un exemple de travail sur jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/ 

  dayRender: function(date, cell){ if (moment().diff(date,'days') > 0){ cell.css("background-color","silver"); } },

Pour ceux qui cherchent simplement à changer la couleur des dates passées, ciblez .fc-past dans votre css et ajoutez une propriété background-color . Par exemple,: 

 .fc-past { background-color: silver; }

Si quelqu’un veut utiliser le calendrier complet avant toute la journée en rouge (ou tout autre) de couleur, c’est le code. 

  var $calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay' }, defaultView: 'month', dayRender: function (date, cell) { var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd'); var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd'); if (check < today) { cell.css("background-color", "red"); } } });

Le code de Regin Larsen m'aide à y parvenir. Merci Regin Larsen.

Pourquoi ne pas utiliser l’atsortingbut “data-date”? 

 $("#calendar").fullCalendar(function() { viewRender: function() { $("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red"); }, ....

Lorsque vous travaillez avec des bibliothèques externes, essayez de ne pas tirer parti de tout ce qui a été généré par la bibliothèque. Étant donné que dans la prochaine version, si elles modifient le fonctionnement interne de la bibliothèque, celle-ci restra compatible avec les versions antérieures, mais votre code cessera de fonctionner. Essayez donc d’utiliser autant que possible l’API de la bibliothèque au lieu de procéder à des piratages.

En réponse à votre question, une façon de le faire sera d’append un nouvel événement à tous les jours qui ne sont pas disponibles. Cela peut être fait en créant un object événement et en effectuant un renderEvent (.fullCalendar (‘renderEvent’, event [, stick])). Lors de la création d’un object événement, assignez la couleur d’arrière-plan à la couleur souhaitée, puis définissez la couleur, la couleur du texte et la couleur de la bordure de la même manière que l’arrière-plan, si vous ne souhaitez pas que celle-ci soit visible.

Edit: La réponse de Regin Larsen semble meilleure. Je n’ai pas remarqué cela dans la documentation.

Pour comparer en utilisant le paramètre de date pour un jour spécifique: 

 $("#calendar").fullCalendar({ dayRender: function (date, cell) { if (date.isSame('2016-08-04')) { cell.css("background-color","red"); } } });

isSame vient de moment.js, qui est utilisé par fullcalendar: http://momentjs.com/docs/#/query/is-same/

getDate ne fonctionne pas, je suppose, utilisez moment à la place.

inside var calendar = $('#calendar').fullCalendar({ ... } 

 dayRender: function (date, cell) { var today = moment('2018-06-22T00:00Z'); if (date.isSame(today, "day")) { cell.css("background-color", "blue"); } },