I'm using a npm package called svelte-gantt via this cdn here: npm cdn. However I can't for the life of me get the chart to show in the template, I can't find an example of it being used with django so I'm not sure if it's possible.
What am I doing wrong here for it not to show up? How can I use the package & gantt chart in my django template?
{% extends "home/base.html" %}
{% block content %}
<style>
#example-gantt {
flex-grow: 1;
overflow: auto;
height: 600px;
width: 100px;
}
.container {
display: flex;
overflow: auto;
flex: 1;
}
</style>
<div class="container">
<div id="example-gantt"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/svelte-gantt@4.0.3-beta/index.min.js"></script>
<script>
var options = {};
var gantt = new SvelteGantt({
// target a DOM element
target: document.getElementById('example-gantt'),
// svelte-gantt options
props: options
});
</script>
{% endblock content %}
That is a Svelte Component and of course you can't use it as it is in plain js. Playing around with it i suppose the cdn link to the library is just broken and doesn't actually give you the built js that works agnostic to the framework you are using, one solution could be to just build the component and import the necessary files:
node tools/build
<link rel='stylesheet' href='public/gantt-default.css'>
<link rel='stylesheet' href='dist/css/svelteGantt.css'>
<script src='moment.js'></script>
<script src='dist/index.iife.js'></script>
or use the ES6 imports in your code:
import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt';
(as shown in the guide from the gh-pages branch repo on the creator GitHub)
then use the SvelteGantt as you did.
If you can't build the library by yourself or you don't know how to do it there is already a built one on the creator GitHub:
https://github.com/ANovokmet/svelte-gantt/tree/gh-pages/dist
Keep in mind the component depends from moment.js when used this way. The author stated a few times he is working on removing this dependency too.