[SOLVED] How to use Frappe-Gantt in Laravel blade template

I tried to implement Frappe-Gantt in my Laravel project but I can't load the module in my custom page blade template. Can anybody help me with that?

hupp

2 years ago

Level 11

@nnachev Here is Blog that shows detailed explaination of usage https://blog.logrocket.com/gantt-chart-javascript-frappe-gantt/ in blade file you just have to add empty <svg id="gantt"></svg> and reset all things go from js. Dont forget to add <script src="frappe-gantt.min.js" />

nnachev

2 years ago

Level 1

@hupp thank you. I follow this guide. If I do exactly the same that is described in that blog all works fine. If I try to implement that in Laravel project I can't load required .js files in my custom Blade template. frappe-gantt.min.js is located in node_modules folder. I know that I don't load files from this folder. Where I should copy contents of folder node_modules\frappe-gantt\dist to load Frappe-Gantt .js files in Blade? Obviously I don't know how is right way to load .js in Blade. I tried this code but nothing happens. I copied folder dist in my public folder. Blade template:

<x-filament-panels::page>
  <head>
    <!-- Head Contents -->
    @vite('public/build/frape-gantt/dist/frappe-gantt.min.css')
    <script src="public/build/frappe-gantt/dist/frappe-gantt.min.js"></script>
  </head>

  <div id="text">Test Gant 4</div>

  <div>
    <svg id="gantt">
    </svg>
  </div>

  <script src="public/js/filament/mom/gantt-script.js"></script>

</x-filament-panels::page>

gantt-script.js contains:

import Gantt from '../../../build/frape-gantt/dist/frappe-gantt';

var tasks = [
  {
      id: 'Task 1',
      name: 'Buy hosting',
      start: '2024-01-05',
      end: '2024-01-08',
      progress: 50,
  },
];

var gantt = new Gantt("#gantt", tasks);
document.getElementById("text").innerHTML = "New text!";

I don't know what is wrong.

hupp

2 years ago

Level 11

@nnachev if you get issue with local files you can make try with CND Links

1 like

nnachev

2 years ago

Best Answer

Level 1

@hupp Thank you for the help. I had the syntax wrong for importing CSS and JS files in the Blade template. When I change my Blade by following syntax Frappe-Gantt was loaded correctly.

<x-filament-panels::page>
  <head>
    <link href="{{ asset('css/frappe-gantt.min.css') }}" rel="stylesheet">
    <script type="text/javascript" src="{{ asset('js/frappe-gantt.min.js') }}"></script>
  </head>
  <div id="test">Test Gant</div>
  <div>
    <svg id="gantt">
    </svg>
  </div>
  <script type="text/javascript" src="{{ asset('js/gantt-script.js') }}"></script>
</x-filament-panels::page>

The correct syntax to load CSS and JS in my case is:

<link href="{{ asset('css/frappe-gantt.min.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('js/frappe-gantt.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('js/gantt-script.js') }}"></script>

Loaded CSS and JavaScript files are stored in public folder.

AperZ

2 years ago

Level 1

@nnachev Can I see your js/gantt-script.js code?

nnachev

2 years ago

Level 1

@AperZ I my js/gantt-script.js has nothing special. I use examples from tutorial linked in first answer of @hupp. You can see the link from his post.

hupp

2 years ago

Level 11

@nnachev Hope your issue solved. Please mark this thread as Solved.

Please or to participate in this conversation.