Our pure JavaScript Scheduler component


Post by mateRO »

We want to give none-working elements custom CSS. We can override b-sch-resourcenonworkingtime. However if we set cls field to some other custom class (b-sch-resourcenonworkingtime-maintenance), elements will still be styled by b-sch-resourcenonworkingtime. Eventually we will want to give each element its custom CSS.

adding cls on backend in python

calendars.append({
            "id": str(dt['wks_id']),
            "name": str(dt['wks_id']),
            "unspecifiedTimeIsWorking": True,
            "cls": "b-sch-resourcenonworkingtime-maintenance",
            "intervals": [{
                "name": dt['reason'],
                "startDate": dt['start_date'].isoformat(),
                "endDate": (dt['start_date'] + timedelta(hours = dt['duration'])).isoformat(),
                "isWorking": False,
                "cls": "b-sch-resourcenonworkingtime-maintenance",
            }]
        })

adding calendar on frontend

 scheduler.project.calendarManagerStore.add(data['calendars']);

css

.b-sch-resourcenonworkingtime, .b-sch-resourcenonworkingtime-maintenance {
  background-color: #0000ff;
}

.b-sch-resourcenonworkingtime-maintenance {
  background-color: #ff0000;
}

none-working time is in blue instead of red

intervals.png
intervals.png (29.33 KiB) Viewed 275 times

Post by mats »

Could you please upload this as a runnable test case so we can try to debug it?


Post by mateRO »

Runnable test case is attached.

Attachments
test.zip
(1.47 MiB) Downloaded 38 times

Post by alex.l »

You use version 4.2.4 but support of cls for CalendarIntervals has been added in 5.0.0.
https://www.bryntum.com/products/scheduler-pro/changelog/

You can now style CalendarIntervals by providing a cls field in their data. This makes it very easy to style non working time elements (Fixed #3255)

All the best,
Alex


Post Reply