Hello,
I've a question.
I try to modify the background color of events in the scheduler.
I use your example "Airport" : https://bryntum.com/products/scheduler/examples/airport/
I modify in the event data the color by two different way :
- it's works fine
"eventColor" : "red" - as you can see, the white background color is also modify
"eventColor" : "#FF0000"
is it possible to use HTML color with the same result like "eventColor" : "red"" ?
all code :
Airport dolly scheduling demo
Code editor
L{CodeEditor.Download code}
app.module.js?474606
import { Scheduler, DateHelper, EventModel } from '../../build/scheduler.module.js?474606';
import shared from '../_shared/shared.module.js?474606';
const
resources = [
{
"id" : "A1",
"name" : "A1",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 100
},
{
"id" : "A2",
"name" : "A2",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 45
},
{
"id" : "A3",
"name" : "A3",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 45
},
{
"id" : "A4",
"name" : "A4",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 65
},
{
"id" : "A5",
"name" : "A5",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 75
},
{
"id" : "A6",
"name" : "A6",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 77
},
{
"id" : "A7",
"name" : "A7",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 85
},
{
"id" : "A8",
"name" : "A8",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 95
},
{
"id" : "A9",
"name" : "A9",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 55
},
{
"id" : "A10",
"name" : "A10",
"leaf" : true,
"iconCls" : "b-icon b-icon-circle",
"capacity" : 15
}
],
events = [
{
"id" : 1,
"aircraft" : "A320",
"airline" : "United Airlines",
"inbound" : "UA1001",
"outbound" : "UA1002",
"passengerCount" : 200,
"max" : 12,
"dollysRequired" : 5,
"gate" : "A1",
"starred" : true,
"departureAirport" : "LAX",
"departureCity" : "Los Angeles",
"arrivalAirport" : "CDG",
"arrivalCity" : "Paris",
"durationUnit" : "h",
"arrivalTime" : "2023-10-06T07:30:00",
"departureTime" : "2023-10-06T09:30:00",
"eventColor" : "red"
},
{
"id" : 2,
"aircraft" : "A320",
"airline" : "United Airlines",
"inbound" : "UA1003",
"outbound" : "UA1004",
"passengerCount" : 180,
"max" : 10,
"departureAirport" : "ARN",
"departureCity" : "Stockholm",
"arrivalAirport" : "JFK",
"arrivalCity" : "New York",
"dollysRequired" : 4,
"gate" : "A1",
"arrivalTime" : "2023-10-06T10:30:00",
"departureTime" : "2023-10-06T12:30:00",
"eventColor" : "#FF0000"
},
{
"id" : 3,
"aircraft" : "A320",
"airline" : "United Airlines",
"inbound" : "UA1005",
"outbound" : "UA1006",
"passengerCount" : 190,
"max" : 11,
"dollysRequired" : 5,
"departureAirport" : "ARN",
"departureCity" : "Stockholm",
"arrivalAirport" : "JFK",
"arrivalCity" : "New York",
"gate" : "A1",
"arrivalTime" : "2023-10-06T13:30:00",
"departureTime" : "2023-10-06T15:30:00"
},
{
"id" : 4,
"aircraft" : "A330",
"airline" : "Delta Airlines",
"inbound" : "DL2001",
"outbound" : "DL2002",
"passengerCount" : 250,
"max" : 9,
"dollysRequired" : 4,
"departureAirport" : "LAX",
"departureCity" : "Los Angeles",
"arrivalAirport" : "CDG",
"arrivalCity" : "Paris",
"starred" : true,
"gate" : "A2",
"arrivalTime" : "2023-10-06T08:00:00",
"departureTime" : "2023-10-06T10:00:00"
},
{
"id" : 5,
"aircraft" : "A330",
"airline" : "Delta Airlines",
"inbound" : "DL2003",
"outbound" : "DL2004",
"passengerCount" : 240,
"max" : 12,
"departureAirport" : "LAX",
"departureCity" : "Los Angeles",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"dollysRequired" : 6,
"gate" : "A2",
"arrivalTime" : "2023-10-06T11:00:00",
"departureTime" : "2023-10-06T13:00:00"
},
{
"id" : 6,
"aircraft" : "A330",
"airline" : "Delta Airlines",
"inbound" : "DL2005",
"outbound" : "DL2006",
"passengerCount" : 220,
"max" : 10,
"departureAirport" : "LAX",
"departureCity" : "Los Angeles",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"dollysRequired" : 5,
"gate" : "A2",
"arrivalTime" : "2023-10-06T14:00:00",
"departureTime" : "2023-10-06T16:00:00"
},
{
"id" : 7,
"aircraft" : "B737",
"airline" : "American Airlines",
"inbound" : "AA3001",
"outbound" : "AA3002",
"passengerCount" : 180,
"max" : 9,
"departureAirport" : "LAX",
"departureCity" : "Los Angeles",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"dollysRequired" : 3,
"gate" : "A3",
"arrivalTime" : "2023-10-06T09:30:00",
"departureTime" : "2023-10-06T11:30:00"
},
{
"id" : 8,
"aircraft" : "B737",
"airline" : "American Airlines",
"inbound" : "AA3003",
"outbound" : "AA3004",
"passengerCount" : 170,
"max" : 8,
"departureAirport" : "LAX",
"departureCity" : "Los Angeles",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"dollysRequired" : 2,
"gate" : "A3",
"arrivalTime" : "2023-10-06T12:30:00",
"departureTime" : "2023-10-06T14:30:00"
},
{
"id" : 9,
"aircraft" : "B737",
"airline" : "American Airlines",
"inbound" : "AA3005",
"outbound" : "AA3006",
"passengerCount" : 190,
"max" : 11,
"departureAirport" : "LHR",
"departureCity" : "London",
"arrivalAirport" : "ARN",
"arrivalCity" : "Stockholm",
"dollysRequired" : 7,
"gate" : "A3",
"arrivalTime" : "2023-10-06T15:30:00",
"departureTime" : "2023-10-06T17:30:00"
},
{
"id" : 10,
"aircraft" : "B787",
"airline" : "Air France",
"inbound" : "AF4001",
"outbound" : "AF4002",
"passengerCount" : 220,
"departureAirport" : "LHR",
"departureCity" : "London",
"arrivalAirport" : "ARN",
"arrivalCity" : "Stockholm",
"max" : 10,
"dollysRequired" : 3,
"gate" : "A4",
"arrivalTime" : "2023-10-06T10:00:00",
"departureTime" : "2023-10-06T12:00:00"
},
{
"id" : 11,
"aircraft" : "B787",
"airline" : "Air France",
"inbound" : "AF4003",
"outbound" : "AF4004",
"passengerCount" : 210,
"departureAirport" : "LHR",
"departureCity" : "London",
"arrivalAirport" : "ARN",
"arrivalCity" : "Stockholm",
"max" : 13,
"dollysRequired" : 7,
"gate" : "A4",
"arrivalTime" : "2023-10-06T13:00:00",
"departureTime" : "2023-10-06T15:00:00"
},
{
"id" : 12,
"aircraft" : "B787",
"airline" : "Air France",
"inbound" : "AF4005",
"outbound" : "AF4006",
"passengerCount" : 230,
"max" : 12,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "ARN",
"arrivalCity" : "Stockholm",
"dollysRequired" : 5,
"gate" : "A4",
"arrivalTime" : "2023-10-06T16:00:00",
"departureTime" : "2023-10-06T18:00:00"
},
{
"id" : 13,
"aircraft" : "B747",
"airline" : "Lufthansa",
"inbound" : "LH5001",
"outbound" : "LH5002",
"passengerCount" : 280,
"max" : 10,
"dollysRequired" : 3,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "ARN",
"arrivalCity" : "Stockholm",
"gate" : "A5",
"arrivalTime" : "2023-10-06T11:30:00",
"departureTime" : "2023-10-06T13:30:00"
},
{
"id" : 14,
"aircraft" : "B747",
"airline" : "Lufthansa",
"inbound" : "LH5003",
"outbound" : "LH5004",
"passengerCount" : 270,
"max" : 9,
"dollysRequired" : 4,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "ARN",
"arrivalCity" : "Stockholm",
"gate" : "A5",
"arrivalTime" : "2023-10-06T14:30:00",
"departureTime" : "2023-10-06T16:30:00"
},
{
"id" : 15,
"aircraft" : "B747",
"airline" : "Lufthansa",
"inbound" : "LH5005",
"outbound" : "LH5006",
"passengerCount" : 290,
"max" : 8,
"dollysRequired" : 3,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "ARN",
"arrivalCity" : "Stockholm",
"gate" : "A5",
"arrivalTime" : "2023-10-06T17:30:00",
"departureTime" : "2023-10-06T19:30:00"
},
{
"id" : 20,
"aircraft" : "A320",
"airline" : "United Airlines",
"inbound" : "UA1003",
"outbound" : "UA1004",
"passengerCount" : 180,
"max" : 9,
"dollysRequired" : 4,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "CPH",
"arrivalCity" : "Copenhagen",
"gate" : "A6",
"arrivalTime" : "2023-10-06T07:30:00",
"departureTime" : "2023-10-06T09:30:00"
},
{
"id" : 21,
"aircraft" : "A320",
"airline" : "United Airlines",
"inbound" : "UA1005",
"outbound" : "UA1006",
"passengerCount" : 190,
"max" : 10,
"dollysRequired" : 3,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "CPH",
"arrivalCity" : "Copenhagen",
"gate" : "A6",
"arrivalTime" : "2023-10-06T10:30:00",
"departureTime" : "2023-10-06T12:30:00"
},
{
"id" : 22,
"aircraft" : "A320",
"airline" : "United Airlines",
"inbound" : "UA1007",
"outbound" : "UA1008",
"passengerCount" : 210,
"max" : 11,
"dollysRequired" : 4,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "CPH",
"arrivalCity" : "Copenhagen",
"gate" : "A6",
"arrivalTime" : "2023-10-06T13:30:00",
"departureTime" : "2023-10-06T15:30:00"
},
{
"id" : 23,
"aircraft" : "A330",
"airline" : "Delta Airlines",
"inbound" : "DL2001",
"outbound" : "DL2002",
"passengerCount" : 250,
"max" : 9,
"dollysRequired" : 4,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "BER",
"arrivalCity" : "Berlin",
"gate" : "A7",
"arrivalTime" : "2023-10-06T08:00:00",
"departureTime" : "2023-10-06T10:00:00"
},
{
"id" : 24,
"aircraft" : "A330",
"airline" : "Delta Airlines",
"inbound" : "DL2003",
"outbound" : "DL2004",
"passengerCount" : 240,
"max" : 8,
"dollysRequired" : 3,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "BER",
"arrivalCity" : "Berlin",
"gate" : "A7",
"arrivalTime" : "2023-10-06T11:00:00",
"departureTime" : "2023-10-06T13:00:00"
},
{
"id" : 25,
"aircraft" : "A330",
"airline" : "Delta Airlines",
"inbound" : "DL2005",
"outbound" : "DL2006",
"passengerCount" : 220,
"max" : 10,
"dollysRequired" : 5,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "BER",
"arrivalCity" : "Berlin",
"gate" : "A7",
"arrivalTime" : "2023-10-06T14:00:00",
"departureTime" : "2023-10-06T16:00:00"
},
{
"id" : 16,
"aircraft" : "B737",
"airline" : "American Airlines",
"inbound" : "AA3001",
"outbound" : "AA3002",
"passengerCount" : 180,
"max" : 9,
"dollysRequired" : 3,
"departureAirport" : "HEL",
"departureCity" : "Helsinki",
"arrivalAirport" : "BER",
"arrivalCity" : "Berlin",
"gate" : "A8",
"arrivalTime" : "2023-10-06T09:30:00",
"departureTime" : "2023-10-06T11:30:00"
},
{
"id" : 17,
"aircraft" : "B737",
"airline" : "American Airlines",
"inbound" : "AA3003",
"outbound" : "AA3004",
"passengerCount" : 170,
"max" : 8,
"dollysRequired" : 2,
"departureAirport" : "BER",
"departureCity" : "Berlin",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"gate" : "A8",
"arrivalTime" : "2023-10-06T12:30:00",
"departureTime" : "2023-10-06T14:30:00"
},
{
"id" : 18,
"aircraft" : "B737",
"airline" : "American Airlines",
"inbound" : "AA3005",
"outbound" : "AA3006",
"passengerCount" : 190,
"max" : 10,
"dollysRequired" : 5,
"departureAirport" : "BER",
"departureCity" : "Berlin",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"gate" : "A8",
"arrivalTime" : "2023-10-06T15:30:00",
"departureTime" : "2023-10-06T17:30:00"
},
{
"id" : 19,
"aircraft" : "B787",
"airline" : "Air France",
"inbound" : "AF4001",
"outbound" : "AF4002",
"passengerCount" : 220,
"max" : 8,
"dollysRequired" : 2,
"departureAirport" : "BER",
"departureCity" : "Berlin",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"gate" : "A9",
"arrivalTime" : "2023-10-06T10:00:00",
"departureTime" : "2023-10-06T12:00:00"
},
{
"id" : 30,
"aircraft" : "B787",
"airline" : "Air France",
"inbound" : "AF4003",
"outbound" : "AF4004",
"passengerCount" : 210,
"max" : 10,
"dollysRequired" : 4,
"departureAirport" : "BER",
"departureCity" : "Berlin",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"gate" : "A9",
"arrivalTime" : "2023-10-06T13:00:00",
"departureTime" : "2023-10-06T15:00:00"
},
{
"id" : 31,
"aircraft" : "B787",
"airline" : "Air France",
"inbound" : "AF4005",
"outbound" : "AF4006",
"passengerCount" : 230,
"max" : 9,
"dollysRequired" : 3,
"departureAirport" : "BER",
"departureCity" : "Berlin",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"gate" : "A9",
"arrivalTime" : "2023-10-06T16:00:00",
"departureTime" : "2023-10-06T18:00:00"
},
{
"id" : 32,
"aircraft" : "B747",
"airline" : "Lufthansa",
"inbound" : "LH5001",
"outbound" : "LH5002",
"passengerCount" : 280,
"max" : 12,
"dollysRequired" : 7,
"departureAirport" : "BER",
"departureCity" : "Berlin",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"gate" : "A10",
"arrivalTime" : "2023-10-06T11:30:00",
"departureTime" : "2023-10-06T13:30:00"
},
{
"id" : 33,
"aircraft" : "B747",
"airline" : "Lufthansa",
"inbound" : "LH5003",
"outbound" : "LH5004",
"passengerCount" : 270,
"max" : 10,
"dollysRequired" : 5,
"departureAirport" : "BER",
"departureCity" : "Berlin",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"gate" : "A10",
"arrivalTime" : "2023-10-06T14:30:00",
"departureTime" : "2023-10-06T16:30:00"
},
{
"id" : 34,
"aircraft" : "B747",
"airline" : "Lufthansa",
"inbound" : "LH5005",
"outbound" : "LH5006",
"passengerCount" : 290,
"max" : 8,
"dollysRequired" : 4,
"departureAirport" : "BER",
"departureCity" : "Berlin",
"arrivalAirport" : "LHR",
"arrivalCity" : "London",
"gate" : "A10",
"arrivalTime" : "2023-10-06T17:30:00",
"departureTime" : "2023-10-06T19:30:00"
}
];
class Flight extends EventModel {
static get fields() {
return [
{ name : 'resourceId', dataSource : 'gate' },
{ name : 'startDate', dataSource : 'arrivalTime' },
{ name : 'endDate', dataSource : 'departureTime' },
{ name : 'durationUnit', defaultValue : 'hour' },
{ name : 'dollysRequired', type : 'number', defaultValue : 0 },
{ name : 'max', type : 'number', defaultValue : 10 },
{ name : 'starred', type : 'boolean' },
'inbound',
'outbound',
{ name : 'departureAirport', defaultValue : '' },
{ name : 'departureCity', defaultValue : '' },
'arrivalCity'
];
}
}
new Scheduler({
appendTo : 'container',
eventStyle : 'colored',
allowOverlap : false,
rowHeight : 70,
barMargin : 5,
columns : [
{
text : 'Gate',
field : 'name',
cellCls : 'gate',
editor : false
}
],
features : {
scheduleTooltip : false,
eventDragCreate : false,
eventTooltip : {
template : ({ eventRecord }) => `
<div class="b-timing-container">
<div class="b-departure-datetime">
<span class="b-departure-time">${DateHelper.format(eventRecord.startDate, 'LST')}</span>
<span class="b-departure-date">${DateHelper.format(eventRecord.startDate, 'ddd, DD MMM')}</span>
</div>
<div class="b-arrival-datetime">
<span class="b-arrival-time">${DateHelper.format(eventRecord.endDate, 'LST')}</span>
<span class="b-arrival-date">${DateHelper.format(eventRecord.endDate, 'ddd, DD MMM')}</span>
</div>
</div>
<div class="b-icons-container">
<i class="b-circle"></i>
<div class="b-vertical-line">
<i class="b-fa b-fa-plane-up"></i>
</div>
<i class="b-fa b-fa-map-marker-alt"></i>
</div>
<div class="b-airports-container">
<div class="b-departure-info">
<span class="b-departure-city">${eventRecord.departureCity}</span>
<span class="b-departure-airport">${eventRecord.departureAirport}</span>
</div>
<span class="b-duration">${eventRecord.fullDuration}</span>
<div class="b-arrival-info">
<span class="b-arrival-city">${eventRecord.arrivalCity}</span>
<span class="b-arrival-airport">${eventRecord.arrivalAirport}</span>
</div>
</div>
`
},
eventEdit : {
items : {
// ref for an existing field
resourceField : {
// Change its label
label : 'Gate'
}
}
}
},
startDate : new Date(2023, 9, 6, 6, 30),
endDate : new Date(2023, 9, 8, 6),
tickSize : 100,
snap : true,
viewPreset : {
base : 'hourAndDay',
headers : [
{ unit : 'minute', increment : 30, dateFormat : 'LT' }
]
},
timeResolution : {
increment : 5,
unit : 'minute'
},
crudManager : {
autoLoad : true,
eventStore : {
modelClass : Flight,
data : events,
},
resourceStore : {
data : resources,
},
// This config enables response validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only so please set it to false for production systems.
validateResponse : true
},
eventRenderer({ eventRecord, resourceRecord }) {
return [
{
class : 'header',
children : [
{
class : 'inbound',
text : eventRecord.inbound
},
{
class : 'aircraft',
children : [
{ tag : 'i', class : 'b-fa b-fa-plane-departure' },
eventRecord.aircraft
]
},
{
class : 'outbound',
text : eventRecord.outbound
}
]
},
{
class : 'footer',
children : [
{
tag : 'i',
class : {
'b-fa' : 1,
'b-fa-star' : 1,
starred : eventRecord.starred
}
},
...new Array(eventRecord.max).fill().map((item, i) => ({
class : {
box : 1,
filled : i < eventRecord.dollysRequired
},
dataset : {
btip : `${i + 1} dollys required`
}
})),
{
tag : 'span',
class : 'value',
text : `${eventRecord.dollysRequired} / ${eventRecord.max}`
}
]
}
];
},
onEventClick({ eventRecord, event }) {
const
{ target } = event,
{ classList } = target;
if (classList.contains('b-fa-star')) {
eventRecord.starred = !eventRecord.starred;
}
else if (classList.contains('box')) {
eventRecord.dollysRequired = Array.from(target.parentElement.children).indexOf(target);
}
}
});
Idle
