How to set background-image on grid matrix cell?

Scheduler ASP.NET MVC
#1

I would like to set a background image on an calendar event item. I have ‘Pending’ and ‘Approved’ states for items in the calendar and would like to color them differently based on ‘status state’

This is my JS code is below. I’m not quite sure why I cannot set a background image.

function getEventCellClass(evs) {
var event = getPreferredEvent(evs);
if (event == null)
return “”;
var cellClass = “atype-” + event.assignmenttype;

        if(event.assignmentstatus == 1){ // if pending
        
            if (!(cellClass in dynamicStyles)) {
        
      [b]          var cellStyle = "width:18px;height:18px;cursor:default;color:" + event.textColor +
                               ";background-image: " + "~/Images/striped.png" + ";";[/b]
                createCSSSelector(".dhx_matrix_cell." + cellClass, cellStyle);
                dynamicStyles[cellClass] = true;


            }
        
        }else{
        
            if (!(cellClass in dynamicStyles)) {
        
           
                var cellStyle = "width:18px;height:18px;cursor:default;color:" + event.textColor +
                                ";background-color: " + event.color + ";";
                createCSSSelector(".dhx_matrix_cell." + cellClass, cellStyle);
                dynamicStyles[cellClass] = true;


            }
        }
        return cellClass;
    }
#2

OK instead of using an image; I use CSS3 to do the stripe effect:

if(event.assignmentstatus == 2){

            if (!(cellClass in dynamicStyles)) {
        
                var cellStyle = "width:18px;height:18px;cursor:default;color:" + event.textColor +
                               ";background: repeating-linear-gradient(45deg, " + event.color + ", "+event.color+" 2px, #f0f0f0 5px, #f0f0f0 5px)"+";";
                createCSSSelector(".dhx_matrix_cell." + cellClass, cellStyle);
                
                dynamicStyles[cellClass] = true;


            }
        }

707×173 7.66 KB

now my problem is how do I do that on the timeline view??

713×197 5.03 KB

#3

Hi,
it should be similar to styling in ‘cells’ mode. The only notable difference is in arguments of _cell_class template.
While matrix mode passes array of events that overlap a particular cell that is being rendered, ‘rows’ mode passes events from the whole row. So you’ll need to retrieve events from calendar using scheduler.getEvents(dateFrom, dateTo) methods instead of relying on the argument.
Please check these examples

cells:
docs.dhtmlx.com/scheduler/snippet/59de5e69

rows:
docs.dhtmlx.com/scheduler/snippet/3400f15a