Hi,
Conditional formatting for events
You can use eventRender to modify event appearance dynamically.
const scheduler = document.getElementById('scheduler');
scheduler.dataSource = [
{ label: 'Meeting', dateStart: '2025-10-01T09:00', dateEnd: '2025-10-01T10:00', status: 'urgent' },
{ label: 'Lunch', dateStart: '2025-10-01T12:00', dateEnd: '2025-10-01T13:00', status: 'normal' }
];
// Apply styles based on event status
scheduler.eventRender = function(event, element) {
if (event.status === 'urgent') {
element.style.backgroundColor = '#FF4D4F'; // red
element.style.color = '#FFFFFF';
} else if (event.status === 'normal') {
element.style.backgroundColor = '#1890FF'; // blue
}
};
Best regards,
Markov
Smart UI Team
https://www.htmlelements.com/