I'm trying to implement an agendaView using fullcalendar api. what I want is: if there is more than 2 events for the same period (today 2pm-3pm = 4 events) it will show 2 events plus "+2 more".
so I used the following code:
eventLimit: true,
views: {
agenda: {
eventLimit: 2
},
week: {
eventLimit: 2
},
}
it works, but only for allDayEvents... not for events with an end date.
what I'm getting is this when I want this
but I simply want to limit my events, does anyone knows why my code isn't working? thanks a million
As per the docs (emphasis mine):
For the all-day section in the agenda views, a value of true will
limit the number of events to 5.
It doesn't support limiting the number of events on the agenda portion of the calendar.
It also isn't very clear how that would even work. It's one thing if all the events are at exactly the same time but how do you group events that look like:
Related
I have an application where I am rendering a calendar with a dayGrid view. The specific settings of the view are:
views: {
sevenDaySchedule: {
type: 'dayGrid',
duration: { days: 7 },
buttonText: '7 day',
dateAlignment: 'week',
firstDay: 1, //Monday
dateIncrement: { days: 7 },
}
},
defaultView: 'sevenDaySchedule',
I am wondering if it is possible to re-order the events within each day of the calendar?
Basically, if I have 2 or more events in a single cell (day) on the calendar, can I make it so that the user can drag and drop the events within a single day to re-arrange / re-order them?
If I have this:
Is it possible to achieve this:
Without having to rename the events every time?
I want to just be able to drag and drop events into their desired order and have them stay that way. Is it possible to achieve this where the events automatically rename themselves with the appropriate prefix ( 1), 2), 3), etc.) after being dragged and dropped?
My Calendar has a specific view : it shows 31 days (display 4 days before the current day, and 27 days after)
Therefore, I have a dynamic visibleRange for my view
let INIT = moment().subtract(4, 'days').format('YYYY-MM-DD');
let INIT_END = moment(INIT).add(31,'days').format('YYYY-MM-DD');
[...]
type: 'resourceTimeline',
visibleRange: {
start: INIT,
end: moment(INIT).add(31,'days').format('YYYY-MM-DD')
},
buttonText: '31 jours'
}
and previous/next don't seem to work when visibleRange is defined for a custom view.
I tried something involving jQuery and it mostly works, except you have to click first twice on prev/next to change the visibleRange (and you also have to click twice when you go from next to previous or vice-versa).
And I wanted for this :
calendar.setOption('visibleRange', {
start: INIT,
end: INIT_END
})
to work, but in my implementation, it only works once and when it's triggered, clicking on buttons doesn't work anymore.
You can find the code on this CodePen
Can you help me ?
Okay so a colleague of a colleague led me to the solution, thanks a lot to him.
Instead of using visibleRange and trying to manipulate FullCalendar's data with jQuery (very gross), I calculate the difference between my two moments in order to have a duration :
const INIT = moment().subtract(4, 'days');
const INIT_END = moment(INIT).add(31,'days');
let duration = INIT_END.diff(INIT, 'days')
Then I use this duration in the settings of my customView :
resourceTimelineRollingMonth: {
type: 'resourceTimeline',
duration: { days: duration },
buttonText: '31 jours'
}
and for my view to start 4 days before the current day, in the Calendar object, I set :
[...]
defaultDate: INIT.format('YYYY-MM-DD'),
[...]
Which now works flawlessly.
I developed an application in which employees input their work day.
My boss asked me to add their schedule as a watermark behind.
Schedule is a different events source that can not be changed, unlike working days.
Inputs of work days must not overlap, but must cover the schedule (hide it).
I have not found how to prohibit overlap within the same source while allowing it between different sources.
I also do not know how to make sure that in place of an overlap, I have a covering.
Thanks.
Thanks to ADyson for his help.
So the answer to my question is :
eventSources: [
{
id: 'employee',
events: <the_ajax_code>,
overlap: function(stillEvent, movingEvent) {
return stillEvent.source.rendering == 'background';
}
},
{
id: 'schedule',
events: <the_ajax_code>,
editable: false,
rendering: 'background'
}
]
The employee event source events can only overlap events from the schedule event source.
The schedule is render in background.
Working with fullcalendar on month view, i need to allow user to create max 1 event per day. If he/she try to add more, error will be show.
I'm aweare there is eventOverlap and eventLimit, i try to use both but none seems to work:
I set:
eventOverlap:false
and even try:
eventLimit: true,
views: { month: { eventLimit: 1 } },
Just to be clear, the view i'm talking about is:
Found it!
In a month view with select: true you should use:
selectOverlap and set it to false.
is there a way to make a custom view based on agendaDay but restrain to 3 days, and the action on next or previous button, move 3 days on 3 days ?
the first day always reference to moment().day()
thanks for your help
This can now be done with something like this:
views: {
agendaThreeDay: {
type: 'agenda',
duration: { days: 3 },
buttonText: '3 day'
},
defaultView: 'agendaThreeDay'
}
You can get more information on this from the document page on Custom Views.