FullCalendar auto-height in week view - fullcalendar

I need to have a calendar in week mode which would take all the width it can take and take all the height it needs to not have scrollbars.
If I keep default settings height: auto, aspectRation: 1.35, I see a vertical scrollbar:
If I change aspectRatio to 1, scrollbar disappears but I see a useless empty area at the bottom:
Is there any way to fix it except guessing the aspectRatio (which is not a case for me as minTime and maxTime are dynamically changed so the conent height changes)?

Edit:
Fullcalendar v2.1.1
http://jsfiddle.net/3E8nk/560/
contentHeight: 'auto',
Solution for old versions?
Kind of hack:ish. Does this work in your environment? I used the code from your other question.
http://jsfiddle.net/3E8nk/558/
contentHeight: '9999',

Adjusting dynamically the height instead of the aspect ratio worked for me:
Asigning the calendar to a variable when initiating:
calendar = $('#calendar').fullCalendar({
height: $(window).height()*0.83,
...
});
And then adjusting height dynamically (after checking that calendar exists already in order to avoid initial error messages):
if(calendar) {
$(window).resize(function() {
var calHeight = $(window).height()*0.83;
$('#calendar').fullCalendar('option', 'height', calHeight);
});
};
The factor *0.83 depends on your page-design.
Hope this helps.

For version 3 and 4 you can try add height: 'parent' to your config.
ref: https://fullcalendar.io/docs/v3/height

Perhaps setting the height to auto would work: It works in Month view for me.
$("#calendar").fullCalendar({
timezone: 'local',
ignoreTimezone: true,
defaultView: 'month',
weekNumbers: false,
slotDuration: "00:15",
allDaySlot: false,
slotEventOverlap: false,
firstDay: '1',
height:'auto',

Related

Tippy.js z-index not working with interactivity

Ref: https://atomiks.github.io/tippyjs/
The z-index seems not be working when specifying interactive:true (then it falls behind other elements) although I specify the #main_container. How can I get it "on front of everything" with interactive:true?
delegate( '#main_container', {
target: '[data-tippy-content]', allowHTML: true,
interactive: true, placement: 'right', theme: 'light', zIndex: 99999
} );
see also here: https://github.com/projectje/bookmark for the above code. I made a temporary workaround by placing a BR behind every first character so that it will not flow over other boxes. But this is really a short-term workaround.
The tippy is appended to the reference element's parent by default when interactive — this can cause it to be clipped if the parent is a "containing block".
To fix use one of these:
Use popperOptions: { strategy: 'fixed' }, or
Specify appendTo: document.body + focus management for keyboard usage

resize header not working on DataTable js

I've got a datatable that is responsive, except for the header. The table is initialized according to the code below:
$('.datatable-objects').DataTable({
autoWidth: false,
responsive: true,
scrollX: true,
dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
language: {
search: '<span>Filter:</span> _INPUT_',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
}
});
// Add placeholder to the datatable filter option
$('.dataTables_filter input[type=search]').attr('placeholder','Type to filter...');
// Enable Select2 select for the length option
$('.dataTables_length select').select2({
minimumResultsForSearch: Infinity,
width: 'auto'
});
$('.dataTables_scrollHeadInner').css({"width":"100%"});
$('.datatable-objects').css({"width":"100%"});
$('.datatable-objects').on( 'draw.dt', function () {
$('.dataTables_scrollHeadInner').css({"width":"100%"});
$('.datatable-objects').css({"width":"100%"});
});
});
I need the css hacks at the end in order to make it resize appropriately on window resize. Otherwise, there is a hard size put in the width property and resizing is not working correctly.
I'm not clear on why I need to add this, while in other examples I see there is no need. Anybody a suggestion?
Let's say you have the "tbl-principal" table, then you just need to add as follows:
$('#tbl-principal').dataTable().fnAdjustColumnSizing();
Remarks: if you need to resie on window resize, the code of above needs to be putted on $(window) resize function.
In my case, I´m doing a show/hide div, so... i just put the code on my function...
And that's it... It's working!

Fullcalendar dynamic height depending on width

Is it possible to make the value of the 'height' tag the same as the 'width' of the table? The width changes on different screens so I think the height tag should be filled with a piece of jQuery code? I would lik to do this in order to make an exact square (and also all the td's squares).
Thanks.
Jan
You need to set the Aspect Ratio.
From doc:
The following example will initialize a calendar who's width is twice
its height:
$('#calendar').fullCalendar({
aspectRatio: 2
});
So, in your case:
$('#calendar').fullCalendar({
aspectRatio: 1
});
aspectRatio is one of those properties that already have setters, so you can define it after initializing the calendar:
$('#calendar').fullCalendar('option', 'aspectRatio', 1);

Issues Migrating extjs 4.0.7 to 4.1.1

I'm having a few issues when attempting to make the switch from extjs 4.0.7 to 4.1.1.
The first issue is as follow:
I have two treepanels which are within a column layout. One right next to the other. My app loads a bunch of nodes into the left panel, and then you can optionally move some of them to the other panel. However, the panel with all the nodes is not showing a scrollbar, and thus I can't see about 1/3 of the nodes all of a sudden. I had a semi-similar issue in 4.0.7 where I couldnt see the last node moved if the panel was full until I moved another node. I fixed that with the following lines:
treePanel1.invalidateScroller();
treePanel2.invalidateScroller();
These lines are deprecated in 4.1.1, and the problem seems to have become worse. Has anyone had a similar issue, and how do I get my scroll bar back.
A second major issue related to my UI:
I have two grids right next to each other elsewhere, layed out similarly to the treepanels. I've set up drag and drop between the two grids. Again all the nodes start in the left grid, with the option to drag some into the right grid. However, the right grid is now not showing at full size, it is defaulting to a sliver. So, the DD functionality is still there, if you know to drag the node to that little sliver. Afterwards, the sliver expands enough to hold the single node and so on. So, how do I get it back to defaulting full size. Why had extjs 4.1.1 caused these issues? I'd have to fat finger in any code, but can if absolutely neccessary. However, if anyone is familiar with this type of issue based on my description, that would be great.
Edit: Also, I have a combobox in the right-most column of the grids. When I click to change one of the comboboxes, a mini scrollbar thing pops up that sort of blocks the dropdown button. What have they done to this version?
Here is the layout definition where I have the first problem where the scrollbar doesn't show up on the panel when it needs to:
{
xtype: 'panel',
title: 'Select fields',
defaults: {
border: false,
height: '100%'
},
layout: 'column',
items: [
{
xtype: 'treepanel',
itemID: 'choicesTreePanel',
title: 'Choose from below fields',
height: '100%',
multiSelect: true,
store: choicesTree,
rootVisible: false,
columnWidth: .44},
{
xtype: 'panel',
columnWidth: .06,
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
margins: "15 0 0 0"
},
items: [
{
xtype: 'button',
text: '==>'},
{
xtype: 'button',
text: '<=='},
{
xtype: 'button',
text: 'RST'}
]},
{
xtype: 'treepanel',
itemId: 'chosenTreePanel',
title: 'Fields',
border: true,
store: chosenFields,
rootVisible: false,
columnWidth: .44,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop,
dragText:'
dragginggggg '
},
ddGroup: '
fieldsDD '
}
},
{xtype:'
panel ',
columnWidth:.06,
layout:{
type:'
vbox ',
align:'
center '
},
items: [
{
xtype: '
button ',
text: '
UP '},
{
xtype: '
button ',
text: '
DOWN '}
]
}
]
}
Edit: on the left panel, if I make height a set value, and autoscroll true, I have a scrollbar. If I set height '100%' and autoscroll true, there is no scroll bar. So a solution might be to find out how to have the panel fit the height of the parent, while maintaining the scrollbar
Although you are looking for a percentage based height solution, you can also use a constant value height. In many cases this will avoid your problem. For example, set the panels to 600 height, that should fix the scroller issue.
This does not solve your issue in percentage based layouts. Hopefully someone else can provide help with that.
(maybe it is best to split your question into multiple separate questions)
Concerning your first question about the panel height and scrollbar:
In your example I would ask myself the question "I want the treepanel to have a 100% height related to what?".
A column layout is typically used when you don't care about the height of the child elements related to their parent: the sum of the height of the child elements define the height of the column as you can see here: http://docs.sencha.com/ext-js/4-1/extjs-build/examples/layout/column.html.
You did not define any height on the columns, so it uses the height of the child elements (which have no height in your example). I don't know what Ext does in this case, but based on this, it cannot do anything smart.
If you want the treepanel to use the whole height of the containing panel, you would use a hbox layout with the align property set to stretch.
That might fix the scrollbar too since height calculation can be done properly.
Don't forget to remove the "height: 100%" and "autoscroll" properties since they mix things up.
Finally, changing the layout of the treepanel to 'fit' might give you the result you are looking for.
Your code might become something like:
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'treepanel',
layout: 'fit',
flex: 44,
...
}, {
flex: 6,
...
},{
flex: 44,
...
}]
}
I did not test this answer on your code. Please provide a full working code sample (with a dummy store) and I'll test it.

how can I auto fit FullCalendar into a specified div space

I want to fit fullCalendar into a specified div space giving it a fluid effect but find it hard to do. I even tried using the aspect ratio but not getting any luck.... below is what I did so far
$(window).resize(function() {
var ratio = $(window).width()/$(window).height();
$('.resize').html('<div>ratio:'+ratio+'</div>');
calendar.fullCalendar('option', 'aspectRatio', ratio);
});
Adjusting dynamically the height instead of the aspect ratio worked for me:
Asigning the calendar to a variable when initiating:
calendar = $('#calendar').fullCalendar({
height: $(window).height()*0.83,
...
});
And then adjusting height dynamically (after checking that calendar exists already in order to avoid initial error messages):
if(calendar) {
$(window).resize(function() {
var calHeight = $(window).height()*0.83;
$('#calendar').fullCalendar('option', 'height', calHeight);
});
};
The factor *0.83 depends on your page-design.
Hope this helps.
you'll need to set the height property dynamically:
http://arshaw.com/fullcalendar/docs/display/height/

Resources