jQuery Datepicker-achtergrondkleur voor cellen op basis van het gebeurtenistype

Ik moet niet-beschikbare datums in een andere kleur weergeven op basis van het evenementtype of als het vol is voor die dag.

Below example fetches dates from database and i pass them as an array to JavaScript at present i am passing four parameter in an array [2012,7, 15, 'Some events'] such as Year, Month, Day & Years. I want to alter this array to pass Fifth parameter as color [2012,7, 15, 'Some events', 'Red']. so that i can change the color of the cell based on the event type.

Ik weet niet zeker hoe ik onder script zal veranderen om het te laten werken. Ik heb bijvoorbeeld gekeken maar kon geen passend exemplaar vinden. Ik zou hulp in dit opzicht op prijs stellen, want ik ben geen Guru van Scripting.

function BindEvents()
{
//Script for Calendar
        var holiDays = [[2012,7, 15, 'Some events'],[2012,7, 4, 'Some Event'],[2012,7, 1, 'Full Booked'],[2012,7, 5, 'Full Booked']];
        $(function() {
            $("#txtBookDate").datepicker({
                dateFormat: "yy-mm-dd",
                minDate: "-0d",
                maxDate: "+90d",
                firstDay: 0,
                beforeShowDay: noWeekendsOrHolidaysOrBlockedDates
            });

            function noWeekendsOrHolidaysOrBlockedDates(date) {
                //var noWeekend = jQuery.datepicker.noWeekends(date);
                return setHoliDays(date);
            }

           //set holidays function which is configured in beforeShowDay
            function setHoliDays(date) {
                var day = date.getDay();
                if (day == 5 || day ==6) return [false, ''];

                for (i = 0; i < holiDays.length; i++) {
                    if (date.getFullYear() == holiDays[i][0]
                        && date.getMonth() == holiDays[i][1] - 1
                        && date.getDate() == holiDays[i][2]) {
                        return [false, 'holiday', holiDays[i][3]];
                    }
                }
                return [true, ''];
            }
        });
}

BindEvents();  
3

1 antwoord

Van de fijne handleiding :

beforeShowDay

A function that takes a date as a parameter and must return an array with:

  • [0]: true/false indicating whether or not this date is selectable
  • [1]: a CSS class name to add to the date's cell or "" for the default presentation
  • [2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

Er is dus geen ruimte in de retourwaarde voor een specifieke kleur. Element één van de array kan echter meerdere klassenamen bevatten, zodat u dit via CSS kunt doen.

Als u wilde dat een bepaalde vakantie in rode tekst zou verschijnen, dan zou u dit in uw beforeShowDay kunnen doen:

return [false, 'holiday red', holiDays[i][3]];

en voeg dan een klein beetje CSS toe:

td.red span.ui-state-default {
    color: #f00;
}

om de rode -klasse iets te laten doen.

Demo: http://jsfiddle.net/ambiguous/pjJGf/

5
toegevoegd
Waardeer je antwoord, ik kan je aanpak gebruiken om het gewenste resultaat te krijgen. Bedankt
toegevoegd de auteur Learning, de bron
@ApoorvKansal: Dat zijn twee klassen (bijv. jsfiddle.net/ambiguous/pjJGf/ 232 ), kunt u addClass en removeClass meerdere klassen tegelijk door te werken met door spaties gescheiden lijsten.
toegevoegd de auteur mu is too short, de bron
Wacht, waar is 'vakantie rood' ??? Moet dat in dit geval niet een css-klasse zijn?
toegevoegd de auteur Apoorv Kansal, de bron