Reply To: How do I render Angular child components inside Scheduler cells?

[Markov]

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/