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.
Related
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.
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:
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.
I am sure there is a simple solution, but after reading existing posts and the documentation, I haven't been able to locate it just yet. This is my first post here, so any help is much appreciated.
I am integrating the FullCalendar with ExpressionEngine and the Calendar module for EE, and I have events rendering in FancyBox.
My only remaining issue is that the background of each event is the same color. What I am wanting to accomplish is on any given day, make multiple events have a different background color to identify the event as unique. In the documentation, it explains how to change the background color, but it's an "all-or-nothing" solution.
I also attempted to tweak the styles, but this made every day cell have the background color, rather than the actual individual events.
The code that builds the calendar and populates events from EE is listed as follows:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: ''
},
editable: false,
events: [ {}
{exp:calendar:events event_id="{segment_3}" sort="asc" dynamic="off"}
{occurrences}
,{title: '{event_title}',
url: '{url_title_path="path_to/event/"}',
start: new Date({occurrence_start_date format="%Y,%n-1,%j"}),
end: new Date({occurrence_end_date format="%Y,%n-1,%j"}),
allDay: true,}
{/occurrences}
{/exp:calendar:events}
],
eventClick: function(event) {
if (event.url) {
$("a").fancybox(event.url);
return false;
}
}
}); });
This would be simple to do if the events were manually being populated, but the data is coming from ExpressionEngine, rather than being hard-coded.
Any thoughts on how to make each event on a per-day basis render with a different background color than any of the other events listed for that same day?
Thanks for reading!!!
The current version of fullCalendar has a property on an event object '.backgroundColor' which can be set to change the background colour of that event. Of course you'd have to write some code to set up the background colours to all be unique within a day.
You may consider using the css3 nth child selectors here. This will allow CSS to automagically change the colors for you. See: http://css-tricks.com/how-nth-child-works/
You would of course need to target the appropriate elements, but without seeing the full DOM it will be very difficult for us to help with that here.
You can use eventAfterAllRenderwhich is triggered after all events have finished rendering in the fullCalendar from both source.
eventAfterAllRender: function( view ) {
var allevents = $('#calendar').fullCalendar('clientEvents');
}
Now, with the allevents object, you can do whatever toy wish.
Here is the one I took for me:
eventAfterAllRender: function(view) {
var allevents = $('#calendar').fullCalendar('clientEvents');
var countevents = 0;
if( allevents.length ) {
countevents = countevents + allevents.length;
}
if(!countevents) {
// alert('event count is'+countevents);
console.log('event count is',countevents);
}
}
One of my friend was able to get the id of duplicate events and now I can delete the duplicate event within a loop as:
$('#calendar').fullCalendar('removeEvents', allevents[i].id);
Now it is up to you. Very sorry because I am running a busy schedule nowadays. I'm glad if someone would generate a proper solution for Mr. Lane from this(even by editing this answer).
Thank you.