I cannot figure out how to scale fullcalendar to fit to it's parent container. I want to display week view on a single page for users without need to scroll (So they quickly review items for a week).
I'm ok if I need to make text small, slots height smaller, etc, but I just not sure how to do this dynamically based on the size of the browser window.
(In my calendar I'm using slotMinutes:10 and times from 8am to 10pm)
jsfiddle with fullcalendar: http://jsfiddle.net/bQXYp/27/
i just solved my problem with below code
.fc-day-grid-container.fc-scroller {
height: auto!important;
overflow-y: auto;
}
There are several factors to be considered.
If you want to stick to having slotMinutes set to 10, then it is going to be quite difficult to fit time ranges from 8 AM to 10 PM on to the page without manually hacking the font size to be almost illegible.
If you are okay with increasing the slotMinutes attribute to something like 30 or even 60, you have a pretty good chance of getting your weekly view showing up without the need to scroll.
Apart from that, there are two properties you could use to influence the dimensions of the calendar. The first one is height. However this sets a pixel value which does not scale dynamically. The second one is aspectRatio which allows to the define the ratio of width to height. In other words, aspectRatio value of 2 means that it will try and stretch the height to be double that of the width (if at all that amount of height is needed).
I have set up an example here that shows you the effect of having a reasonable slotMinutes value. In my opinion, this is what will be most important to be able to achieve what you need.
I use it in list view to show all upcoming events. I added to my own CSS-
.fc-scroller {
height: auto!important;
overflow-y: auto;
Hi i am using two views ( month and agendaDay ) and when i switch to day view i change contentHeight like so:
viewDisplay: function(view) {
//alert(view.name)
if(view.name == 'agendaDay')
{
$('#calendar').fullCalendar('option', 'contentHeight', 700);
}else{
$('#calendar').fullCalendar('option', 'contentHeight', 200);
}
}
Maybe it can give some direction for what you want to do ;)
Try the contentHeight property:
http://arshaw.com/fullcalendar/docs/display/contentHeight/
With your desired minTime and maxTime this removes the vertical scroll bar on the content area of the FullCalendar in that jsfiddle example:
contentHeight: 1850,
minTime: '8',
maxTime: '22',
(But be sure not to set aspectRatio as that seems to over-ride the contentHeight)
Although as Karancan mentions to fit to one screen without scrolling you'll need to reduce the font size to an almost unreadable size.
(and if you're using IE8 then you may have other issues with the height..)
This worked for me too.
I opened the fullcalendar.css and scrolled to fc-scroller.
Added the height and changed the overflow-y option as was suggested.
And the calendar month view worked 100%
Related
I am working with handsontable [JavaScript Spreadsheet
library] and want to toggle settings with a bootstrap-styled-checkbox. The first thing was, to set a specific width and height to the table when the box is checked and to undo this fixed size (so it automatically resizes again) when uncheck the box.
Here is my current code:
$('#mycheckbox').click(function() {
if($('#mycheckbox').prop("checked") == true){
handsontable_table.updateSettings({
width: 725,
height:100
})
}else{
handsontable_table.updateSettings({
// missing :(
//UPDATE:
width: null,
height: null
})
}
});
At first, my handsontable-table is automatically sized to the correct size. When I check the checkbox, the table resizes to the given width and height. But I don't know how to remove this width- and height-settings. I tried to set them to 'false' or 0 or remove these settings with jQuery-.removeProp(), but none of them does what I want. And I can't find something right in the handsontable-docs (or other sites).
I very appreciate your help!
EDIT
I found a solution: You just have to set the width and height to null. See edit above.
But there is something strange going on when I minimize my table and maximize it again - at first, my div below the table slides up to the new bottom of my table, but when it gets big again, the div doesn't move anymore, its overlapping with the table...
However, I still don't know how to remove settings from a handsontable...
As you mentioned in your edit, by updating the value to null it appears to be one way to reset a setting with in Handsontables options. It my experience you do not want to set the height and width to null, but instead update it to a new value.
If you were clearing out a setting like nestedHeaders for example; you would just set the value to null to stop using the nestedHeaders feature. However, that doesn't work for every option.
If you are trying to expand and collapse a handsontable then setting the height and width to null or zero is not going to be the best solution. You should update the parent div to display null using jQuery(handsontable's parent selector).hide() or .show().
In week view of Fullcalendar.js, there is a small space to the right of the rightmost event (in each day/overlapping), so that the slots this event occupies may remain clickable. However, the space is pretty small by default. I need to make it bigger.
I inspected every element of the tables that conform a Fullcalendar (currently using version 2.5.0), but I can't seem to find the place where the width of this space is set. I'm beginning to think it's calculated from the events' width, but I'm uncertain.
Is there any way to increase this space in week view?
EDIT:
The only provided answer does not work as intended because it adds some space to the right of ALL overlapping events (If two or more events overlap, then the space is added between the overlapping events, and not just to the rightmost event, as desired.)
EDIT:
There is now an officially accepted answer that seems to be working.
It is quite old but maybe it helps someone:
You can just set the event container margin
.fc-ltr .fc-time-grid .fc-event-container {
margin: 0 5.0% 0 2px;
}
Try this one
eventAfterRender: function( event, element, view ) {
var width = $(element).width();
width = width - ( width / 3); // Less whatever you want
// Set the new width
$(element).css('width', width + 'px');
}
This works for me.
I have a menu, with 9 items. I want the button height to have 40px OR 11%(1/9 of the screen) of the screen size. Whathever is the largest.
Right now i have:
min-height:40px;
max-height:11%;
And it's always 40px. Even when my screensize is larger than that.
Can I achieve that on css or I have to use javascript?
Thank you.
EDIT
JSFiddle for it.
#Jeffery Khan is right, that solves it. I had a different element pushing it up. Thank you!
min-height is generally the height of whatever something is set to unless something causes it to expand passed that, such as the contents of a div.
Try the following:
min-height:40px;
height:11%;
You don't need javascript now that we have min(), max() and clamp().
While these weren't around in 2012 they've been well supported for several years now.
Based on your original question:
I want height of 40px or 11%, whichever is greatest:
First of all it's usually better to use vw or vh if you want to refer to a proportional size of the screen, since 11% will just be 11% of the containing element and can be unpredictable.
So with min / max you can try this:
height: max(40px, 11vw);
To get more advanced (and frankly easier to read) you can use clamp:
height: clamp(100px, 50vh, 900px);
This will 'prefer' to be a height of half the viewport with a minimum of 100px and a maximum of 900px (for really tall screens). So you get really nice fluid motion when you resize the screen with no coding.
Of course these can be used with min-height or max-height too if that is more appropriate for your needs.
Wow I'm amazed nobody added this in over ten years!
I realize there's already been several questions like this, but I think my case is a little different.
I have an div that I am absolutely positioning and floating on top of the page, and I'm setting an overlay behind it to grey out the rest of the page. I have it working okay until you scroll up and down the page.
The problem is, when the div appears, it is still populating with ajax data. So the height and width of the bg overlay has already been set, but once all the data loads into the floating div, it sometimes pushing the page down so the height increases. So, I can't calculate the height and width of the window or document because the floating div might not be fully loaded yet, and once it does, it pushes the screen down further, causing the bg overlay to not cover the whole page.
So for example, in the code it's going something like:
loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());
}
I verified this by adding an alert, so that by the time I've clicked the alert, the bg overlay was able to calculate the true page size, and it looks fine.
Sorry, if this sounds confusing but hopefully you get what I'm trying to achieve. I'm assuming this isn't too difficult, but I haven't been able to figure it out.
Any help would be appreciated, I'm using jquery.
Thanks
Overlay ;)
** update, setting position of all corners to 0 instead of using width/height 100% **
$("<div/>")
.css({
position:"fixed", // ze trick
background:"#000",
opacity:.5,
top:0,
bottom: 0,
left:0,
right: 0,
zIndex: 2999 // everything you want on top, gets higher z-index
})
.appendTo("body");
Or put the above css settings in a css stylesheet (opacity needs cross browser hacks).
$("#dark-overlay").show();
Here is the solution :
JQuery Show Loading Plugin
Don't try to invent the wheel !!!
Here is a demo :
Loading Demo
Now you just need to create a main container div for your page and just ask this simple plugin to do it for you.
Maybe you want to read the plugin source and find how it works...
This should be simple but nothing's working:
Question
How do you set the height of a webpage to be, lets say, exactly 4000 pixels—in such a way that scroll bars exist even when the page is blank?
Background
I'm new to JavaScript/JQuery but very experienced with similar technologies. I'm trying to do some fancy effects based on scrolling the page. To accomplish this methodically, as a first step I'm looking to make a "really tall" page. From there I will hide/display items based on the scroll height with pseudo-code along the lines of:
function onScrollEvent() {
var height = scroll height
var sectionIndex = Math.floor(height / MAX_SECTION_HEIGHT);
for each item in my array of graphics
if item index != sectionIndex then item.fadeOut else item.fadeIn
}
Once I have that working, I'll start creating the effects I want to see. The problem is, I can't make the stupid page "really tall."
Summary
When I set the height style property of the main-content div, it doesn't seem to trigger scroll bars unless there's actual content on the page. How do I make the page "permanently tall," so to speak? That is, I want the page to behave (scroll) as though it has 4000 pixels of content even if there's only one line of text on the page. Right now it behaves as though there's a call to:
height = Math.min(height of contents, height of div style)
Have you tried min-height for body, or html tags? min-height requires the element to be at least that height regardless of the content contained.
CSS
html, body{
min-height: 4000px;
}
Live Demo
Reference
Easy in CSS:
body
{
height: 4000px;
}
Example here.
This is the simplest way. min-height is not supported by all browsers. This is a specific height that you can set to the body tag (essentially the webpage itself) to make it really tall.
In your CSS add:
body
{
min-height: 4000px;
}
And you'll also need:
body
{
height: 4000px;
}
for internet explorer (via IE's conditional comments).
In Chrome 10, on OSX 10.6 -- this renders a complete blank page with scroll on the Y axis, hope this is how you meant:
http://pastie.org/1674432