When I use cssClassPrefix and change the theme, I lose my background color on the resource grouped (disabled) cells that go across the scheduler.
The first attachment (all green across) is what I want and works without cssClassPrefix... once I set cssClassPrefix, it looks like the second attachment..
It looks like a style definition problem. The style from the theme seems to get a higher priority in this case.
What CSS do you use for the green background for the grid cells? You may want to add !important or use a more specific selector.
The green background is coming from the resources array backColor setting.
DayPilot
dp.resources = [
{ name: "Example", id: "Example", expanded: true, 'backColor' => "#5CB673", children:[
{ name : "Tool 1", id : "Tool1" },
{ name : "Tool 2", id : "Tool2" }
]
}
]
I'm using a custom css that i created from the theme designer...which when I enable, it overrides the backColor from resources array...
Can you tell me the css class i would have to set z-index lower for the css sheet or vice versa for resources backColor ?
The resources[].backColor property only affects the row header (on the left side). The background of the grid cells needs to be set using onBeforeCellRender event handler - how does your implementation look like?
Well... it did make all cells at the top green if i don't use a custom theme... maybe it's because it's the parent resource that backColor fills in all the cells on the same row?
dp.onBeforeCellRender = function(args) {
var cellDate = moment(args.cell.start.value).format("YYYY-MM-DD");
if (jQuery.inArray(cellDate, holidayArr) !== -1) {
args.cell.backColor = "#FF9595";
args.cell.html = "<div style='text-align: center; font-weight: bold; color: #7A7A7A;'>** HOLIDAY **</div>";
}
};
You can extend your onBeforeCellRender like this to apply the green background color:
dp.onBeforeCellRender = function(args) {
var row = dp.rows.find(args.cell.resource);
if (row.data.backColor) {
args.cell.backColor = row.data.backColor;
}
var cellDate = moment(args.cell.start.value).format("YYYY-MM-DD");
if (jQuery.inArray(cellDate, holidayArr) !== -1) {
args.cell.backColor = "#FF9595";
args.cell.html = "<div style='text-align: center; font-weight: bold; color: #7A7A7A;'>** HOLIDAY **</div>";
}
};
The parent rows are marked with "scheduler_default_cellparent" class. Maybe you have added the green background this way? When you apply a theme this class changes to "yourtheme_cellparent".
Yep that works. Thanks!!
Great, thanks for the update!
This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.