Paul-DS / bootstrap-year-calendar

[DEPRECATED] A fully customizable year calendar widget, for boostrap !
Apache License 2.0
294 stars 243 forks source link

How to change the font color of an element set with "customDayRenderer" #206

Closed AF3412 closed 5 years ago

AF3412 commented 6 years ago

Hello! How to change the color of an element set with "customDayRenderer"?

Is it possible to set colors without the "customDayRenderer" method, as well as "clickDay", without clicking the mouse, dynamically after the calendar is displayed?

I'm generating calendar with next code:

var weekendMillis = [ 1525035600000, 1525122000000, 1525208400000, 1525813200000, 1524949200000, 1523998800000 ];
$('#calendar').calendar({
            startYear: new Date().getFullYear(),
            weekStart: 1,

            customDayRenderer: function (element, date) {
                if (weekendMillis.includes(date.getTime())) {
                    $(element).css('font-weight', 'bold');
                    $(element).css('color', 'red');
                }
            },
            clickDay: function(e) {
                var time = (e.date.getTime());

                if (!weekendMillis.includes(time)) {
                    weekendMillis.push(time);
                    $(e.element).css('font-weight', 'bold');
                    $(e.element).css('color', 'red');
                } else {
                    weekendMillis.splice(weekendMillis.indexOf(time), 1);
                    $(e.element).css('font-weight', 'normal');
                    $(e.element).css('color', 'grey');
                }

            },
        });
AF3412 commented 5 years ago

Ok, i'm do it :)

  1. Add new style: .calendar-weekend-day { font-weight: bold; color: red; }

  2. Create code like:

    $('#calendar').calendar({ startYear: new Date().getFullYear(), language: 'ru', weekStart: 1, customDayRenderer: function (element, date) { if (weekendMill.includes(date.getTime())) { $(element).addClass("calendar-weekend-day"); } }, clickDay: function (e) { let time = (e.date.getTime()); if (weekendMill.includes(time)) { weekendMill.splice(weekendMill.indexOf(time), 1); $(e.element).children(".day-content").removeClass("calendar-weekend-day");

        } else {
            weekendMill.push(time);
            $(e.element).children(".day-content").addClass("calendar-weekend-day");
    
        }
    },

    }); }