Is it possible to remove the fc-more tag from fullcalendar for the current day in month view? Ex: the previous day still have the possibility of having the button of more events and the current day not having the button
I have a fullcalendar month view, and am adding all-day events to it. Is it possible to get those events to display as half of the width of the day so that I can have 2 columns of all-day events each day?
My goal is to limit the height of each day as more events are added. Currently, when I get around 7 events, and each day can get quite tall.
I hope to save that vertical space by listing the events each day in two columns. Is it possible?
I am using a fullcalendar.js Version 2.4.0 and fullcalendar spans long events I.e Events which are From 3rd May to 5th May are show as a long Event Streched all over, but what I need to show is to span multi - day Events as Seperate Event on Each day
For Example in Image attached Below A Event Children's Petting zoo is a 3 day Event, so it is shown 3 times seprately on these days which is giving it a clean look. I want to show in the same way.
How can Acheive this as given in Screenshort with Fullcalendar in All the Views.
See Screenshort of my calendar and point 2 which I want to do.
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.
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.