I see that using v2.1.1 there is an extra week displayed after September - so the first 10 days of October are displayed there.
Examples:
can be seen right now on the home page of http://arshaw.com/fullcalendar/
And also at: http://jsfiddle.net/dLsnqomc/
And screen cap below...
Code:
<div id="calendar"></div>
$('#calendar').fullCalendar();
Any idea how to remove the superfluous last week (October 5-11)?
Thanks
There are a couple places you could look. It sounds like the issue may have been resolved by setting a value for fixedWeekCount (indicated in the comments), but you may also want to take a look at weekMode:
'fixed'
The calendar will always be 6 weeks tall. The height will always be the same, as determined by height, contentHeight, or
aspectRatio.
Use fixedWeekCount as true instead.
'liquid'
The calendar will have either 4, 5, or 6 weeks, depending on the month. The height of the weeks will stretch to fill the
available height, as determined by height, contentHeight, or
aspectRatio.
Use fixedWeekCount as false instead.
'variable'
The calendar will have either 4, 5, or 6 weeks, depending on the month. Each week will have the same constant height,
meaning the calendar’s height will change month-to-month.
Use height as "auto" and fixedWeekCount as false instead.
the solution worked for me is; adding the option
fixedWeekCount: false,
to config properties of ui-calendar
Related
I'm using ReactDatepicker and massively impressed by the number of customizations they offer right off the box, thank you very much for that.
Here is a real world problem I'm struggling with. As you can see there are three columns:
choose a show
pick a date
find tickets
Ideally, I would like datepicker to have a width equal to the width of the column.
There is some documentation provided:
https://reactdatepicker.com/#example-28
https://popper.js.org/popper-documentation.html
But maybe there is a magical modifier allowing me to say "take 100% width of the parent container"?
Currently I can modify the size by changing the width of an individual item:
$datepicker__item-size: 1.7rem !default;
https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/variables.scss#L16
But modifying that doesn't work for me - the column width as defined as % of the parent.
I have a calendar that was customized and working with FullCalendar version 1. Now, I've updated it to version 3. I've updated the CSS and settings to match what I had before, but cannot find a way to adjust the day height in the month view.
On the left is the old display and on the right is the new display, where the day cells are too tall.
I would do it in CSS, but the height of the week is dynamically set by the code so should be adjustable.
The old version resulted in this:
and the new version results in this:
How do I tell the code what I want?
Solved. Turned out to require two settings.
In the CCS, make the min-height smaller:
.fc-body .fc-row { min-height: 45px; }
And in code, change the aspectRatio to a new 'magic' number:
.fullCalendar({
aspectRatio: 1.09
});
Changing the aspectRatio without first reducing the min-height does not result in a height less than the min-height.
So here is an issue:
Web sites features 4 columns with descriptions, each inside the <p> element.
The problem: since text size differs by column, some columns are shorter than the others and when using a mobile phone or a tablet, they appear like this:
http://imgur.com/DZ7YKnz
How would one solve such issue? At first I have tried the min-height attribute but since there are so many resolutions, and sometimes I split into 4 instead of 2 columns per row, depending on device, setting min height for each resolution is a pain.
Is there any other way to do that?
Site: https://www.piere.lt
A solution could be using some javacript to equal the height of all columns; there are a lot of libraries like http://brm.io/jquery-match-height/
A suggestion: use pure-u-md-1-2 pure-u-lg-1-4 to show items 2 by 2 at lower resolutions
I have an countdown page, that counts down the time to a specific date. Now, every time the milliseconds gets only 2 or 1 decimal, the whole text moves itself (looks like flickering). What would I need to change to get the text to stand absolutely still?
I made a GIF of how it looks.
You could add a width to the element containing the text using either width or min-width. This would stop it from resizing every time the text gets shorter.
I think that the only solution is give a fix width (max width that 3 numbers occupy) to each (minutes, seconds, mili seconds).
I am trying to restyle a instance of FullCalendar so that the day and week views run the entire height of the web page. i.e. I do not want a scrollbar to view the entire day. I tried removing overflow and the fixed height but that doesn’t work.
Is it possible to do this?
You can change the slotMinutes when creating the chart http://arshaw.com/fullcalendar/docs/agenda/slotMinutes/
and then you can adjust the content height to fit it all in there with this
http://arshaw.com/fullcalendar/docs/display/contentHeight/