JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Gantt Struggling with Gantt in Angular. Any tips?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #112783
    dadsa
    Participant

    Is Smart Gantt compatible with routing in JavaScript?

    #112789
    Markov
    Keymaster

    Hi,

    Yes, of course. Here is a demo with hash router:

    <div id="app"></div>
    
    <nav>
      <a href="#/gantt">Gantt</a>
      <a href="#/about">About</a>
    </nav>
    
    <script type="module">
    import 'smart-webcomponents/source/styles/smart.default.css';
    import 'smart-webcomponents/source/modules/smart.ganttchart.js';
    
    function loadGantt() {
      const container = document.getElementById('app');
      container.innerHTML = 

    <smart-gantt-chart id=”gantt” view=”week” durationUnit=”day”></smart-gantt-chart>
    `;

    const gantt = document.getElementById(‘gantt’);
    gantt.dataSource = [
    {
    label: ‘Project A’,
    dateStart: ‘2025-07-01’,
    dateEnd: ‘2025-07-15’,
    type: ‘task’
    }
    ];
    }

    function loadAbout() {
    document.getElementById(‘app’).innerHTML = ‘<h2>About Page</h2>’;
    }

    window.addEventListener(‘hashchange’, route);

    function route() {
    const hash = location.hash;
    if (hash === ‘#/gantt’) {
    loadGantt();
    } else {
    loadAbout();
    }
    }

    route(); // Initial load
    </script>`

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.htmlelements.com/

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