search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Changing Background Color of Selected Row Header (Scheduler)

Asked by khan
4 months ago.
onEventMoving: (args) => {
  const dp = this.scheduler.control;
  this.previousResourceId = args.e.data.resource;

  const empId = args.e.data.resource.split('-')[0];
  this.previousResource = empId.toString();

  let Json: any = {
    comP_ID: this.companyMasterId,
    locid: this.locationMasterId,
    dept_ID: this.selectedDept,
    drP_RUN_SKILL_ID: args.e.data.drP_RUN_SKILL_ITEM_ID,
  };

  this.databaseHelperServiceProxy.getEmployeeSelectedSkills(Json).subscribe((data) => {
    if (data && data.length > 0 && data[0].emlpoyeeWithSkill) {
      this.config.resources.forEach((resource) => {
        if (resource.id === 'UNCOVERED') {
          return;
        } else {
          var EmpId = resource.id.toString().split('-')[0];
        }

        data[0].emlpoyeeWithSkill.forEach((skillId) => {
          if (EmpId === skillId.emp_ID) {
            var row = dp.rows.find(resource.id);
            if (row != null) {
              dp.rows.selection.add(row);
            }
          }
        });
      });
    }
  });
},

I have a function that adds rows to the selection in the Scheduler, which currently highlights them with a gray color. I want to change the highlight color of the selected rows. How can I do that?

Comment posted by khan
4 months ago.

Changing Background color of Selected Row Header Not Selected Events

Answer posted by Dan Letecky [DayPilot]
4 months ago.

In the Scheduler, the selected rows are highlighted using the following CSS defined in the built-in theme:

.scheduler_default_rowheader.scheduler_default_rowheader_selected {
    background-color: #aaa;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
}

To change the background color, you will need to override this rule.

Just a note: The onEventMoving event is not a good place to select rows. This event is fired repeatedly during drag and drop moving. You change the selection using an asynchronous callback.

You should try to move this code to onEventMoved which is fired when the drag and drop operation is complete.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.