Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #112978
    natejacobson
    Participant

    How do I conditionally format rows or items in Smart Scheduler in JavaScript?

    #113001
    Markov
    Keymaster

    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/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.