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.
Related
I am using fullCalendar package to add calendar in my project. By default the view shows by months and I want to change it to weekly bases.
From fullCalendar documentation, agendaWeekis what I am looking for.
I tried the following (didn't work):
$("#calendar").fullCalendar({
defaultView: 'agendaWeek'
});
When I create button and add the following event to it:
Template.appointments.events({
'click #check': function(e, t) {
e.preventDefault()
// console.log(Requests.find({}).fetch())
$('#calendar').fullCalendar('changeView', 'agendaWeek');
}
});
It works and the calendar changes.
My question is, how can set the calendar view to agendaWeek by default?
It would even be better if there is a way to make it similar to the calendar in their official page were there are three buttons (month, week, and day) buttons to choose from.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay', // gets you the three button tabs that you were looking for, similar to the demo
},
defaultView: 'agendaWeek' // default view is agendaWeek
});
Here is the jsfiddle for it.
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 having trouble adding events to fullCalendar when I specify a source parameter in the event I pass to renderEvent - what am I doing wrong?
If I specify a source, the event does not (ever) show on the calendar... Looking at fullcalendar.js v2.3.2 line 9348 Could it be that the cache.push(events) is incorrectly placed in the if statement just above?
(The scenario here is that when I add new events, I want them to become part of a particular source, not fullCalendar's internal "sticky" source).
Thanks!
Explanation
You should not specify a source property.
From event object documentation:
source: Event Source Object. Automatically populated.
A reference to the event source that this event came from
I've created a plunker with very Basic fullCalendar 2.3.2 with creation of event with source when you can check how the source property works:
So if you define an event like:
{
title : 'mytitle',
start : moment(),
allDay: false,
id: 1,
description: 'my event from source'
}
You can check, in the console of the plunkr, that the event receives a Source property, automatically populated, with the content:
event.source
{
events: Array[1],
className: Array[0],
origArray: Array[1]
}
Proposed solution
So for your goal you should define your events as items in an array source:
var mySource1 = [{
title : 'Source 1',
start : moment(),
allDay: false,
id: 1,
description: 'my event 1'
}];
var mySource2 = [{
title : 'Source 2',
start : moment().add(1, 'days'),
allDay: false,
id: 2,
description: 'my event from 2'
}];
And to attach them to the calendar you can:
Option a
Define in your calendar not your events, but your sources using eventSources as an array of your sources:
$('#calendar').fullCalendar({
(...)
eventSources:[mySource1, mySource2],
});
Option b
Add your source via add event source method
.fullCalendar( 'addEventSource', mySourceN );
Option c
Updating eventSource:
If you want to add dynamically an event to a specific source, the only way you can achieve it is removing and adding again the source:
So something like:
var myNewEvent: {
title : 'mytitle',
start : moment(),
allDay: false,
id: 1,
description: 'my event from source'
};
mySource.push(myNewEvent);
$('#myCalendar').fullCalendar( 'removeEventSource', mySource);
$('#myCalendar').fullCalendar( 'addEventSource', mySource);
Honestly, I dislike this C option, but maybe is what you need. There's an open issue with this situation in which Adam Shaw propose that solution.
I have a sencha touch 2 app which is working flawlessly without deployment. However, when I deploy to either testing, production or native, I have several buttons inside a navigation view with tap events which won't work anymore. No errors are shown. I cannot understand why this is happening only after deployment.
Here is the relevant code:
Controller:
control: {
'#main-function': {
tap: 'loadFunction'
},
loadMyBoat: function() {
this.getProducts().up().push({
xtype: 'myxtype',
})
Ext.getStore('Items').getProxy().setUrl('myurl');
Ext.getStore('Items').load();
},
View:
Ext.define('MyBoat.view.ItemList', {
extend: 'Ext.navigation.View',
xtype: 'myxtype',
config: {
title: 'My Title',
styleHtmlContent: true,
defaultBackButtonText: 'Items List',
items: {
xtype: 'list',
itemTpl: '{Field_Name}',
title: 'Tap on a boat to access further details',
store: 'Boats'
}
}
})
Anyone ever encountered this? Any help would be greatly appreciated.
Open up your DOM editor (in chrome, F12 I believe). Your control selector is selecting #main-function, so you'll want to make sure this is a valid selector.
On the console of your developer tools window, type:
Ext.ComponentQuery.query('#main-function')
This should be what the controller is trying.
After lots of debugging I managed to fix the problem. Turns out that using the following code to generate any component will not work well after deployment:
new Ext.button({.....})
Instead you have to use xtypes rather than the new keyword. I think this has something to do with the fact that the deployer stores all the js code in one file and thus since I was using the new keyword, it was being created somewhere in the js file when it actually won't exist in the context. The weird thing is that it does not show any errors so hopefully this will help other folks.
I must set timeFormat, axisFormat (HH:mm) called from within a 'ready' block!
I read a article from http://www.learningjquery.com/2007/10/a-plugin-development-pattern.
And maybe I'm wrong, but I think the only way to set parameters for fullcalendar is to pass it by 'constructor' - I mean:
jQuery('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-06-08T14:30:00',
end: '2010-06-08T15:45:00',
allDay: false
}
// other events here...
],
defaultView: 'agendaDay',
timeFormat : {
"" : "H:mm{ - H:mm}",
agenda : "H:mm{ - H:mm}"
},
axisFormat : "H:mm"
});
But I really need to set those(timeFormat, axisFormat) properties after object initialization...
Is it an implementation bug that those properties cann't be overwritten after?
*I'm using seam, primefaces(with fullcalendar.js). I really don't know is there any other solution... help :)
there is actually an undocumented function for this. use
$.fullCalendar.setDefaults({
// your options here
});
i can't guarantee the api won't change in the future though. since this is unofficial, i cant help you beyond this. good luck