this is my controller
$calendar = Calendar::addEvents($events)
->setOptions([ //set fullcalendar options
'firstDay' => 1,
'height' => '200px',
'themeSystem' => 'bootstrap3',
'columnHeader' => false,
'aspectRatio' => 1
]);
I change the height of container but cell size remains with a scrolling bar
i want to change my calendar like this
Replacing height with contentHeight should help change the size.
You might need more than 200px because it takes into account the whole calendars height rather than just one row. So if it was set to 1000, each section row would have a height of 162 or 329 if it was set to 2000.
So you'll just need to change:
'height' => '200px',
to
'contentHeight' => 1300,
You don't need to include the px.
Related
I add the chart title like below
chart[unique].setTitle(nn).setPadding({
bottom: -2,
right: -2,
top: -36,
left: -2
}).setMouseInteractions(false);
How do I set the font size ? I tried setFont((font) => font.setSize(12)) , but not working.
Also I am not able to add it to legendBox
legendBox["axis"].add(line[name], undefined, ' ').setText(entryname);
, I want to set font size and color for chart title and legendbox entries or full legendbox. thank you
ChartXY title font
LegendBox title and entries can be styled by methods of the LegendBox Builder (setTitle, setEntry):
const legendBox = ChartXY.addLegendBox(
LegendBoxBuilders.VerticalLegendBox
.setTitle((title) => title
.setFont((font) => font.setFamily('monospace'))
)
.setEntry((entry) => entry
.setFont((font) => font.setSize(10).setStyle('italic'))
),
)
EDIT
ChartXY title color
I'm putting several ag-grids on one page, all with less than 15 rows, but none with the same size. So I need the grid to 'snap' to the number of rows and the column width with no scroll bars.
Setting griOptions.domLayout='autoHeight' worked perfectly for the height. Setting to 'print' is also ok.
But what do I do for width?
I can get the columns the minimum width with : this.gridColumnAPI.autoSizeAllColumns();
How to I shrink the overall grid size to insure i don't get scroll bars?
this.setWidthAndHeight('XXXpx','YYYpx') doesn't seem like an option since the height was set by domLayout.
EDIT1:
I do not specify widths in my columnDefs:
columnDefs = [
{headerName: 'Category', field: 'category' },
{headerName: 'Percent', field: 'percent' },
{headerName: 'Count', field: 'count' } ];
EDIT2:
I wrapped the ng-grid in a div with style="width:500px;height:500px" , and the grid conformed to that, so I'll be trying to dynamically set the style of that div once the gridReady event fires.
So how do I get the dimensions of the grid at any point? I know I can mine the columnApi for width of each...
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);
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',
I have a grid which is declared with column widths. basically like this:
#(Html.Kendo().Grid<TelerikMvcApp1.Models.Product>()
.Name("acct_dtls")
.HtmlAttributes(new{style="width:100%", #class="panel-body"})
.DataSource(ds => ds.Ajax().Read("Read", "Home"))
.Pageable()
.Sortable()
.Columns(columns =>
{
columns.Bound(Agent => Agent.ProductID).Width(300).Encoded(false).Hidden(false).Groupable(false).IncludeInMenu(false).Sortable(false);
columns.Bound(Agent => Agent.ProductName).Width(100).Encoded(true).Hidden(false).Groupable(false).IncludeInMenu(true).Sortable(false);
})
.Reorderable(r => r.Columns(true))
.Resizable(r => r.Columns(true))
.ColumnResizeHandleWidth(5)
.ColumnMenu()
.Filterable()
.Scrollable()
)
the problem is when it is rendered, the browser automatically adjust the columns widths just like responsive rendering. i have tried setting the table-layout property to "fixed" but still no working. Thanks for those who will share their knowledge
The grid has the table-layout: fixed setting applied by default. The problem is that you have set the width of both columns to a value which is less than the total grid width. You should avoid setting the width of one of the columns so it can occupy the remaining space.