How to cause a patch event render from within Javascript

I’m using a calendar library and within that I have a callback for when I’ve selected a date, I’d like to patch render my app to load a modal to complete the form and create the event in the database. I can obviously just use window.location.href = url; but I want to avoid causing a full page render.

So within a Liveview Hook, how can I execute this? After digging through the live view code I did find this, and I was thinking I could just call something like pushHistoryPatch in the JS but there doesn’t seem to be a direct way to do this.

I’ve also tried to create a synthetic event, by creating a link tag with the right tags but I’ve not managed to get this working either :frowning:

Rather than patching from the client, try pushing an event back via a client side hook to trigger the patch from the server.

# pseudocode that assumes the calendar library callback dispatches an event
# to window or the element with the LiveView client side hook

# HEEx template
<div id="my-calendar" phx-hook="MyCalendar" />

# app.js
let Hooks = {}
Hooks.MyCalendar = {
  mounted() {
    window.addEventListener("date-selected", e => {
      this.pushEvent("date-selected", {})
    // or alternatively
    this.el.addEventListener("date-selected", e => {
      this.pushEvent("date-selected", {})

let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, ...})

# LiveView or LiveComponent
def handle_event("date-selected", params, socket) do
  {:noreply, push_patch(socket, to: ~p"/my_modal")}

Sorry for asking this, but I always get confused by what people are asking.

Is the scenario you have a calandar with all the dates, someone clicks the date and a modal form opens that allows the user to create an event on that date? If so you don’t need hooks at all, which is why I’m confused.

Sorry for asking this, but I always get confused by what people are asking.

Well specifcally I’m using a library called fullcalendar.js, and with this I want an experience where when you highlight a period of the day you can creat an event for that. With this I’m triggering a javascript callback, rather than click some DOM element on the page (well I am doing that too but I don’t have access to that) so I needed someway in the callback to that function to be able to trigger a modal form to render.

Hopefully that makes sense why I needed hooks, a good example of what I’m doing can be found in this repo