I have a lot muti-day events, but they overlays other events makes them invisible.
Day date also get covered by events.
Is this issue with calendar rendering or styles, any suggestions?
My expectations for this scenario that day cell should be expanded vertically to let all events to be placed one-by-one.
Found a problem in my UI kit which had custom styling for FullCalendar, day frame height has been locked by custom css.
.fc .fc-daygrid-day-frame {
height: 190px;
}
Related
I am struggling with a primefaces calendar problem on a webpage rendered on a mobile device (tablet). It seems that the css values calculated by primefaces to show the popup calendar are not recalculated on window rotation (you need to click on it again to recalculate).
Here is an example:
I have my webpage displayed in portrait mode. I clicked the calendar icon and the position of the popup is good:
(notice the css with left: 719.406px, calculated by primefaces). Everything OK so far.
Now I rotate to landscape mode:
Notice that the popup is no longer near the calendar icon. Also, the css states that, by having the same left value.
In order to get it correct, I need to click anywhere on the screen to close the pop up, then click again on the calendar icon:
The position is now good, with a different and correct value of left: 1061.91px.
How can I make primefaces automatically readjust the css without having to double click each time?
The solution found for me so far was to add a custom value for the right alignment with the screen and override the left one:
.ui-datepicker.ui-widget.ui-widget-content {
left: auto !important;
right: 10px;
}
But the above solution is very specific for this screen and luckily because I always have the calendar button in the right part of the screen, so I can always assume that 10 pixels from the right will look ok.
I also noticed that ui-datepicker-div is a child of body element, so I cannot link it with the button with css.
Any ideas/help of a general solution will be highly appreciated.
Primefaces version: 6.2
This problem is fixed with Primefaces 7.0.RC3.
It was released a week ago.
https://mvnrepository.com/artifact/org.primefaces/primefaces/7.0.RC3
We are using the all in one Calendar from Wordpress and have it set to week view (only this view). Everything is working fine, but there is one problem when you have set two events to the same time. There is an overlaps in the two events and you can not see one of the two. We can not change it in css and did not find a way to modify the code.
In the code the css is automaticly made, for instance to:
top 1185px
height 60px
left 8px
Can someone help?
Ok we did find the answer for this question:
Open week.php (in the template file) and look for the code
left: px;
The 8 is the 8px left and because it is just 8px you can not see the event behind it. We changed it to 30 so:
left: px;
Now we can see the other event
If you take a look at fullCalendar website, we are presented with a calendar.
If I attempt to drag the calendar's event, the events are always hidden behind the canvas' edges
Is there any way I can modify the CSS, so the events are popped up outside of the canvas?
The calendar can be found here: http://arshaw.com/fullcalendar/
Thanks in advance!
Add this to your CSS file:
div.fc-view.fc-view-month.fc-grid {
overflow: visible;
}
I am new to FullCalendar, downloaded and added to a php project. Added an event (hardcoded) as per the examples and it shows great except, the height of the event is so tall. It looks like there is padding above and below the text, nothing like all the examples I have seen where the events are nice thin blocks.
I have researched and found code to lower the height of the events but, when I do this it cuts off the bottom of the event time and title.
For example, I added .fc-event { height: 1em; } and it makes the events look more the all the examples BUT as I mentioned, it only cuts the event bottom and cuts off the bottom of the time and title (cannot read the event).
Here is a link to images http://snappdf.tumblr.com/
Using .fc-event changes the CSS for all events on your calendar. You might prefer using the className attribute of the event instead. This way you can customize individual events without impact.
Also, please post some code or better a jsfiddle to better understand the problem.
Is it possible in fullcalendar to align some event box to the bottom instead of the default normal top align in the month view?
The idea is to have some events aligned up and others aligned down. (Important events up, less important events down (even in the same day)).
Thanx in Advance...
Attorn
The way I would handle it is to make sure that you have your two event sources in the order that you want them to display. AKA. Google 1 then Google 2....
Then I would assign a className: object to the top source and add a css margin-bottom:15px to the className that you gave the source. This will separate the two sources as I think the goal is to do.