Enhance the visibility of day borders on a Full Calendar featuring vertical Resources

In our current setup, we are utilizing FullCalendar in the week view format with vertical columns assigned to specific resources for each day.

One challenge we are facing is distinguishing where each day begins and ends, as all cells have the same side border.

Is there a way to customize the left border of the last resource cell for each day?

Are there any CSS or Javascript solutions that would allow me to define a unique left border for the first or last cell within a sequence of data-date values?

A sample representation of a table row can be seen below:

<tr>
    <td class="fc-axis fc-widget-content" style="width: 55px;"><span>All Day</span></td>
    [...]
</tr>
htmlcssfullcalendar

Answer №1

The query inquires:

Is there a way, using CSS or Javascript, to establish distinct left borders for the first and last cells within each set of data-date values?

To achieve this solely with CSS, regardless of the number of cells per day, one approach is to target the initial cell in each sequence by examining the group of cells sharing the same day designation (.fc-mon,..., .fc-fri). The following code snippet defines the left border for all cells belonging to these classes, then resets it for any cell that is a sibling of another cell with the same class. This technique ensures that only the primary cells labeled as .fc-mon,..., . fc-fri are visually formatted.

<head>
<style>
table {
  border-collapse: collapse;
}
td {
  border: 1px black solid;
  width: 3vw; /* only for demo purposes */
}

     .fc-mon, .fc-tue, .fc-wed, .fc-thu, .fc-fri {
        border-left: 4px solid black;
    }

     .fc-mon ~ .fc-mon, .fc-tue ~ .fc-tue, .fc-tue ~ .fc-tue, .fc-wed ~ .fc-wed, .fc-thu ~ .fc-thu, .fc-fri ~ .fc-fri     {
        border-left: 1px solid black;
    }

</style>
</head>
<body>
<table>
<tr>
    <td class="fc-axis fc-widget-content" style="width: 55px;"><span>All Day</span></td>
    <td class="fc-day fc-widget-content fc-mon fc-today " data-date="2021-08-23" data-resource-id="2"></td>
    <td class="fc-day fc-widget-content fc-mon fc-today " data-date="2021-08-23" data-resource-id="409439"></td>
    <td class="fc-day fc-widget-content fc-mon fc-today " data-date="2021-08-23" data-resource-id="13"></td>
    <td class="fc-day fc-widget-content fc-mon fc-today " data-date="2021-08-23" data-resource-id="53588"></td>
    <td class="fc-day fc-widget-content fc-tue fc-future" data-date="2021-08-24" data-resource-id="2"></td>
    <td class="fc-day fc-widget-content fc-tue fc-future" data-date="2021-08-24" data-resource-id="409439"></td>
    <td class="fc-day fc-widget-content fc-tue fc-future" data-date="2021-08-24" data-resource-id="13"></td>
    <td class="fc-day fc-widget-content fc-tue fc-future" data-date="2021-08-24" data-resource-id="53588"></td>
    <td class="fc-day fc-widget-content fc-wed fc-future" data-date="2021-08-25" data-resource-id="2"></td>
    <td class="fc-day fc-widget-content fc-wed fc-future" data-date="2021-08-25" data-resource-id="409439"></td>
    <td class="fc-day fc-widget-content fc-wed fc-future" data-date="2021-08-25" data-resource-id="13"></td>
    <td class="fc-day fc-widget-content fc-wed fc-future" data-date="2021-08-25" data-resource-id="53588"></td>
    <td class="fc-day fc-widget-content fc-thu fc-future" data-date="2021-08-26" data-resource-id="2"></td></td>
    <td class="fc-day fc-widget-content fc-thu fc-future" data-date="2021-08-26" data-resource-id="409439"></td>
    <td class="fc-day fc-widget-content fc-thu fc-future" data-date="2021-08-26" data-resource-id="13"></td>
    <td class="fc-day fc-widget-content fc-thu fc-future" data-date="2021-08-26" data-resource-id="53588"></td>
    <td class="fc-day fc-widget-content fc-fri fc-future" data-date="2021-08-27" data-resource-id="2"></td>
    <td class="fc-day fc-widget-content fc-fri fc-future" data-date="2021-08-27" data-resource-id="409439">
    <td class="fc-day fc-widget-content fc-fri fc-future" data-date="2021-08-27" data-resource-id="13"></td>
    <td class="fc-day fc-widget-content fc-fri fc-future" data-date="2021-08-27" data-resource-id="53588">
</tr>

</table>
</body>

Answer №2

Utilizing CSS selectors like :first-child or :last-child enables you to pinpoint the first or last element. In this example below, I have specifically targeted the initial and final elements of the table row and added a distinct background color. Feel free to customize the styling as per your requirements. Remember, maintaining a proper structure is crucial for effectively targeting the desired element.

#tmp tr td:first-child {
  background:red;
}
#tmp tr td:last-child {
  background:green;
}
<table id="tmp">
<tr>
  <td>first</td>
  <td>second</td>
  <td>third</td>
  <td>fourth</td>
</tr>
<tr>
  <td>first</td>
  <td>second</td>
  <td>third</td>
  <td>fourth</td>
</tr>
<tr>
  <td>first</td>
  <td>second</td>
  <td>third</td>
  <td>fourth</td>
</tr>
<tr>
  <td>first</td>
  <td>second</td>
  <td>third</td>
  <td>fourth</td>
</tr>
<tr>
  <td>first</td>
  <td>second</td>
  <td>third</td>
  <td>fourth</td>
</tr>

</table>

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

Ways to display an image for a duration of 3 seconds upon clicking each button

Need help with my HTML/js code. I have a button that should display an image when clicked, but it's not working properly. Here is the code snippet: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&qu ...

javascripthtmlimage

Animating Elements with CSS and HTML

Struggling with my website project, specifically creating a login page. The issue arises when resizing the browser, causing elements to look misaligned and chaotic. Before: view image here After: view image here /* Bordered form */ form { margin-l ...

htmlcss

Utilize CSS to selectively target specific sections of a repetitive pattern within a list

I have come across a list fragment that is generated automatically and I only have the ability to adjust the CSS for it. <ul class="menu"> <li class=" menuItem1 first parent"></li> <li class=" menuItem2 parent"></li> ...

htmlcss

The transparent background causes the vertical menu to malfunction on IE8

This is the first website I am working on: www.olgoya.com The issue I am facing is that all major browsers, except IE8, display the submenu even when the mouse hovers over the 'portfolio' item. Upon investigation, I found that the problem lies w ...

jquerycss

A covert identification column alongside an additional column that displays the data

I've hit a roadblock with a particular piece of code and I'm struggling to identify the issue. After researching online, it seems that the error I am encountering is related to a failed query. However, following the suggested steps to rectify th ...

phphtmlmysqlhidden

Utilize Bootstrap-Vue to ensure that an element expands to occupy the available space

In my Bootstrap-Vue application, I have set up the following hierarchy: <b-navbar.../> <b-container > <b-row align-v="center" style="min-height:100vh"> <b-col style="align-items:center"> <h1>404 Error&l ...

htmlcsstwitter-bootstrapvue.jsvuejs2

A versatile CSS solution for fixed background images that stretch to fit any screen height across multiple browsers

Similar Question: Stretch and Scale CSS Background I am interested in finding a method to create a background with specific criteria: - remain fixed in place - adjust proportionally based on the window's height - work across all browser types or ...

cssbackgroundheightfixedstretched

Is it time to advance to the next input field when reaching the maxLength?

In my Vue form, I have designed a combined input field for entering a phone number for styling purposes. The issue I am facing is that the user needs to press the tab key to move to the next input field of the phone number. Is there a way to automaticall ...

javascripthtmlvue.jsnuxt.jsvuelidate

Tips for optimizing HTML and CSS for better browser performance

Just starting to learn HTML, CSS through an online course and currently working on a simple website. The table of contents on my website is centered, but when I resize the browser on my 27-inch iMac, it doesn't stay centered. Any tips? Here's a s ...

htmlcss

Issues are arising with Bootstrap's functionality within the Vite React app

I am new to working with react and vite. I am currently developing a vite react application that requires the use of bootstrap. I followed the instructions provided on the official Bootstrap website here. However, not all Bootstrap functionalities are work ...

javascriptcssreactjsbootstrap-5vite

Is there a way to launch an android application directly from my website using a pop-up box?

I attempted to utilize the following code: intent://my_host#Intent;scheme=my_scheme;action=my_action; and it appears to be functioning properly. However, I am in need of a dialog box similar to this image. Can anyone assist me with achieving this? Thank ...

javaphpandroidhtml

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

Beginner: Bootstrap Sass 3.3.6 - Incorporating Javascript - Issue with Navbar Dropdown Not Expanding application.html.erb Head: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> ...

javascriptcssruby-on-railstwitter-bootstrapsass

Issues with HTML5 tag <animate> in Internet Explorer 11

After getting the hang of some HTML basics, I decided to get creative and make an animation. Surprisingly, it works perfectly on my Firefox browser. However, when I tested it on IE 11, it failed to play the animation as expected. Everything is displayed bu ...

htmlinternet-explorer-11

Aligning a left-positioned div with a right-aligned div within a container

I'm trying to replicate this layout: https://i.stack.imgur.com/mUXjU.png Here is the HTML code I have so far: <div class="container"> <div class="floatingLeft">A right-aligned div</div> <div class="a">Lorem Ipsum< ...

htmlcssalignment

Struggling with aligning HTML tabs in Django framework

https://i.sstatic.net/vsnqD.pngI have been working on displaying a list of data based on tabs. I have successfully retrieved the data and shown it, but the issue lies in the HTML structure. Certain parts of the HTML should not repeat, but they need to appe ...

htmldjangotwitter-bootstrap-3django-templates

Utilize Bootstrap to occupy the rest of the available vertical space

Struggling with handling empty space in a Bootstrap grid? Check out the issue I'm facing when the div doesn't fill the entire height. https://i.sstatic.net/zvS7t.png This is the current configuration: <div class="row"> <div class= ...

cssbootstrap-4

When removing the class "img-responsive" from an image, the bootstrap columns begin to overlap

Just starting out with Bootstrap while working on an Angular2 project and I have a question. Currently, I have a map-component taking up 3 columns on the left-hand side, but every time I resize the browser, the image also resizes. I want the image to rema ...

htmlcsstwitter-bootstrapangularangular-ui-bootstrap

Modifying the page title for a Facebook application

I'm curious if it's possible to modify the title of my page for my Facebook application. Currently, the title reads "CoolApplicationName on Facebook", but I would like to insert an additional word before the application name. For instance, "(Adde ...

htmlfacebookfacebook-apps

I have a question for you: How can I customize the font size in Material-UI TextField for different screen sizes?

I'm facing a challenge in Material-UI where I need to set different font sizes for TextField. While it may be simple in HTML/CSS, it's proving to be tricky in Material-UI. Can anyone help me figure out how to achieve this? The code snippet below ...

javascriptcssreactjsmaterial-ui

Looking for assistance to properly center an image within a Bootstrap carousel?

I'm struggling to get the image centered within the slider. You can view my carousel by clicking on the following link: This carousel was created using react-bootstrap with next.js. In an attempt to center the image, I have added the following code ...

cssbootstrap-4react-bootstrap