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.
Related
In "FullCalendar" I could add an event using "addEventSource" by array manually, however, I could not succeed adding the event through Google Calendar ID.
$('#calendar').fullCalendar("addEventSource",{
events: [
{
title : 'event1',
start : '2019-02-01'
}
]
});
THE BELOW SNIPPET NOT GETTING THROUGH. PLS ASSIST
$('#calendar').fullCalendar("addEventSource",{
events: {
googleCalendarId: 'abcd1234#group.calendar.google.com',
}
});
FYI by FUllcalendar: Source may be an Array/URL/Function just as in the events option. Events will be immediately fetched from this source and placed on the calendar.
Firstly please ensure you followed all the steps in the documentation (https://fullcalendar.io/docs/google-calendar) beforehand otherwise it won't work.
Secondly, your object structure is wrong. The events wrapper should not be there when specifying an event source. Perhaps you confused the events option in fullCalendar as being part of the structure required for an event source object, which is documented here: https://fullcalendar.io/docs/event-source-object
Specifically it documents the structure for a google calendar to be the source:
{
googleCalendarId: 'abcd1234#group.calendar.google.com',
color: 'yellow', // an option!
textColor: 'black' // an option!
}
So I suggest you change your code as follows, to match the documented object structure. Basically you just remove the erroneous events bit:
$('#calendar').fullCalendar("addEventSource", {
googleCalendarId: 'abcd1234#group.calendar.google.com',
});
Sorry if this has been asked previously, but I couldn't find the answer. In the agenda views, if I have allDaySlot = true, then only the All Day section is displayed and no time-specific events (or even the time panel) are displayed. If I have allDaySlot = false, then the time specific events display, but not the All Day Events. Here is my calendar setup:
$('#calendar').fullCalendar({
defaultDate: "2016-12-05",
allDaySlot: true,
defaultView: 'agendaWeek',
events: [{ id:1,
start: "2016-12-06T10:00:00",
end:"2016-12-06T18:00:00",
title: 'test timed event',
allDay: false },
{ id:2,
start: "2016-12-07",
title: 'All Day Event',
allDay: true }
]
});
Here is the output:
enter image description here
As with most things, I'm sure I'm missing something quite simple. Thanks in advance for your assistance!
As stated by Krysztof, my code functions correctly. I stripped down the page containing my code (removing a master page, etc) and the code functions correctly in my app. So, I'm off to hunt for the conflicting code.
EDIT (for someone else having this problem): My page references a .NET master page and the calendar resides inside a content tag. I believe this is causing a conflict on the "fc-time-grid-container" element of FullCalendar. This element has an inline style applied to it for Overflow-x and Overflow-y. Removing those settings renders the calendar correctly. For now, I'll remove them via javaScript code after the calendar renders until I can find a better solution.
I need to simulate a drag & drop on fullcalendar in the week view with protractor. I found something with coordinates but I'd like a "no browser window dependent solution"... ther's also no way out on finding the exact starting cell in the week view by class or id ...or at least, I couldn't figure how to select a single cell of a row of a day because, using the Chrome's item selector, it seems every row has the same class fc-widget-content and cells are not "selectable" elements.
Are there any other chances?
maybe this is a little bit helpful (also very later ;). I also want to test my app with FullCalendar, but I'm using Cypress (similar to Protractor).
We plan items from an external list and assign it to a resource on a certain day/time in the FullCalendar (we use the scheduler plugin).
I found out that the drag and drop event is somehow intercepted by code, enriching it with for example properties of the event (like date, title and others). How I enriched this data is in the Cypress trigger('drop', data) command. Data is the evenData that is set by the Draggable class:
// Executed on the external list items, where every item we want to plan has class `.fc-event`.
this.draggableContainer = new Draggable(this.containerEl.nativeElement, {
itemSelector: '.fc-event',
eventData(eventEl) {
const id = eventEl.dataset.id;
return {
duration,
id: currentWorkItem.id,
title: currentWorkItem.description,
extendedProps: {
duration,
customRender: true,
data: currentWorkItem,
},
};
}
Then, in your test file (Cypress)
const eventData = {
date: new Date(),
dateStr: new Date().toISOString(),
draggedEl: {
dataset: {
notificationId: '123',
priority: '0',
title: 'Test',
},
},
jsEvent: null,
resource: {
id: '123',
},
event: null,
oldEvent: null,
};
cy.get('.fc-event') // selector for the external event I want to drag in the calendar
.trigger('dragstart')
.get('.fc-time-grid table tr[data-time="07:00:00"] td.fc-widget-content:nth-child(2)') // selector for where I want to drop the event.
.trigger('drop', eventData) // this will fire the eventDrop event
So, .trigger('drop', eventData) will fill the eventDrop info. It is not exactly the same as doing it manually, but works for me.
Caveats:
I haven't found a way to plan it on another resource (we use the resource scheduling plugin of FullCalendar.io). It does not matter that much, because you can specify it in the evenData (resource: { id: 'my-resource-id' } }.
No visual feedback because the drag mirror is not shown. Not a big problem during e2e testing, but it is a bit of a blackbox now. Maybe this is fixable
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.
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.