CODEWITHSUNDEEP
fullcalendar
Danilo Codeco Carvalho
Danilo Codeco Carvalho

Reputation: 23

Change day number color on click - not background

I need to change the day number color when I click in any day in full calendar. I'm trying to show that the day clicked is activated.

I tried to use the recommended textColor, color, borderColor and backgroundColor but only the last one works.

dayClick: function(date, jsEvent, view) {
                $(this).css('textColor', 'red');
            },

Thank you.

Upvotes: 2

Views: 2131

Answers (1)

Ali Mehdi
Ali Mehdi

Reputation: 924

Use

$('#calendar').fullCalendar({
                    dayClick: function (date) {
                        var moment = date.toDate();
                        MyDateString = moment.getFullYear() + '-'
                                + ('0' + (moment.getMonth() +1) ).slice(-2)
                                + "-" +('0' + moment.getDate()).slice(-2);
                        $('[data-date='+MyDateString+']').css({"color": "red", "backgroundColor": "yellow", "borderBottom": "5px solid #ccc"});
                    }
                });

Explanation:

var moment = date.toDate();

This changes the date string to javascript date object

MyDateString = moment.getFullYear() + '-'
                                    + ('0' + (moment.getMonth() +1) ).slice(-2)
                                    + "-" +('0' + moment.getDate()).slice(-2);

This code changes date format to 2016-07-29

$('[data-date='+MyDateString+']').css({"color": "red", "backgroundColor": "yellow", "borderBottom": "5px solid #ccc"});

This check in our html where attribute data-date="2016-07-29" and applies the style accordingly

Hope this helps

Upvotes: 2

Related Questions