Home/ Questions/Q 7810131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T03:39:50+00:00

I’ll try to make this as clear as I can! So here goes! I

  • 0

I’ll try to make this as clear as I can! So here goes!

I have been working with Adam Shaw’s jquery plugin, fullCalendar.
I’ve minor adjustments for the project I’m working on.

The purpose: This ‘version’ of fullcalendar is set so that it fills the document space in the window and is intended to always stay visible when the window is resized ( while leaving 10px of padding between the window and the calendar itself on the right side and on the bottom ). Also it should have 10px of padding at the top of the document beneath the calendar navigation. The left side is correct as is.

The problem: When you load the ‘localendar.html’ included in the zip you may see a few immediate problems ( this may depend on your screen resolution ). Currently the calendar is not fixed 10px below the calendar navigation. Additionally when you resize the browser window the calendar maintains the 10px padding on the right and bottom sides, however the top of the calendar simply does not function as desired in all three calendar view options.
The calendar must not have any overflow causing scrollbars to appear.

The calendar must maintain 10px of padding on all sides ( excepting the left side and only 10px on the top below the calendar’s navigation ). A minimum height and width so that the calendar cannot go smaller than an average netbook resolution ( at which point overflow causing scrollbars is acceptable ).

-these lines might be helpful.

localendar.html (70-92, 104-124)
fullcalendar.css (139-142 [view fullcalendar.css)
fullcalendar.js (473-492 [view fullcalendar.js)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re setting all of the element’s position attributes to ‘absolute’. When you set something to ‘position: absolute’ it positions it absolutely within the nearest parent that is set to ‘position: relative’. It also removes the element from the general document flow. What’s happening with the top margin is that since the calendar is out of the document flow, it overlaps the controls above it. You should remove the position attributes from your CSS.

    This is what you should have for the calendar style in the html page itself:

        div#calendar {
    margin-left: 252px !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    I’m including the div element in the style property because it gives the rule more weight. I’m also setting the ‘margin-left’ property’s value to important because there’s another style set to important in the fullcalendar.css file. These two together will override the left margin that was applied in that file.

    I’ve only been able to test this out in safari for now, but it should work correctly in most browsers. Please let me know if this helps.

    • 0