Search code examples
javascriptcssdhtmlx-scheduler

DhtmlScheduler timeline coloring the weekends


If I am using the timeline view, how do I make weekends a different color from the rest of the weekdays? For example, how to change the weekend background color to say light yellow. I have tried using this but if that month does not contain a event then the color does not change.

 scheduler.templates.timeline_cell_class = function(evs, x, y) {
                if (x.getDay() == 6 || x.getDay() == 0) {
                    return getWeekendClass();
                }
                };

var getWeekendClass = function() {
        return "weekend_cell";
    };

Solution

  • If you still need an answer, the only thing you need to do is:

    scheduler.addMarkedTimespan({
        days: [0, 6],   // Sunday and Saturday
        zones: "fullday",
        css: "scheduler_weekends"
    });
    

    where scheduler_weekends is something like:

    .scheduler_weekends {
        background-color: #FFFF00;
        opacity: 0.5;
    }
    

    This will show weekends in yellow in all views except month view. For it to show in month view, you have to add to your CSS:

    .dhx_scheduler_month .dhx_marked_timespan { display: block; }