How to just add classs for sunday not to disable?

[kripikentang12]

Hi,

Can i add class for sunday? i want to change date color to red for sunday, but not disable it.

Thank you

[holtkamp]

This can be done with the beforeShowDay(date) callback, from the documentation:

beforeShowDay (Function)
    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.

so for Sundays, you can return an array like [true, 'cssClassThatIsForSundays']

[kripikentang12]

Hi @holtkamp,

Thanks for your answer, i have made it like this but it doesn't work. This is my script

<style>
      .markholiday{
             color: red
      }
</style>

 $('#date_search').dateRangePicker({
                separator : ' - ',
                format: 'MM/DD/YYYY',
                autoClose: true,
                startDate: dateToday,
                endDate: endDate,
                beforeShowDay: function (date) {
                            var day = date.getDay();
                            if (day == 0){
                                return [true, 'markholiday']
                            } else{
                                var formattedDate = jQuery.datepicker.formatDate('mm/dd/yy', date);
                                return [true, (holidays.indexOf(formattedDate) == -1) ? '' : 'markholiday'];
                            }
                        }
            });`

[holtkamp]

mm, seems ok, can you provide a working example on www.JSFiddle.net ?

[kripikentang12]

this is example https://jsfiddle.net/kun05jpk/5/

[holtkamp]

Seems to work: the CSS class is applied properly. You can change your CSS to:

background-color: red; to see this.

[kripikentang12]

I've tried that but i don't want to change background color, i want to change font color

[holtkamp]

Well, it seems your custom style is overruled by another class

You can prevent that using !important, https://css-tricks.com/when-using-important-is-the-right-choice/

    .markholiday{
        color: red !important;
    }

[kripikentang12]

ok thank you, i got it