• Home

  • Episodes

  • About

  • Login
    •
    deactivated+1 said over 2 years ago on FullCalendar with StimulusJS :
     ☒  I just changed the importing on the hello_controller (I forgot that, my bad, sorry). Everything is now being compiled correctly (apparently), as you can see:
    [Webpacker] Compiling...
[Webpacker] Compiled all packs in /Users/gonzalezarthur/GitHub/Helpeat/public/packs
[Webpacker] Hash: e0c790754349075d3a1d
Version: webpack 4.46.0
Time: 801ms
Built at: 10/04/2021 12:01:08 AM
                                     Asset       Size       Chunks                         Chunk Names
    js/application-8a05ce69a63ed6a42230.js   1.06 MiB  application  [emitted] [immutable]  application
js/application-8a05ce69a63ed6a42230.js.map   1.07 MiB  application  [emitted] [dev]        application
                             manifest.json  364 bytes               [emitted]              
Entrypoint application = js/application-8a05ce69a63ed6a42230.js js/application-8a05ce69a63ed6a42230.js.map
[./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/controllers sync recursive _controller\.js$] ./app/javascript/controllers sync _controller\.js$ 215 bytes {application} [built]
[./app/javascript/controllers/calendar_controller.js] 3.64 KiB {application} [optional] [built]
[./app/javascript/controllers/hello_controller.js] 3.39 KiB {application} [optional] [built]
[./app/javascript/controllers/index.js] 408 bytes {application} [built]
[./app/javascript/packs/application.js] 514 bytes {application} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]
    + 25 hidden modules

    But the calendar is not being displayed yet. Here is my code:

    #calendar_controller.js
    import { Controller } from "@hotwired/stimulus"
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import Rails from '@rails/ujs'

export default class extends Controller {
  static targets = [ "calendar" ]

  connect() {
    let calendar = new Calendar(this.calendarTarget, {
			events: '/events.json',
			editable: true,
			navLinks: true,
			headerToolbar: { center: 'dayGridMonth,timeGridWeek,timeGridDay' },
			plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin]
		})
		calendar.render()
  }
}

    #javascript/packs/application.js
    // This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "controllers"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

    #home/index.html.erb
    <%= content_tag :div, data: { controller: 'calendar' } do %>
  <%= tag :div, data: { target: 'calendar.calendar' } %>
<% end %>

    #app/views/layout/application.html.erb (I don't know if I need to import something else in the <head> tag)
    <!DOCTYPE html>
<html>
  <head>
    <title>Helpeat</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

    Everything seems to be correct. :/
    0 0 0