title: Fomantic UI: $(...).calendar is not a function
body: <p>I'm running Rails version 5.2.4 Here is the relevant part of my view in Ruby on Rails</p>
  
  <pre><code>      &lt;div class="two fields"&gt;
  
              &lt;div class="field"&gt;
                  &lt;label&gt;Start date and time&lt;/label&gt;
                  &lt;div class="ui calendar" id="standard_calendar"&gt;
                      &lt;div class="ui input left icon"&gt;
                          &lt;i class="calendar icon"&gt;&lt;/i&gt;
                          &lt;input type="text" placeholder="Date/Time"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="field"&gt;
              &lt;label&gt;End time&lt;/label&gt;
                  &lt;div class="ui calendar" id="time_calendar"&gt;
                      &lt;div class="ui input left icon"&gt;
                          &lt;i class="time icon"&gt;&lt;/i&gt;
                          &lt;input type="text" placeholder="Time"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I placed the following code below my view</p>
  
  <pre><code>&lt;script&gt;
  console.log("Before scripts run")
  $('#standard_calendar').calendar();
  $('#time_calendar').calendar({type: 'time'});
  console.log("After scripts run")
  &lt;/script&gt;
  </code></pre>
  
  <p>To make sure the code ran, I put a console.log and it worked fine. However when I try to run the two jquery scripts, it stops at the first and says, </p>
  
  <p><code>$(...).calendar is not a function</code></p>
  
  <p>I've installed the gem, <code>'fomantic-ui-sass'</code> and <code>'jquery-rails'</code>, both of which are working (at least the css for fomantic  is). I've added them to the application.js folder as well which looks like this:</p>
  
  <pre><code>//
  //= require rails-ujs
  //= require activestorage
  //= require turbolinks
  //= require_tree .
  // Loads all Semantic javascripts
  //= require semantic-ui
  // Load jquery
  // = require jquery
  // = require jquery_ujs
  </code></pre>
  
  <p>My <code>app/views/layouts/application.html.erb</code></p>
  
  <pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;%= favicon_link_tag 'spring-cleaners-logos/profile.png' %&gt;
      &lt;title&gt;Spring Cleaners - &lt;%= yield(:title) %&gt;&lt;/title&gt;
      &lt;%= csrf_meta_tags %&gt;
      &lt;%= csp_meta_tag %&gt;
  
      &lt;%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
      &lt;%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="ui secondary  menu"&gt;
        &lt;a class="item" href="/"&gt;
          &lt;%= image_tag 'spring-cleaners-logos/profile.png', alt: 'Logo', class: 'image' %&gt;
          Spring Cleaners
        &lt;/a&gt;
        &lt;div class="right menu"&gt;
          &lt;a class="item"&gt;
            &lt;i class="envelope icon"&gt;&lt;/i&gt;
            Messages
          &lt;/a&gt;
          &lt;a class="item"&gt;
            &lt;i class="user icon"&gt;&lt;/i&gt;
            My Account
          &lt;/a&gt;
          &lt;a class="ui item" href="/logout"&gt;
            Logout
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;h1&gt;&lt;%= yield(:title) %&gt;&lt;h1&gt;
  
      &lt;%= yield %&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>Why isn't it working? How do I fix?</p>