when first rendered on page (in Week view), FullCalendar window always starts at 6am.
http://prnt.sc/e3yi17
Is there an option that changes this behaviour so that the default window position is at some other time, say 10am? I just don't have tasks starting at 6am so I don't want to scroll down every time a page opens.
Use scrollTime property:
$('#calendar').fullCalendar({
defaultView: "agendaWeek",
scrollTime: "15:00:00"
});
Try fiddle.
Related
I have rendered full calendar with agendaWeek and agendaDay options on a web page. The agenda views do not display time increments on the Y-axis (left pane of the fullcalendar view).
Why would this be?
I have not included any events on the calendar yet. I just wanted to have a blank calendar to start with, but the agenda views have empty slots for each time increment like "10pm, 11pm, 12pm etc" but the time slots are empty white space.
The top left corner of the agenda view does have the label "all day" for all day events.
All day default was set to false when rendering the calendar.
on the Day view, the FullCalendar shows available times from 0 to 24.
I need to show only certain times (from 8 to 18).
How can I achieve this?
Thanks
In the Agenda Options you can set minTime and maxTime.
minTime - Determines the starting time that will be displayed, even when the scrollbars have been scrolled all the way up.
maxTime - Determines the end time (exclusively) that will be displayed, even when the scrollbars have been scrolled all the way down.
Can't seem to find an answer to this - so thought I'd give this a shot.
I have read several answers on how to detect a click of a background event. Such as this: Detect click on background event
What I've found, however, is that when two ore more background events are on the same row, only the last day rendered as a background event will contain the proper CSS target to allow detection. All the previous days on that row (month view is what I'm working in) will act as regular "dayClick" events, even though they are actually rendered as background events.
For example, in this image, clicking on the 25th is detected, while clicking on that 22nd is not:
Looking at the source of the page, the first three days (the 22nd through the 24th) all appear in this image on the line marked "1". It's a TD with a colspan of 3. The line marked "2" is the line that has the TD containing the 25th:
Effectively anything before the 25th is cut off from being targeted using fc-bgevent.
It should be noted that a single background event that spans days works as expected. So if I was to simply extend the end date of the event that starts on the 22nd to the 25th, it will all work - except of course the "start" date that you receive in the click event will be the 22nd, no matter which day you click on.
Has anyone found a way around this?
What I want to do is render background events and also detect the date when they are clicked.
Thanks, in advance, for the help.
Use selectOverlap to detect click on background events
selectOverlap: function(event) {
// Here you will get all background events which are on same time.
console.log(event);
return event.rendering === 'background';
}
I am using full calendar in a new web app and have ran into a problem once we deployed. On the Agenda view with the all-day slot enabled the all-day slot expands as events are added. this did not present any issues during our initial test but we have ran into a problem with many events. The all-day slot continues to expand eventually making the agenda view disappear or be too small to be functional. Is there a work around to add a scroll bar to the all-day tab or set a min height for the agenda view? I have tried everything I can think of and have been unable to get anything to work. Please see attached screen shot from the calendar test files.
While you can restrict the size of the all day section my modifiying it's class. The events themselves are positioned by absolute x - y coordinates on the page and aren't actually inside the all day section at all, so scrolling that box would be pointless anyway.
I'd say without modifying the source considerably this is not possible.
I'm not sure what you mean by setting a min-height?
I have set up my fullcalendar to display a mixture of 1 day events (shown in one color) and week-long events(shown in diff color). I wanted to improve the visibility of events as it can get confusing with lots of overlapping events, so i set it up so that an event is highlighted with yellow border on mouseover.
This all works ok, except when i have an event that spans over a weekend - ie. starts on wednesday, ends on following wednesday - on mouseover the event is only highlighted for the current week - the portion of the event that falls after the weekend, is not highlighted,
any help would be greatly appreciated !
Ok,
I got this working.
fullcalendar.js generates a unique id for each event -> event._id (_fc1, _fc2...etc)
Each event is represented by an anchor tag (). An event that spans over a weekend is represented by 2 anchor tags. The unique id for each event is not outputted in the html by fullcalendar.js so it is impossible to see which anchors are associated with which events.
I made a small change to fullcalendar.js which adds the unique id of each event to the anchor being generated (as an additional css class name)
This means that all anchor tags associated with an event can be selected in the mouseover event using the JQuery class selector.
eventMouseover: function (event, jsEvent, view) {
$("." + event._id).each(function (index) {
$(this).css('border-color', 'yellow');
});
},
works for me !
There could be a better way, but I found a way that does not touch the source:
Add a unique css class for each event.
When rendering, even if the event stretches across weekends, the class is applied to all segments.
When user clicks an event:
$("." + calEvent.className).addClass('red');
Side note: When you drag an event, the other segments, belonging to the same event, are hidden, so fullCalendar is aware of the other segments, but I have not found a way to access them through the API.