changer la couleur d'une cellule dans un calendrier complet

J'ai besoin de changer la couleur d'une cellule d'un arshaw civile complète.

Mon exigence est :Il devrait être d'une même couleur pour un td de cellules pour la liste des jours fériés prévus par l'entreprise.
Il devrait être d'une même couleur pour un td de cellules pour la liste des vacances prises par un employé.

Comment nous pouvons atteindre cet objectif.Je suis en mesure de changer la couleur des événements, mais pas les cellules.

Aussi, Si nous pouvons changer la couleur d'un jour à l'intérieur d'une cellule selon les jours fériés et les congés .

OriginalL'auteur user650922 | 2012-04-10

  1. 5

    Si vous utilisez Jquery-Ui thème vous devez supprimer ui-widget-content classe et les appliquer à votre propre classe. Dans le code ci-dessous je suis en utilisant un 40x100 image avec la couleur pourpre plat.

    CSS

    .holiday
{
    border:1px solid #69196c;
    background: #764ead url(holiday.png) 50% top repeat-x; 
    color: white;   
}

    JS FULLCALENDAR

    dayRender: function (date, cell) {

    if ($.inArray(date, holidays) >= 0) {

        //if you aren't using ui theme, just remove this line
        $(cell).removeClass('ui-widget-content');                            
        $(cell).addClass('holiday');

    }
}
    Est-il un moyen de donner de la classe à certaines cellules d'un jour au lieu d'ajouter une classe pour tous les intervalles de temps d'une journée? J'ai une application dans laquelle je veux montrer, de mettre en évidence certains intervalles de temps d'une journée (heures d'affaires 9am-1pm, 3h-7h).

    OriginalL'auteur Perazzo

  2. 3

    Les cellules de fullCalendar d'une table de cellules - les événements sont rendus comme des divs flottantes à la surface de ces cellules. Donc, disons que dans la vue mensuelle, chaque jour de cellule est associée à une classe. Comme "fc-soleil" pour les dimanches, "fc-lundi" lundi et ainsi de suite. Chaque cellule a également le jour-le numéro de la classe associée - comme "fc-jour1", "fc-day2".

    Donc, disons que vous voulez changer la couleur d'arrière-plan tous les dimanches:

    .fc-sun {
  background-color: #FF0000;
  color: #FFFFFF;
}

    Et ainsi de suite. Espérons que cette aide.

    OriginalL'auteur ganeshk

  3. 1
    eventRender: function (event, element, monthView) 
{
    if (event.title == "HOLIDAY") 
    { 
        var one_day = 1000 * 60 * 60 * 24;
        var _Diff = Math.ceil((event.start.getTime() - monthView.visStart.getTime())/(one_day));
        var dayClass = ".fc-day" + _Diff; 
        $(dayClass).addClass('holiday-color');
    }
}

    Aussi, n'oubliez pas que vous devez effacer ces noms de classe sur le mois, ou sinon ils vont rester la même couleur de fond pour tous les mois.

    Par conséquent, vous pourriez avoir envie/besoin de gérer la navigation dans le calendrier manuellement à l'aide de gotodate et puis, à l'aide de jquery removeClass() sélecteur pour effacer les noms de classe.

    Ce que vous devez faire est de lier l'événement click de votre fullcalendar du suivant et précédent le mois de boutons et de faire quelque chose comme

    $("#nextMonthBtn").click(function () {
    //current year and month should be maintained, can be a`enter code here`enter code here`ccessed on loading attribute of the fullcalendar
    //manually manage navigation`enter code here`
    $('td').removeClass('holiday-color');
    calRef.fullCalendar('gotoDate', _currentYear, _currentMonth, 1) 
});

    Pour des renseignements supplémentaires, veuillez consulter: http://vishaljadhav.net/coloring-certain-days-when-using-full-calendar/

    votre réponse est sur le point de l'événement! pas sur la cellule! avez-vous la question de la compréhension?

    OriginalL'auteur Ayyanar Govindan

  4. 0

    Depuis qu'ils ont mis à jour fullcalendar je poste une nouvelle solution, je connais quelques années passées à partir de la question mais je suppose que c'est mieux vaut tard que jamais 🙂

    eventRender: function(event, element, monthView) {
     if (event.className == "holiday") {
           var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
                $('td[data-date="' + dateString + '"]').addClass('fully_colored_holiday');
           }
     }

    et ici, c'est la classe:

    .fully_colored_holiday,
.fully_colored_holidaydiv,
.fully_colored_holidayspan{
     background:#FF8C8C !important;
}

    OriginalL'auteur Jerko W. Tisler