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/