Fullcalendar.io and general js question with phoenix

Hello,
I am a total newbie to Phoenix and I have always tried to use as little js as possible in rails or asp.net so I am not very good at that either… be patient, please :slight_smile:
I’m trying to follow along this tutorial, only in phoenix : full calendar in rails but I have no idea on how to set it up it all seems so confusing. I’ve looked on the forum and the docs but I still really don’t get it. I tried following this example too sample but it didn’t work and i think some files were not committed.
I added some files to my static/js folder like jquery, moment and fullcalendar.js. Do I have to import them somehow in the app.js? I used static_path(conn, filename) in the template but it did not work it throws errors. If I want to keep all my js outside the templates when I create a new file do I have to treat it the same as libraries and import it in app.js or do whatever is required to do in order to make it work?
In a lot of ways while using phoenix it is all frustrating and complex and I always miss the old frameworks during the initial frustration, but when I understand its beauty I end up loving phoenix even more :slight_smile: So Please give me a hand
understand this
Thank you as always
Carlo

Ok, so I’ve tried another approach: I installed the 3 packages via npm, imported them in app.js and added fullcalendar and moment to npm whitelist and jquery to global. I run brunch build, but I still get $ is undefined in the console… I am so lost

I have the following at the bottom of my brunch config (with some irrelevant things removed):

  npm: {
    enabled: true,
    styles: {
      fullcalendar: ['dist/fullcalendar.min.css']
    },
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
      moment: 'moment'
    }
  }

I think what you are missing is the $: 'jquery' line. Hopefully this helps.

hi thank you for the reply :slight_smile:
My brunch-config looks like this:

 npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
    },
    whitelist: ["fullcalendar" , "moment"]
  }