How can I eliminate padding from events in FullCalendar's timeGrid view?

Is there a way to remove the padding from an event when the calendar is in 'timegridview'? Users are taking advantage of the empty space created, allowing them to bypass a blocked time slot.

I currently have it set so that clicking on an event displays its details.

For instance, if I block off the 11am to noon time slot for 'Lunch', users are able to click in the empty space and bring up the scheduling dialog.

https://i.sstatic.net/uFGxg.png

I've tried using this CSS snippet to address the spacing on the left and right, but I'm struggling with the top and bottom:

.fc-timegrid-event-harness-inset {
        left: -8% !important;
        right: -8% !important;
        
    }
htmlcssfullcalendar

Answer №1

Have you attempted

margin: 0 !important;

Alternatively, have you considered specifying width and height using calc? See this example:

height: calc(80% + 10%);

Answer №2

After identifying the specific CSS responsible, I have successfully overridden the padding of .fc-event.

Original CSS:

 .fc-event {
    border-radius: 2px;
    border: none;
    cursor: move;
    font-size: .8125rem;
    margin: 5px 7px;
    padding: 5px 5px;
    text-align: center;
    color: #fff;
}

New Override:

.fc-event {
    margin:0 !important;
    padding:0 !important;
}

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

Position the mat-icon button in the top right corner for the close button

I'm struggling with positioning my close icon button at the top right corner of my dialog box. Here is my app-iconbutton component: <button mat-icon-button class="iconbutton" [ngStyle]="{ 'background-color': back ...

cssangularangular-materialangular13

JavaScript (Automatic) for a full-screen webpage display

I'm having trouble creating a webpage and setting it to fullscreen mode. Here's the JavaScript code I have: var elem = document.getElementById("fulscreen"); var fs = document.getElementById("body"); elem.onclick = function() { req = fs.webk ...

javascripthtmlfullscreen

step-by-step guide on showcasing and concealing textbox borders

Within a table, I have a column with a text box for users to edit the text as needed. The edited text is properly being saved using the onkeyup event. However, I want to hide the border of the text box after editing, so only the edited text is visible. If ...

htmlcss

WordPress does not allow self-referencing within the same site

I am currently working on a wordpress site and I am trying to create a link that directs to a specific section on the same page. This is the code I am using: <a href="#offer" target="_self">test</a> And here is the code for the landing secti ...

htmlwordpress

The functionality of Selenium's get(link) feature appears to be experiencing issues

Recently, I wrote a simple piece of code using selenium to open a webpage. from time import sleep from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.by import By import warnings warnings.simp ...

pythonhtmlselenium-webdriver

Adjusting the dimensions of the "overflow avatar" to be consistent with the other avatars displayed in AvatarGroup

When setting the max prop of the AvatarGroup, the additional avatar does not match the height of the other avatars. <AvatarGroup max={3}> <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" sx={{ width: 24, height: 24 ...

htmlreactjsmaterial-ui

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

javascripthtmlreactjs

Struggling to make the fancybox feature function with html/php

I've been trying to find a solution to this problem repeatedly, but I just can't seem to crack it. All I want to do is use fancybox to display an image. Since this is my first time using fancybox, I'm sure someone with more experience will ...

javascriptphpjqueryhtmlfancybox

When utilizing state in ReactJS to modify the color of my button, the change does not take effect on the first click. How can I troub

Whenever I click the button that routes to different locations via an API, the route works fine but the button color doesn't change on the first click. To address this issue, I implemented the useState hook and CSS to dynamically change the button co ...

cssreactjsbuttonreact-hooksbackground-color

Modify the drop-down value based on the selection of a checkbox in HTML

Here is the updated version that I am stuck with. <base href="http://skins4device.com"/> <link rel="stylesheet" href="/gasss/css/ghd.css" type="text/css" media="all"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.m ...

jqueryhtml

Error message: "AngularJS encountered a $injector:modulerr error in Internet Explorer 11."

I've successfully created an AngularJS App that functions properly on most browsers like Firefox, Opera, Safari, Edge, and Chrome. However, there seems to be a compatibility issue with IE 11. When attempting to open the app in IE 11, the following er ...

javascripthtmlangularjsinternet-explorer

What is the advantage of parsing values in a switch statement compared to an if condition?

function checkInput() { let value = document.getElementById('test').value; if (value == 1) { console.log("It works with if statement"); } } function checkSwitch() { let value = document.getElementById('test').value; switc ...

javascripthtmlfunctionif-statement

Validating (Update database with correct email and token)

Authentication (Update database if email and token are accurate) Even when the code is incorrect, it displays "Great Success", but the status does not update in my database. However, if I input the correct code, it shows "Great Success" and updates the s ...

phphtmlcssdatabase

Create a variety of unique images without using the same one more than once

I'm currently developing my first Javascript game, but I've hit a roadblock.. I am trying to create a game that displays random images without repeating them. Each image should be accompanied by a random number between 4 and 10. The code I have w ...

javascripthtml

Achieving uniform row height in CSS Grid Layout

How do I ensure all footers with a green background have the same height, while also keeping the content height consistent? Current result: https://i.sstatic.net/SrgFq.png Desired output: https://i.sstatic.net/4cr25.png CodePen: https://codepen.io/yas ...

htmlcssflexboxcss-gridgrid-layout

How can I populate a select dropdown list in Django using JsonResponse?

I've been working on displaying a list from my Django application in an HTML select option, but I'm having trouble getting it to show up. Also, I believe I need to assign IDs to the option values in the select list, but I'm not sure where to ...

pythonhtmldjangoajax

Display everything when an option is clicked

I have a filter that is working perfectly. When I select a specific category, it filters out only rows with that category. However, I am stuck on how to display all rows again after clicking on the first option. My objective is to show all rows when "Categ ...

javascripthtmljquerycss

presentation banner that doesn't rely on flash technology

Looking to create a dynamic slideshow banner for my website inspired by the design on play.com. This banner will feature 5 different slides that transition automatically after a set time, while also allowing users to manually navigate using numbered button ...

phpjavascripthtmlcssajax

Difficulty resizing background image on iPhone

I am having an issue with the background image resizing correctly on my website, specifically on iPhone (I have not yet checked iPad). You can view the site here. The dimensions of the image are 1393 x 1098 pixels. Below is the CSS code I am currently us ...

iphoneioscss

Make sure the header spans the full width of the body

I am trying to create a header that spans the entire width of the body, but I am encountering some issues with white space on both sides. I initially attempted to set the width to 100% on the header div, but this did not eliminate the white space. I then e ...

jqueryhtmlcss