fullcalendar adjusting color while being moved

Currently, I have implemented a fullcalendar feature that displays entries for multiple users with different colored calendars. However, there seems to be an issue when dragging an entry to another date - the color reverts back to default.

Below is an example of the JSON data structure:

{  
   "events":[  
      {  
         "title":"tkt[14411]",
         "start":"2015-07-09T06:00:00.196-0500",
         "end":"2015-07-09T08:00:00.196-0500",
         "id":"7",
         "userID":"1",
         "calColor":"#ff0000",
         "className":"ticketSrc_1",
         "custom":"test text here"
      },
      {  
         "title":"tkt[14412]",
         "start":"2015-07-11T06:00:00.196-0500",
         "end":"2015-07-11T08:00:00.196-0500",
         "id":"7",
         "userID":"2",
         "calColor":"#ffff00",
         "className":"ticketSrc_2",
         "custom":"test text here"
      }      
   ],
   "error":"0"
}

The code snippet responsible for adding events and changing colors based on user ID is provided below:

// Removing duplicate events
for(var i=0;i<=json.events.length-1;i++){
    $('#calendar').fullCalendar("removeEvents",json.events[i].id);
}

// Setting colors for each user
$.when(
    $('#calendar').fullCalendar("addEventSource",json)
  ).done(function(){
      var cname="";
            for(var i=0;i<=json.events.length-1;i++){
                cname=".ticketSrc_"+json.events[i].userID;  
                $(cname).css("background",json.events[i].calColor);
            }                     
});

Answer №1

One simple fix was to include a "color" parameter in the JSON data

{  
   "events":[  
      {  
         "title":"tkt[14411]",
         "start":"2015-07-09T06:00:00.196-0500",
         "end":"2015-07-09T08:00:00.196-0500",
         "id":"7",
         "userID":"1",
         "color":"#ff0000",
         "className":"ticketSrc_1",
         "custom":"test text here"
      },
      {  
         "title":"tkt[14412]",
         "start":"2015-07-11T06:00:00.196-0500",
         "end":"2015-07-11T08:00:00.196-0500",
         "id":"7",
         "userID":"2",
         "color":"#ffff00",
         "className":"ticketSrc_2",
         "custom":"test text here"
      }      
   ],
   "error":"0"
}

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

Create a CSS style that locks the first column of a table in place while allowing the rest of the columns to scroll horizontally on an HTML webpage

There are numerous solutions available for creating a table with frozen columns and scrollable content, such as: how do I create an HTML table with fixed/frozen left column and scrollable body? However, my specific requirement is to have the scroll bar o ...

scala handling missing fields during JSON serialization in json4s

I've been utilizing json4s for serializing scala map objects. import org.apache.spark.util.StatCounter import org.json4s.DefaultFormats val myMap: scala.collection.Map[String, Map[String, StatCounter]] = Map("key" -> Map("secondKey" -> StatCou ...

What is the best way to pass the "getjson" capability from one function to another in a seamless manner?

Currently, I am dealing with a situation where a getjson call is used to retrieve a large amount of data. However, I find myself constantly having to check if the data is null or not. Here is an example: if (data.Height == "") { $(&ap ...

Error: Codeigniter AJAX endpoint cannot be located

While working on an ajax call in CodeIgniter using the .ajax function, I encountered a problem. My controller is named Control and it has a function called Login. When I try to execute this code: $.ajax({ url: "Connection/Login", type: " ...

I can't figure out why I keep getting the error message saying that $ is not

Looking to execute a PHP file using AJAX, I attempted the following: <html> <script type="text/javascript"> setInterval(function(){ test(); },3000); function test(){ $.ajax({ type: "POST", url: "GetMachineDetail.php", data: ...

The Bootstrap modal fails to retrieve and display fresh data from the database

I am facing a challenge in my index view where I display a list of records with an Edit button for users to modify certain details. When the Edit button is clicked, a bootstrap modal pops up allowing users to edit specific fields. After they click Save, th ...

Combine two JSON objects into a single string by merging their keys

Let's say I have two different objects: First Object: { "Details": { "name": "John", "age": 34 } } Second Object: { "MoreInfo": { "Title": "Mr" } } My goal is to combine these two objects into a single JSON object structured l ...

Responsive design challenge

I'm currently working on a WordPress theme with a fixed header and footer on the homepage, and a vertical slider in between that includes content and images. I've made the website responsive, but I'm facing an issue where the content in the ...

Drag the label into the designated paragraph to copy the text. Click on the specific point to transfer the text

How can I copy the text from a label to a specific point by dragging it? <label id="text_to_be_copied" > i am a student </label> Below is a paragraph where I want to paste the copied text: <p> this is the content where I want to copy t ...

Troubleshooting: Issue with incorporating libraries into my HTML code using Ionic framework and Angular

I am currently working on developing a hybrid app using Ionic and Angular. I attempted to incorporate jQuery UI for drag-and-drop functionality, but unfortunately, it did not work as expected. Despite testing simple examples, the feature still did not func ...

Encountering a problem with Oracle 12c when attempting to retrieve a JSON value exceeding 11000 characters using JSON_VALUE

While executing the code below on Oracle 12c : DECLARE l_json clob; l_var varchar2(90); l_query clob; mypath clob; l_path_value varchar2(100); BEGIN SELECT json_column into l_json from my_table; SELECT path_colum ...

The Ultimate Guide to Automatically Updating JSON File URLs

I am currently working on a project where I need to retrieve data from a URL using the $.getJSON method. I am interested in finding a way to continuously update this data and replace it in the HTML without needing to manually refresh the page. Although I h ...

I can retrieve my information from the controller by utilizing Ajax

I am currently developing a project in asp.net mvc4. Specifically, I am working on a form that includes a Select element containing a list of contacts: <select id="choix_contact"> <option>Choose a contact</option> @if (ViewBa ...

Transforming Excel data into JSON format using ReactJS

Currently, I am in the process of converting an imported Excel file to JSON within ReactJS. While attempting to achieve this task, I have encountered some challenges using the npm XLSX package to convert the Excel data into the required JSON format. Any as ...

Issue with executing callback function in ajax form

I am having an issue with submitting a form using AJAX to a servlet. The form is being submitted successfully, the database entries are changing, but for some reason the callback function is not executing. Any help would be greatly appreciated. Here is the ...

Display additional information upon hovering without disrupting the neighboring elements

When I hover over a component, I want to display more details and scale it up. However, this action ends up displacing the surrounding components. Take a look at the screenshot for reference: Below is the code snippet where I defined the styling for an MU ...

Understanding the relationship between CSS height and line-height can help developers create more

Is there a way to use CSS to set the height of a box based on its own line-height or its parent's line-height? This feature would make it much simpler to create text areas that are a specific multiple of lines, for example, displaying exactly three l ...

Is there a way to shift this structure to the right without relying on the float property?

Here's the HTML and CSS I have - .font-size-add-class { background-color: #2f2f2f; color: #f9f7f1; } .font-sizes { text-align: right; display: table; margin-top: 15px; cursor: pointer; } .font-sizes > .small { font-size: 12px; } .font ...

Transfer JSON data to a Spring Boot application using Postman

Welcome Message package com.origin.welcome; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework. ...

Is it better to use a setter instead of an isMethod with @JsonIgnore in JSON serialization and

Here is a snippet of my custom HouseJPAImpl class: public class HouseJPAImpl implements House { public RoomJPAImpl room; public RoomJPAImpl getRoom(){ return this.room; } public void setRoom(RoomJPAImpl room){ this.room = room; } @Override public bool ...