Episodes
slawikus said almost 2 years ago on FullCalendar with StimulusJS :
I cannot get modal to work, apparently bootstrap css classes are not available in the new rails project. How one can fix that?

David Kimura PRO said almost 2 years ago on FullCalendar with StimulusJS :
  slawikus Have a look at the CSS in the code at app/assets/stylesheets/application.css

The modal stuff isn't part of the Full Calendar ui, but some simple css can be used to create the modals. For a more complete solution, you should also have a cancel button which would then trigger for the modal to be closed.





slawikus said almost 2 years ago on FullCalendar with StimulusJS :
Thank you!

coltonmcbride1 said over 1 year ago on FullCalendar with StimulusJS :
Can you do a tutorial about how to integrate this with Google Calendar? I don't need the ability to create events directly in the application just pull that info from Google calendar

David Kimura PRO said over 1 year ago on FullCalendar with StimulusJS :
  coltonmcbride1 have you seen their docs on this? https://fullcalendar.io/docs/google-calendar It looks to be fairly applicable to what you're asking and also has fairly minor changes from what this episode covers.

TEST
events from Google Calendar - Docs | FullCalendar

FullCalendar can display events from a public Google Calendar.

https://fullcalendar.io/docs/google-calendar


coltonmcbride1 said over 1 year ago on FullCalendar with StimulusJS :
  David Kimura  I got that figured out thanks for pointing out this doc, it's working!

devkinoti said 10 months ago on FullCalendar with StimulusJS :
Hey Im currently getting this error. I'm at the  05:21min in the tutorial

application.js:267 Error connecting controller

TypeError: Cannot read property '__k' of undefined
    at S (preact.module.js:343)
    at DelayedRunner.Calendar._this.handleRenderRequest [as drainedOption] (main.js:46)
    at DelayedRunner.drained (main.js:8347)
    at DelayedRunner.tryDrain (main.js:8325)
    at DelayedRunner.request (main.js:8274)
    at Calendar.render (main.js:103)
    at extended.connect (calendar_controller.js:20)
    at Context.connect (context.js:24)
    at Module.connectContextForScope (module.js:37)
    at Router.scopeConnected (router.js:112)

How do I fix this?

David Kimura PRO said 10 months ago on FullCalendar with StimulusJS :
  devkinoti   What version of Full Calendar are you using? They seem to change their API with quite a few breaking changes between versions.

devkinoti said 10 months ago on FullCalendar with StimulusJS :
Hey David,  I'm using v5.8.0.

Found the solution within their git repository closed issues: https://github.com/fullcalendar/fullcalendar/issues/5621
Ideally the error is tied to whether you have a valid DOM object or not.

A simple typo triggers it.

The TypeError: Cannot read property '__k' of undefined is a slightly misleading/unclear error message.

devkinoti said 10 months ago on FullCalendar with StimulusJS :
Hey, is there a way of fixing/debugging why events dont display on the calendar?

I've bumped up the version of fullcalendar to v5.9.0 but still not displaying any events.

devkinoti said 10 months ago on FullCalendar with StimulusJS :
My setup
rails 6.1.4


package.json
  "dependencies": {
    "@fullcalendar/core": "^5.9.0",
    "@fullcalendar/daygrid": "^5.9.0",
    "@fullcalendar/interaction": "^5.9.0",
    "@fullcalendar/timegrid": "^5.9.0",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.0",
    "moment": "^2.29.1",
    "preact": "^10.5.14",
    "stimulus": "^2.0.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }



devkinoti said 10 months ago on FullCalendar with StimulusJS :
start_date = params[:start]
end_date = params[:end]

These two params are nil

brendan.feltrupexum PRO said 10 months ago on FullCalendar with StimulusJS :
Great tutorial! This is the one that really pushed me to become a member. I was wondering as you stated about adding a close button on the modal. As I see you have a modal running through javascript that adds a style.display="block" to the modal to open. Since thats handled partly through the js code would you need to write that in js too. Sorry I am really lost when it comes to that part. Any help is appreciated. 

David Kimura PRO said 10 months ago on FullCalendar with StimulusJS :
  brendan.feltrupexum If you did add a cancel button, it could be an action when you click on it, it will execute a function. Then in the stimulus controller, you could dismiss the modal.

static targets = ["calendar", "modal", "dismiss", "start_time", "end_time"]

closeModal() {
  this.modalTarget.style.display = "none"
}

And in the view

<div class="modal-footer">
  <%= button_tag "Cancel", "data-action": "calendar#closeModal" %>
  <%= form.submit class: 'btn btn-primary' %>
</div>

I haven't tested this out, but it should be relatively accurate.

brendan.feltrupexum PRO said 10 months ago on FullCalendar with StimulusJS :
  David Kimura Sorry in advance! JS is not my strong suit. I'm still learning and its hard to keep up with all of it. 

This looks like it would work, but it keeps throwing an error with unknown option "closeModal". The modal does close but it seems to be refreshing the page to do this. I assume thats not supposed to happen. I see you declared "dismiss" in the targets but there is no further reference, maybe Im not seeing a hook to that. Originally when loading this I got another error about the closeModal not defined. 

I made one edit (in my quest to see what I am doing wrong) which still reads the same in source from reading stimulus/rails docs. You tell me if this is better or worse syntax?  
<%= button_tag "Cancel", data: { action: "calendar#closeModal"} %>

Thanks again!


brendan.feltrupexum PRO said 10 months ago on FullCalendar with StimulusJS :
For those wanting to make the box selectable and the date number zoom to the daily grid this is my edits: 

selectable: true,

navLinkDayClick: function(date, jsEvent) {
        calendar.changeView('timeGridDay', date);
        },

    
      select: function(info) {
        _this.modalTarget.style.display = "block"
        _this.start_timeTarget.value = info.start
        _this.end_timeTarget.value = info.end
        },

I added the selectable to the options and added the select function with the modal part and changed the naveLinkDayClick to the changeView

brendan.feltrupexum PRO said 10 months ago on FullCalendar with StimulusJS :
  David Kimura  On top of it reloading its actually adding events to the calendar. Like its submitting the blank form. 

David Kimura PRO said 10 months ago on FullCalendar with StimulusJS :
On the cancel button? You may need to pass the event into the closeModal function and then event.preventDefault()

brendan.feltrupexum PRO said 10 months ago on FullCalendar with StimulusJS :
I tried just using the one supplied along with the event.preventDefault and still errors and adding blank events into calendar. I have spent a few hours reading stimulus controller docs and here is what I have tried to do and still nothing. I could be writing this out wrong, but there is a removeAttribute that can be done and I was thinking this might skip any of the loops. 

calendar_controller.js
select: function (info) {
        _this.modalTarget.style.display = "block"
        _this.start_timeTarget.value = info.start
        _this.end_timeTarget.value = info.end
        }, 


        closeModal(event) {
            event.preventDefault()
            _this.modalTarget.removeAttribute("style");
          },
index.html.erb
<div class="modal-footer">
            <%= button_tag "Close", data: { action: "calendar#closeModal"} %>
            <%= form.submit class: 'btn btn-primary' %>
          </div>

Even after trying to add this. It still sends a post command adding a blank event to the calendar. I cannot wrap my head around this one. By the way this is one of the resources I am following attempting to figure this out: https://tighten.co/blog/stimulus-101-building-a-modal/

brendan.feltrupexum PRO said 10 months ago on FullCalendar with StimulusJS :
Okay, so tinkering around again I moved it outside the connect() function and it works!!! No more posting and no more adding random events. So my text above for the code is correct, just move
  closeModal(event) {
    event.preventDefault();
    this.modalTarget.removeAttribute("style")
    //_this.modalTarget.style.display = "none"
  }
 to below 
calendar.render() 
}
Make sure its after the } so its outside the loop. 

deactivated+1 said 8 months ago on FullCalendar with StimulusJS :
Do I need to use FullCalendar together with Bootstrap? Because I'm building a rails app using Tailwind as my css framework, and I did everything you did in the video until the part you render the calendar for the first time and in my app the calendar doesn't appear at all. :/

I'm getting this error:
ERROR in ./app/javascript/controllers/index.js
Module not found: Error: Can't resolve 'stimulus' in '/Users/gonzalezarthur/GitHub/Helpeat/app/javascript/controllers'
 @ ./app/javascript/controllers/index.js 3:0-39 5:18-29
 @ ./app/javascript/packs/application.js

ERROR in ./app/javascript/controllers/hello_controller.js
Module not found: Error: Can't resolve 'stimulus' in '/Users/gonzalezarthur/GitHub/Helpeat/app/javascript/controllers'
 @ ./app/javascript/controllers/hello_controller.js 29:0-38 50:2-12
 @ ./app/javascript/controllers sync _controller\.js$
 @ ./app/javascript/controllers/index.js
 @ ./app/javascript/packs/application.js

ERROR in ./app/javascript/controllers/index.js
Module not found: Error: Can't resolve 'stimulus/webpack-helpers' in '/Users/gonzalezarthur/GitHub/Helpeat/app/javascript/controllers'
 @ ./app/javascript/controllers/index.js 4:0-66 9:17-39
 @ ./app/javascript/packs/application.js

ERROR in ./app/javascript/controllers/calendar_controller.js
Module not found: Error: Can't resolve 'stimulus/webpack-helpers' in '/Users/gonzalezarthur/GitHub/Helpeat/app/javascript/controllers'
 @ ./app/javascript/controllers/calendar_controller.js 22:0-66
 @ ./app/javascript/controllers sync _controller\.js$
 @ ./app/javascript/controllers/index.js
 @ ./app/javascript/packs/application.js

David Kimura PRO said 8 months ago on FullCalendar with StimulusJS :
  deactivated+1 You shouldn't have to use Bootstrap with FullCalendar. This issue that you're experiencing is likely due to the changes in Stimulus. They changed the path to "@hotwired/stimulus" instead of "stimulus" when importing the library.

deactivated+1 said 8 months ago on FullCalendar with StimulusJS :
  David Kimura  But Should I install Stimulus JS through Webpacker as you did in the video and then just import as "@hotwired/stimulus"? Or do I need to install Stimulus in a different way?

David Kimura PRO said 8 months ago on FullCalendar with StimulusJS :
If you're using webpacker currently, then I would still go that route. If you're just starting out a new application, I would probably go the esbuild route from jsbundling-rails. This is going to be one of the more supported options in the long term.

deactivated+1 said 8 months ago on FullCalendar with StimulusJS :
  David Kimura One more thing! Let me know if I'm right. To install Stimulus through jsbundling-rails I need first to install `gem jsbundling-rails` and then install `stimulus-rails`, and then run `rails stimulus:install` right? I'm guessing this based on the Hotwired's Stimulus-rails GitHub repo, but this is not clear enough for me.

I'm asking this because I never did this before, also because I'm working on the most complex application I've ever tried to implement. :)

David Kimura PRO said 8 months ago on FullCalendar with StimulusJS :
  deactivated+1  That's one way. This looks right. I'd look at Hotwire which includes turbo and stimulus.

deactivated+1 said 8 months ago on FullCalendar with StimulusJS :
  David Kimura Well... It seems that jsbundling does not support Apple Silicon yet (I have a Mac M1, and a lot of errors related to the system architecture were displayed). I got back to webpacker in order to install stimulus, and even though I change the import statement from:
import { Controller } from "stimulus"
to
import { Controller } from "@hotwired/stimulus"
the following errors persists:
ERROR in ./app/javascript/controllers/hello_controller.js
Module not found: Error: Can't resolve 'stimulus' in '/Users/gonzalezarthur/GitHub/Helpeat/app/javascript/controllers'
 @ ./app/javascript/controllers/hello_controller.js 29:0-38 50:2-12
 @ ./app/javascript/controllers sync _controller\.js$
 @ ./app/javascript/controllers/index.js
 @ ./app/javascript/packs/application.js

ERROR in ./app/javascript/controllers/index.js
Module not found: Error: Can't resolve 'stimulus/webpack-helpers' in '/Users/gonzalezarthur/GitHub/Helpeat/app/javascript/controllers'
 @ ./app/javascript/controllers/index.js 4:0-66 9:17-39
 @ ./app/javascript/packs/application.js

I've been searching a lot on the internet to learn how to solve this but I didn't find anything specific related to this error. :/


David Kimura PRO said 8 months ago on FullCalendar with StimulusJS :
  deactivated+1 Did you make the change in the hello_controller as well?
I've been on an Apple M1 for some time now and haven't experienced any issues with bundling the gems.

deactivated+1 said 8 months ago on FullCalendar with StimulusJS :
  David Kimura   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. :/

deactivated+1 said 8 months ago on FullCalendar with StimulusJS :
I just saw an error being generated by an import in the app/javascript/controllers/index.js file:
import { definitionsFromContext } from "stimulus/webpack-helpers"

Then I saw in the Stimulus documentation that this definitionsFromContext component should be imported through:
import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"

I did this, and the following error persists:
ERROR in ./app/javascript/controllers/index.js
Module not found: Error: Can't resolve '@hotwired/stimulus-webpack-helpers' in '/Users/gonzalezarthur/GitHub/Helpeat/app/javascript/controllers'
 @ ./app/javascript/controllers/index.js 5:0-76 10:17-39
 @ ./app/javascript/packs/application.js

David Kimura PRO said 8 months ago on FullCalendar with StimulusJS :
  deactivated+1 You may need to do 

yarn add @hotwired/stimulus-webpack-helpers



jclarke PRO said 4 months ago on FullCalendar with StimulusJS :
Just wanted to drop a quick note that you can't have a method in your stimulus controller called data as it seems to conflict with the Stimulus Values api.

mark.nelson PRO said 3 months ago on FullCalendar with StimulusJS :
Wanted to see if this would work with Rails 7 and ES Build. Can get the calendar to render but  without Bootstrap the styling is incorrect. It is not obvious from the FullCalendar site what a base configuration for CSS should be (and none seemed to work). Any ideas on how to proceed to get a minimum Tailwind CSS configuration that will render this properly?



The FullCalendar site does give some guidance on ES6 build here: https://fullcalendar.io/docs/initialize-es6 but this does not cover CSS.

This link is relevant: https://github.com/fullcalendar/fullcalendar/issues/5868


Login to Comment