Doing what exactly?

You have to understand that once the page is loaded in the browser there is no inherent “connection” between the browser page and the Phoenix controller.

It is up to you to add this functionality through FullCalendar’s event hooks.

In dayClick you could simply set something like

location.href = 'http://localhost:4000/date/2018/03/01'

to navigate to a new page (see Window.location).

If you have your routes set up something like this:

date_path  GET     /date/:year/:month/:day  HelloWeb.DateController :edit

then that request would be routed to the DateController to generate the new page which would then be loaded in the browser.

Sounds like you want something like a modal rather than a submittable form.

See Considerations for Styling a Modal (demo) to see how the HTML/CSS/JS elements interact to achieve the basic desired result with vanilla JS. Of course you are going to still have to add:

• the input fields (and a cancel button)
• the dayClick code to fetch the data from Phoenix with fetch (some people prefer axios)
• the handler for the returned promise that populates and opens the modal when the response arrives.
• The JS code to send the updated information to Phoenix when the modal is closed (but not canceled).

For improved performance you may want to consider having all the detailed information relating to any dates already on the screen inside the browser so that you can grab the information from there and only send the changes back to Phoenix while you update your local copy.

For example TodoMVC maintains an array of todo objects as a model (though in your case use of LocalStorage would be overkill) - any information in the DOM is simply a copy of information inside that client side model.

There is an example todo backend implementation with an older version of Phoenix here (demo).

In particular look at the router.ex and todo_controller.ex.

In general I wouldn’t pay any attention to the JavaScript client used here because it’s ancient. It uses Backbones.js fetch.

You can read about making requests from js using XMLHttpRequest here or fetch here.

For XMLHttpRequest it would be something like this, probably (adapted from https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest)

var xhr = new XMLHttpRequest();
var endpoint = "/api/calendar";
var payload = JSON.stringify({startDate: startDate, endDate: endDate});
xhr.open("POST", endpoint);

xhr.setRequestHeader("content-type", "application/json");

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

xhr.send(payload);

And for fetch (adapted from https://stackoverflow.com/questions/29775797/fetch-post-json-data)

fetch("/api/calendar", {
  headers: {
    "accept": "application/json",
    "content-type": "application/json"
  },
  method: "POST",
  body: JSON.stringify({startDate: startDate, endDate: endDate})
})
.then(function(resp) { console.log(resp) })
.catch(function(resp) { console.log(resp) })