Enhance the display of additional details on the Agenda using fullcalendar_rails

Can you please provide the title and date of the event, but I also need additional fields to be displayed?

By modifying the index.json.jbuilder like this: (json.title event.user.email), instead of showing the title it displays the email. However, I require to show :user, :title, :sala, :materia.

_event.json.jbuider

date_format = event.all_day_event? ? '%Y-%m-%d' : '%Y-%m-%dT%H:%M:%S'
json.extract! event, :id, :title, :sala, :materia, :user_id

json.start event.start.strftime(date_format)
json.end event.end.strftime(date_format)

json.color event.color unless event.color.blank?
json.allDay event.all_day_event? ? true : false

json.update_url event_path(event, method: :patch)
json.edit_url edit_event_path(event)

_index.json.jbuider

json.array! @events do |event|
  json.extract! event, :id, :title, :sala, :materia, :user_id
  date_format = event.all_day_event? ? '%Y-%m-%d' : '%Y-%m-%dT%H:%M:%S'

  json.start event.start.strftime(date_format)
  json.end event.end.strftime(date_format)
  json.color event.color unless event.color.blank?
  json.allDay event.all_day_event? ? true : false
  json.update_url event_path(event, method: :patch)
  json.edit_url edit_event_path(event)
end

fullcalendar_js

var initialize_calendar;
initialize_calendar = function() {
  $('.calendar').each(function(){
    var calendar = $(this);
    calendar.fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      defaultView: 'agendaDay',
      selectable: true,
      selectHelper: true,
      slotDuration: '00:60:00',
      slotEventOverlap: false,
      forceEventDuration: true,
      minTime: '08:00:00',
      maxTime: '20:00:00',
      hiddenDays: [ 6, 7 ],
      editable: true,
      eventLimit: true,
      events: '/events.json',

};
$(document).on('turbolinks:load', initialize_calendar);

Answer №1

renderEvent: function(display, tag) { 
              tag.search('.fc-label').extend("<br/>" + display.room); 
          } ,

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

How can I pass a value back to a koa generator function?

I currently have a setup similar to the following: var app = koa; var run = function (generator){ var it = generator(go); function go(err, res) { it.next(res); } go(); } app.use(function *() { run(function *(callback) { var res ...

Using data-attribute, JavaScript and jQuery can be used to compare two lists that are ordered

I am looking to implement a feature that allows me to compare two lists using data attributes in either JavaScript or jQuery. Unfortunately, I haven't been able to find any examples of this online and I'm not sure how to approach it. The first l ...

What is the best method for testing an Angular service that has dependencies in Jasmine?

My service implementation is structured as follows: angular.module('app').service('MyService' , function (dependency1, dependency2, dependency3 ...) { function funcToTest() { // Do something } } I am wondering how I ca ...

Login should only be tried when the error code is 403

I have encountered an issue with checking if the API token is expired. The process involves making a GET call, and if a 403 error is received from the API, then re-login is required. This is what I tried: app.get = async (body) => { return new Pro ...

Using Node.js and the Azure DevOps Node API, you can easily retrieve attachments from Azure DevOps work items

Encountering a problem while attempting to download an attachment for a work item in Azure DevOps. Utilizing the node.js 'azure-devops-node-api' client (https://www.npmjs.com/package/azure-devops-node-api) to communicate with ADO API. Retrieving ...

What is the proper way to utilize the value of a Node.js promise in a different function?

In my Node.js application, I have two functions defined. The first function is structured like this: function checkAdd ( address /* : string | void */ ) /* :Promise<Object[]> */ { var convertToLowerCase = address.toLowerCase() return Promi ...

What is the best way to extract the text inside a div element based on the input value in a

I attempted to extract the innerText of a div along with the input values within it. For instance: <div> My name is Shubham, I work for <input type="text"/> for the last 5 years.</div> My objective is to retrieve all the text ...

Trouble with json_encode when dealing with a multidimensional array

I've been struggling to retrieve results from 2 queries in JSON format. Even though var_dump($data) is showing the data, using json_encode either returns empty results or doesn't work at all. $data = array(); $array_articles = array(); $sql_arti ...

Ensure that the React Material UI Textfield with the type "number" is validated to have exactly 10 characters

<TextField variant="outlined" required fullWidth id="accno" label="Main Account Number" type="number" name="accno" //inputProps={{ className:"input-acc", pattern: "^.{0,10}$"}} autoComplete="accno" onChange={(e) = ...

Setting up a secure Node.JS HTTPS server on Cloud9 IDE

Wondering if it's possible to set up a Node.js https server in the cloud9 IDE? Check out this example of a basic https server setup in Node.js. var https = require('https'); var fs = require('fs'); var app = require('./app& ...

What could be causing my Vue component to not refresh?

Can anyone help me figure out why this component isn't re-rendering after changing the value? I'm attempting to create a dynamic filter similar to Amazon using only checkboxes. Here are the 4 components I have: App.vue, test-filter.vue, filtersIn ...

Retrieving specific data in Linq with .NET Core

I'm struggling with retrieving specific fields from my model. I have a model and I only want to retrieve certain data from it. Here is the structure of my model: using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotat ...

"Troubleshooting when a NodeJS Program Refuses to

Currently facing an issue while attempting to execute a Node program written in JavaScript with no indication of what's causing the problem. The program abruptly ends without providing any error or stack trace. const prompt = require('prompt-sync ...

What does my HTML code show in the console log for the AJAX data?

Need some help with transferring data using an ajax request. Trying to send the input field contents, but getting unwanted html code in output of console.log("ok" + data), while console.log("ok" + formData) gives the desired value. In my Django view, the ...

JavaScript: Struggling with Proper Functioning of Object.assign() Method

I am currently facing an issue with an assignment in my function. Here is a snippet of the function along with the troubleshooting console.log statements: function myfunc() { the_node = some_array; //with data.$color = #111111 console.log(&ap ...

Display the count of ng-repeat items beyond its scope

Currently, I am looping through a list of nested JSON objects in this manner: <div ng-repeat='item in items'> <ul> <li ng-repeat='specific in item'>{{specific}}</li> </ul> </div> I want to ...

Learn how to create a button that will only submit a value when clicked using Node.js and EJS

Currently in my ejs file, I have a button that sends a value to app.js instantly when the program runs. However, I want it to only submit the value when clicked by the user. <% notesArray.forEach((note,i) =>{ %> <div class="note"> ...

When working with React-Native App and combining React-Navigation with Redux, a common error may occur stating that 'action.routeName' is not an object. This issue can be

I encountered an error in my React Native app while implementing react-navigation within redux. The issue, along with a screenshot for reference, can be found here. Currently, I have not incorporated any redirects into the application. However, my plan in ...

Challenges faced with password hashing in Express.js

Can anyone assist me with the process of hashing passwords? I had a functional login/register feature on my express app until I integrated bcrypt. After registering a User, I can see that the password is hashed in the Database. However, when attempting to ...

Ensure the backslashes are removed from the AWS Lambda string API response

I have an AWS Lambda function where I am sending a string as my final response let abc= `"phone_exist":"0","calls":"0","lastaction":"0"` callback(null,abc); Output: "\"phone_exist\":\"0\",\"calls\":\"0\",\"l ...