Discovering a way to showcase every event a user is linked to, employing Fullcalendar Rails

Here is the current model structure:

class User < ActiveRecord::Base
 has_and_belongs_to_many :event_series
 has_many :events, through: :event_series
end

class Event < ActiveRecord::Base
 belongs_to :event_series
end

class EventSeries < ActiveRecord::Base
 has_and_belongs_to_many :users
 has_many :events
end

class UserEventSeries < ActiveRecord::Base
 belongs_to :event
 belongs_to :user
end

A user is assigned to an event series, which contains multiple events. When a user logs in and accesses their dashboard, I want to utilize Fullcalendar to display all events that the user is currently associated with.

I have successfully retrieved all of the user's events using jbuilder and generated JSON data. However, these events are not displaying on the calendar located at http://localhost:3000/users/1.

View the JSON data at http://localhost:3000/users/1.json:

{
"events": [{
    "all_day": false,
    "created_at": "2017-04-06T14:16:24-05:00",
    "description": "sdsdsdsdsdd",
    "endtime": "2017-04-06T15:16:00-05:00",
     ...
}, {...and so on   

Jbuilder file: show.json.jbuilder

json.events @user.events  

Fullcalendar Script:

$(document).ready(function(){
   $('#calendar').fullCalendar({
    editable: false,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'agendaWeek',
    height: 500,
    slotMinutes: 15,
    events: "/users/1.json",
    timeFormat: 'h:mm t{ - h:mm t} ',
    dragOpacity: "0.5",
    eventClick:  function(event, jsEvent, view) {
      $('#modalTitle').html(event.title);
      $('#modalBody').html(event.description);
      $('#eventUrl').attr('href',event.url);
      $('#fullCalModal').modal();
    },
  });
});

Answer ā„–1

One effective method for troubleshooting is to utilize callback functions.

Why not give the following code a try and check if it returns the desired outcome?

$(document).ready(function(){
   $('#calendar').fullCalendar({
    editable: false,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'agendaWeek',
    height: 500,
    slotMinutes: 15,
    eventSources: [
      {
        url: '/users/1.json',
        type: 'GET',
        success: function (response) {
          console.log(response);
        }
        error: function(response) {
          console.log(response);
        }
      }
    ]
    // events: "/users/1.json",
    timeFormat: 'h:mm t{ - h:mm t} ',
    dragOpacity: "0.5",
    eventClick:  function(event, jsEvent, view) {
      $('#modalTitle').html(event.title);
      $('#modalBody').html(event.description);
      $('#eventUrl').attr('href',event.url);
      $('#fullCalModal').modal();
    },
  });
});

If you can see the expected data in the console log, then the issue may not lie with your Rails backend.

Answer ā„–2

I had to make some adjustments to the jbuilder file due to an error in the JSON format, here is what I did:

json.array! @user.events do |event|
  date_format = event.all_day? ? '%Y-%m-%d' : '%Y-%m-%dT%H:%M:%S'
  json.id event.id
  json.title event.title
  json.start event.starttime.strftime(date_format)
  json.end event.endtime.strftime(date_format)

  json.allDay event.all_day? ? true : false
  json.update_url event_path(event, method: :patch)
  json.edit_url edit_event_path(event)
end 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Javascript to add hovering effects that demonstrate sophistication and style

I have a question : Here is the HTML code snippet: <div class="a b"> <span class="one">Success ONE</span> <span class="two">ONE</span> </div> <div class="a b"> <span class="one">Success TWO< ...

Creating SVG paths using coordinates for THREE.js

I copied the exact code from this ThreeJs Example designed for generating a three-dimensional City Model. I've created an SVG path outlining city boundaries using Google Maps and now I'm trying to use the above code to create a similar 3D object ...

quickest method for attaching a click listener to dynamically added elements in the document object model

When adding multiple elements to the DOM, how can we ensure that these elements also have a click handler attached to them? For instance, if there is a click handler on all elements with the "canvas-section" class, and new "canvas-section" elements are con ...

Using $regex in mongodb's pipeline operations allows for advanced string

I need to be able to use $regex in order to search for any words that contain a specific keyword provided by the user, but I'm experiencing issues. Here's what I have so far: aggregatePipeline.push({ $match: { name: { $reg ...

What could be the reason behind the issue of my HTML draggable feature not functioning properly on touch

I've set up a draggable div with headers and p tags, but I'm encountering an issue when trying to run it on a touch screen. The div tag isn't draggable in this scenario. Can anyone suggest the best solution for making this page touch screen ...

Enhancing the security of various components by utilizing secure HTTP-only cookies

Throughout my previous projects involving authentication, I have frequently utilized localstorage or sessionstorage to store the JWT. When attempting to switch to httpOnly secure cookies, I encountered a challenge in separating the header component from th ...

"Error: Unable to access the property '$emit' of an undefined value" - VueJS

I'm currently working on implementing a basic authentication system in vuejs. I have a set of objects containing valid usernames and passwords. I am looping through this list to validate the entered username and password. If there is a match, I trigge ...

What is the best way to clear and fill a div without causing it to resize?

I am faced with a challenge involving four thumbnail divs labeled .jobs within a #job-wrap container. When a .job is clicked, I want the #job-wrap to fade out, clear its contents, load information from the selected .job, and then fade back in. However, whe ...

What is the best way to extract information from the response of a fetch request in JavaScript using Express and Node.js

Currently, my script code resides in the index.html file, which I understand is not the ideal location. However, I am in the process of getting it to work before relocating it. readOperaciones(); async function readOperaciones(){ try{ ...

The socket.on() function is not able to receive any data

I am encountering an issue with implementing socket.on functionality $('#showmsg').click(function() { var socket = io.connect('http://localhost:3000'); var msgText = $('#msgtext'); socket.emit('show msg', msgText.va ...

What changes can I make to my method in order to utilize async/await?

Within my React application, I have implemented a post request to the server using axios: onSubmit = async (results) => { try { const response = await axios.post("http://localhost:8080/simulate/", results); this.setState({results: ...

What are the steps to approve an Amazon Pay request for retrieving a "get checkout session"?

Exploring the integration of Amazon pay as a payment option for customers on my website has led me to encounter some challenges with understanding the request headers required for calling the Amazon Pay API. Attempting a request to 'https://pay-api.a ...

How to display content in separate divs using jQuery hover functionality

I'm in the process of creating my online portfolio by using bootstrap and jquery. I have a series of images arranged side by side with each other, and I want to make the description for each image appear when that specific image is hovered over. Each ...

What is the best way to remove an item from my online shopping cart using JavaScript?

I am currently developing an online store website. One issue I am facing is deleting items from the cart after a customer completes an order. Below is the array of cart items: const products = [ { id: '0', name: 'Nike Slim Shirt&ap ...

Combine the selected values of two dropdowns and display the result in an input field using Angular

I am working on a component that consists of 2 dropdowns. Below is the HTML code snippet for this component: <div class="form-group"> <label>{{l("RoomType")}}</label> <p-dropdown [disabled] = "!roomTypes.length" [options]= ...

Discover the magic of retrieving element background images on click using jQuery

I am attempting to extract the value for style, as well as the values inside this tag for background-image. Here is the script I have tried: function getImageUrl(id){ var imageUrl = jQuery("."+id+". cycle-slide").attr("src"); alert('' + ima ...

Moving a Ball Back and Forth Using Three.js

Iā€™m looking to create a continuous motion for a Ball in Three.js, where it moves to the right, returns to its starting position, and then repeats the sequence. var geometry = new THREE.SphereGeometry( 5, 32, 32); var material = new THREE.MeshPhongMateri ...

Update the 'checked' attribute of a radio button when the form is submitted

How do I dynamically change the content of an HTML table based on which radio button a user selects using jQuery? For example, when the page loads, I want the United Kingdom radio button to be checked and the table content to display as 'blue'. I ...

Issues with styled-components media queries not functioning as expected

While working on my React project with styled components, I have encountered an issue where media queries are not being applied. Interestingly, the snippet below works perfectly when using regular CSS: import styled from 'styled-components'; exp ...

The Google Maps feature is not appearing on the webpage as expected

I'm currently working on a website that features a footer with a Google Map. The homepage displays this footer without any issues: However, in other pages, I've implemented the footer by calling it from an external file using jQuery as shown bel ...