Change column grey color of weekends/holidays

[kernel]

Hi, i don't find the rule to change the gray color of weekends/holidays: can you please show me it?
Thank you!

[pmiklashevich]

Please inspect the DOM and you'll see CSS rules which define colors. Try this in TimeRanges demo (https://lh/Scheduler/examples/timeranges/)
examples/timeranges/resources/app.scss

/* HEADER STYLES */
.b-grid-headers {
    .b-sch-timerange {
        &.b-sch-nonworkingtime {
            background-color: rgba(165, 35, 35, 0.6);
        }
    }
}

/* BODY STYLES */
.b-grid-subgrid {
    .b-sch-range {
        &.b-sch-nonworkingtime {
            background-color: rgba(165, 35, 35, 0.4);
        }
    }
}

and enable highlighting weekends
examples/timeranges/app.js

    features : {
        nonWorkingTime : {
            highlightWeekends : true
        }
    },
    
    startDate  : new Date(2019, 1, 7 ),
    endDate    : new Date(2019, 1, 17 ),
    viewPreset : 'dayAndWeek',

[pmiklashevich]

Please also see our Styling guide and Custom theme demo. So if you look at resources/sass/variables.scss, you'll find sass variables which you can override. For example, examples/timeranges/resources/app.scss:

/* HEADER WEEKEND COLOR */
$weekend-background-color : transparentize(#a52323, .4);

/* BODY COLOR OF ALL RANGES BY DEFAULT */
$range-background-color : transparentize(#a52323, .6);

// This path will need to be adjusted if your project structure is different
$fa-font-path : '../../../build/fonts';

// Extend theme
@import '../../../resources/sass/themes/stockholm.scss';

// Override the theme-info rule with our theme info
.b-theme-info:before {
    content : '{"name":"Custom"}';
}

[kernel]

Hi thanks for quick reply: I tried a lot with no result. Eventually I solved by adding

.b-grid-subgrid .b-sch-range {
	background-color: #e0e0e787;
}

at the end of resources/app.css of my scheduler. I found it by searching nonworkingtime in DOM. It works!
Thanks!

[hoangtruongdz96]

same question as above, i want to highlight holidays and holidays in scheduler, please help me how to identify it

[marcio]

Hey hoangtruongdz96,

You can check the solution by following the post, if that didn't make it work for you, please open a new topic in our forums.

Thanks,