web-dev-qa-db-fra.com

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 attribut 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.

jqueryfullcalendarcellbackground-color
14
Dr. Gadget

Pour les vues month, 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/

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

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;
}
7
Avindra Goolcharan

Pourquoi ne pas utiliser l'attribut "data-date"?

$("#calendar").fullCalendar(function() {

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

....
4
sulaiman sudirman

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.

4
gmwraj

Lorsque vous travaillez avec des bibliothèques externes, vous devez essayer de ne pas tirer parti de tout ce qui a été généré par la bibliothèque. Etant donné que dans la prochaine version, s'ils modifient le fonctionnement interne de la bibliothèque, celle-ci restera compatible avec les versions antérieures, mais votre code cessera de fonctionner. Essayez donc d'utiliser l'API de la bibliothèque autant que possible au lieu de faire des piratages.

En réponse à votre question, une façon de le faire sera d’ajouter un nouvel événement à tous les jours qui ne sont pas disponibles. Cela peut être fait en créant un objet événement et en effectuant un renderEvent (.fullCalendar ('renderEvent', event [ stick])). Lors de la création d'un objet é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 cette dernière soit visible. 

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

1
TK Omble

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/

1
http203

getDate ne fonctionne pas, je suppose, utilisez plutôt moment. 

à l'intérieurvar calendar = $('#calendar').fullCalendar({ ... }

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