Customize the background colors for events in the jQuery weekcalendar plugin to distinguish between different types of activities

I recently started using the jQuery weekcalendar plugin to display a web-based calendar with appointments. The CSS code below is used to set the color of all events:

.wc-cal-event {
    background-color: #00BFFF;
    font-size: 0.8em;
    position: absolute;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    color: #000;
    width: 100%;
    border: 1px solid #000;
    font-weight: normal;
}

I have added a new feature where each appointment in the calendar has a category, similar to Outlook. I want the background color of the appointment to change based on its category, for example, it should be red.

How can I dynamically change the background color of an event? If I modify .wc-cal-event, it affects every event's background color.

Thank you for your assistance.

javascriptjquerycssjquery-plugins

Answer №1

To achieve this, you can use the following code block:

eventRender : function(calEvent, $event) {
    $.ajax({
        url: newUrl,
        dataType: 'json',
        async: false,
        success: function(data) {
            $.each(data, function(i, appointment) {
                $event.css('backgroundColor', appointment.htmlColor);
                $event.css('color', appointment.textColor);
            });
        }
    });
}

Answer №2

Assign a distinct class to each event such as .wc-cal-event.meeting and then customize the style for that specific class.

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

Retrieve all entries in MongoDB using Mongoose where a particular date falls within a specified date range

Consider a scenario where documents contain the fields: startDate: 2021-04-14T22:00:00.000+00:00 endDate: 2021-04-19T22:00:00.000+00:00 You want to retrieve all documents where a specific date (e.g., today) falls within the date range. Is it possible to c ...

javascriptnode.jsdatabasemongodbmongoose

Error authorizing AJAX call to Gmail API

I'm just getting started with the GMail API and I'm attempting to use AJAX to fetch emails. This is my code: $.ajax({ beforeSend: function (request) { request.setRequestHeader("authorization", "Bearer xxxxxxxxxxxxxxxxx.a ...

javascriptajaxgmail-api

Eliminating specific item from array

(2) [{…}, {…}] 0: {id: "201158", salary: 2} 1: {id: "1627761", salary: 5} length:2 __proto__: Array(0) Here is the object retrieved from the console, and I'm facing a challenge that needs some resolution. When a certain element is clicked, I in ...

javascriptjqueryarrays

Steps for Creating a Mirrored Copy of X3D in a Web Environment

My goal is to incorporate two 3D models into a webpage, both generated from the same .x3d file. I want these elements to act like mirrors of each other when rotated. To obtain HTML code from a .x3d file, I follow these steps: Open my .x3d file in a code ...

javascripthtmlcanvasblenderx3dom

Adjust the content size to 100% based on the quantity of items in a row

I've been having a hard time creating an image gallery that adjusts its size automatically (width: 100%) based on the number of items it contains. For example, take a look at this gallery: http://codepen.io/anon/pen/eNMOEz .item { width: 75px; h ...

javascripthtmlcss

Developing a downloadable PDF version of an online platform

For weeks now, I have been tirelessly searching for a solution to a problem that has stumped me once before. The Challenge: My company created a sophisticated web-based data analytics suite for a major beverage distributor. Our client is now requesting a ...

javascripthtmlperlcsspdf

Tips for aligning the text horizontally in an input field with a neighboring element

Hello amazing community, I'm searching for a neat way to align the text of an element horizontally with that of an Angular Material input field. Here is the code I am using: <div style="display: flex"> <div>Greeting: </div> ...

htmlcssangularangular-material

Can dynamic attributes be used with ternary operators in Angular?

I attempted to alter the id of a div using Angular and implemented the following code: <div [id]="'item_' + (itemName !== undefined ? itemName.replace(' ', '-').toLowerCase() : '')"> However, when I run my te ...

javascriptangularattributesconditional-operator

Ensure that the bar width in react-chart-js-2 remains consistent regardless of the number of bars displayed

Currently, I am developing a React Chart JS component that displays a set of horizontal bars. My objective is to maintain the width of the bars at a consistent size regardless of the number of bars present (e.g., all bars at 30px). However, when additiona ...

htmlcssreactjstypescriptchart.js

Getting rid of items and bringing them back

In my current three.js project, I have implemented a feature that allows users to switch between scenes containing various mesh objects. All objects are loaded simultaneously when the page loads, but the performance is affected by the textures on these obj ...

javascriptthree.js

The call stack reached its maximum size while attempting to send a post request in an Express application

'Error Occurred: RangeError: Maximum Call Stack Size Exceeded' When Making a Post Request in Node.js with Express and body-parser As a beginner in the world of node.js, my journey took a challenging turn while following along with video #30 from ...

javascriptnode.jsexpress

The issue with `Meteor` createContainer not rendering in React is causing trouble

I have been attempting to dynamically retrieve data from a mongo database, with the goal of updating the client side automatically whenever new data is inserted. Initially, I used Tracker.autorun in the main.js file within the client directory, and it su ...

javascriptmongodbreactjsmeteorecmascript-6

Web fonts are functioning properly only on Chrome and Safari for Macintosh operating systems

A web designer provided me with some fonts to use on a website. Below is the content of my fonts.css file: /* Font Awesome */ /* Font Awesome Bold */ @font-face{ font-family: 'font-awesome'; src: url('fonts/font-awesome-bold-webf ...

htmlcssfonts

Executing an Ajax request. Best method for transmitting various data elements:

I am currently attempting to perform an ajax call with multiple data inputs. When I send only one string of data, I use the following method: $.ajax({ url: "php/update_lastordning.php", type: "POST", data: "elId=" + elId }); To retrieve t ...

javascriptphpajaxjson

What is the best method for making certain rows uneditable in jqgrid?

Can rows be set as uneditable in jqgrid after the first edit is done? I attempted to add a class called not-editable-row but it did not work. This is how I currently make all rows editable: onSelectRow: function(id){ if(id && id!==lastsel){ g ...

javascriptcssjqgrid

Is it possible to set the initial value of useState() as null and later assign it an object value?

https://i.sstatic.net/TjAbz.png Looking at the image, I am attempting to set up a React state hook for the alert system on my website. Initially, I want no alerts to be displayed. However, when a user clicks a button, I want to show a success alert with a ...

javascriptreactjstypescriptreact-hooksuse-state

Guide to redirecting all Angular requests to index.html using Nginx

I've configured my Nginx server to serve an Angular app with a simple config file like so: server { listen 80; listen [::]:80; root /path/to/apps/myapp/current/dist; access_log /path/to/apps/myapp/current/log/nginx.access.log; error_log /p ...

javascriptangularjsnginx

How can an HTML5 application be configured to enable access to intranet and local files?

It's a known fact that accessing the local path of a file added using a file input field or drag-and-drop is not possible even with the new FileAPI. Whether this limitation is good, bad, or ugly is not up for debate. The FileAPI specs clearly state th ...

javascripthtml

There seems to be an issue with byRole as it is failing to return

Currently in the process of migrating my unit test cases from Jest and Enzyme to React Testing Library. I am working with Material UI's Select component and need to trigger the mouseDown event on the corresponding div to open the dropdown. In my previ ...

javascriptreactjsmaterial-uireact-testing-library

The system has encountered an issue: Unable to locate the module 'avoriaz'

I'm currently diving into Vue for the first time and have been following along with this helpful tutorial on testing. Everything was going smoothly until I encountered a perplexing error during the final step of utilizing avoriaz: ERROR in ./test/uni ...

javascriptnpmvue.jsavoriaz