Display a message indicating unavailability when no events are scheduled and adjust the background color in FullCalendar

In one of my projects, I am utilizing jQuery FullCalendar to schedule appointments for doctors.

The doctors should be able to specify their availability between 9 AM - 5 PM on weekdays. If this is not set, the background color of the spans of time not booked should turn grey or another color, and the text should read as "unavailable" within those spans.

I attempted using 'inverse-background' which isn't functioning currently. Has anyone successfully implemented this or have any suggestions?

Thank you.

Answer №1

After encountering a similar issue, I decided to approach it from a different angle. Instead of treating the colored background as a "non-event" that was still clickable, I created events based on the unavailable times and labeled them as "unavailable." For example, from 00:00 to 8:59, an event representing the unavailable time slot was rendered, allowing me to control click events and CSS styling accordingly. The same concept applied to the end of the day with another event from 18:00 to 23:59 marked as "unavailable." This solution worked perfectly!

This approach also gave me the flexibility to set different start and end times for various practitioners, enabling me to display each practitioner's schedule with active "on" times while maintaining functionality.

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 the sortable feature, you can easily rearrange items by simply dragging

I have three selections and I want to remove items between these selection boxes. Instead of using ul tags, I opted for selections because the option values are needed to save the record. I tried using the Sortable feature and modified it based on this exa ...

Sorting JSON data using JQuery Ajax

I've encountered an issue with sorting JSON data. Here is the JSON data I'm working with: [ { nom: "TERRES LATINES", numero: "0473343687", image: "http://s604712774.onlinehome.fr/bonapp/api/wp-content/uploads/2016/12 ...

Delineating the execution of a PHP function through a button click using HTML/Javascript

I have a need to trigger a specific PHP function by simply clicking on a button. Currently, I am working with the following code snippet: <table class='standardtable'> <tr> <th>Event</th> <th>Group</th> ...

What is causing the failure of generating a DIV element with JQuery?

I'm having trouble creating a div element with a class and appending a child to it. I keep getting no response. What could be the issue? JS content function generateTable() { var procDiv = $("<div class='proc-container'></div>" ...

What can be done to address the problem of background-image opacity making text difficult to read?

I am having an issue with the background. I am aiming for something similar to what is shown in screenshot 1, but instead, I am getting the result shown in screenshot 2. Where could the problem lie? html, body, .bg-for-1 { height: 100%; } .bg-for-1 ...

Dark Mode Caused by CSS Overriding Accordion

I'm currently using an accordion feature from Flowbite, but I am facing issues with it defaulting to dark mode upon page load. Upon inspecting the element, I discovered that there is some dark mode CSS included in the Flowbite package. In an attempt t ...

Using a custom filter in AngularJS allows for seamless data filtering directly from the initial dataset

My goal is to implement a custom filter that will allow me to filter data based on a search word. The scope attribute gets populated in the controller's scope as shown below: naApp.controller('naCareNewTicketCtrl', ['$scope', &apo ...

sending data from a servlet to ajax

Implementing a star-based voting system involves sending an ajax request to update the database through a servlet when a user casts their vote. This is the ajax code used: $.ajax({ type:'GET', contentType: "charset=utf- ...

Ways to animate a main element independently of its counterpart's animation

I want to create an animation for a parent element without affecting the child's animation. My HTML & CSS structure is set up as follows: .parent{ background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1be ...

What is the best way to make my div equal in height to its preceding div sibling?

I want my new div to match the height of the previous one. I'm using percentages for width and height to ensure it displays properly on mobile devices as well. I've tried setting the parent elements to 100% width and height based on suggestions f ...

Guidelines for updating a value with a different value using Jquery Ajax in MVC 2

Greetings! I am currently utilizing Ajax Jquery to send a promotional code to the controller, where it will be verified, undergo some calculations, and return the result. My goal is to update the total result on the page with this new result. Below is the ...

When I attempt to press the shift + tab keys together, Shiftkey is activated

Shiftkey occurs when attempting to press the shift + tab keys simultaneously $("#buttonZZ").on("keydown",function (eve) { if (eve.keyCode == 9 && eve.shiftKey) { eve.preventDefault(); $("#cancelbtn").focus(); } if (eve. ...

Tips for sending an email without using MAILTO in JavaScript or jQuery

Today is a great day for many, but unfortunately not for me. I've been struggling with this issue for over two weeks now and can't seem to find a solution anywhere on the internet. Stack Overflow always comes to my rescue when things get really t ...

Achieving Full Row Height in Twitter Bootstrap using CSS Grid

Before jumping to conclusions and marking this question as a duplicate, I want to clarify that I have already explored all suggestions provided on Stack Overflow, including the use of display: table. Unfortunately, none of them seem to work smoothly with B ...

What is causing the inconsistency in the widths of these HTML elements?

I recently created multiple div elements with a uniform width of 5px. Here is the CSS code I used: div { background-color: black; width: 5px; height: 100px; display: inline-block; } To my surprise, despite setting the same width for all divs, som ...

Is it possible to execute a PHP script within a .css file and ensure it functions correctly?

Recently, I've been making some changes to the .css file in order to get my PHP codes to work. However, when I insert them as usual, they appear as regular text. I'm curious to find out if it's possible to execute a PHP file within a .css fi ...

Achieve a stylish layout by displaying three cards per row using Vue.js and Bootstrap 4

I'm facing an issue with my code where I am trying to display Bootstrap cards in rows of three, but the layout is not rendering correctly. It starts with one card, then two, and eventually adds a new column, resulting in some empty spaces with offsets ...

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

Need help fixing my issue with the try-catch functionality in my calculator program

Can someone assist me with my Vue.js calculator issue? I am facing a problem where the output gets added to the expression after using try and catch. How can I ensure that both ERR and the output are displayed in the {{output}} section? Any help would be a ...

Using Laravel and a datatable, learn how to efficiently pass an ID when exiting an input field within the current row

Having trouble passing the id to a controller upon exiting an input field in the same row? How can I pass two variables - the input field value and the id of the corresponding row? <script type="text/javascript"> var oTable = $('#use ...