How to use FullCalendar in Adonis

I am trying to use the FullCalendar ( https://fullcalendar.io/ ) module in one of my edge views.

Here is an example from there web site of how to use it.

I would like to stick with NPM rather than the CDN source, is this possible with Adonis and if so, how would I go about it?

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin ]
  });

  calendar.render();
});

@SouthRibbleTech Hi!

Include this code inside your client-side main application file and don’t forget to use a bundler like Webpack.

1 Like

Thanks @Melchyore, I should have been more specific, I am using Adonis full stack. I have ended up just getting the source from CDN. If I need to a later date, I will investigate how to do it with NPM, but I am not sure if it’s possible with full stack Adonis.

2 Likes

Hey @SouthRibbleTech! :wave:

What you are trying to do is out of the scope of Adonis.
You need a bundler like Webpack or Rollup to bundle your frontend code.

You can use a wrapper like Laravel Mix or Symfony Encore to facilitate this for you.

2 Likes

@SouthRibbleTech Using a module bundler will allow you to import files to your client-side javascript.

If you are using Laravel Mix, here’s a little setup:
yarn add --dev laravel-mix

Then in the root application, create a new file webpack.mix.js

Inside the new created file, insert this:

const mix = require('laravel-mix')

mix.disableSuccessNotifications()
  .setPublicPath('public')
  .js('resources/assets/js/app.js', 'public/js')
  .styles([
    'resources/assets/css/foo.css',
    'resources/assets/css/bar.css',
  ], 'public/css/app.css')
  .version()

Note that if you are using SASS, you can remove the .styles part and replace it with

.sass('resources/assets/js/app.scss', 'public/css')

just like js.

Learn more about Laravel Mix here

Now, open package.json and add these lines to scripts:

    "mix": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

“mix” script will bundle your javascript and css files.
“watch” script will bundle your files too but will watch them and bundle them automatically if changes.

Now, you don’t need resources from CDN anymore.

2 Likes