☒ 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.
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
☒ 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.
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)
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.
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.
☒ 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.
☒ 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?
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.
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/
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
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
☒ 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.
☒ 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?
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.
☒ 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. :)
☒ 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. :/
☒ 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.
☒ 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:
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)
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.
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
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.
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?
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.
I've bumped up the version of fullcalendar to v5.9.0 but still not displaying any events.
rails 6.1.4
package.json
"dependencies": {
end_date = params[:end]
These two params are nil
static targets = ["calendar", "modal", "dismiss", "start_time", "end_time"] closeModal() { this.modalTarget.style.display = "none" }And in the view
I haven't tested this out, but it should be relatively accurate.
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!
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
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"); },<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/
closeModal(event) {event.preventDefault();
this.modalTarget.removeAttribute("style")
//_this.modalTarget.style.display = "none"
}
I'm getting this error:
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. :)
import { Controller } from "stimulus"import { Controller } from "@hotwired/stimulus"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. :/
I've been on an Apple M1 for some time now and haven't experienced any issues with bundling the gems.
[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 modulesBut 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
#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. :/
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:
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