I need to create more fields for my calendar ( fullcalendar hooked up to mysql with php ). And I have been reading up on eventRender but I'm not entirely sure of the syntax and where I should put it.
Currently I have the following;
$calendar.fullCalendar({
timeslotsPerHour : 4,
defaultView:'agendaWeek',
allowCalEventOverlap : true,
overlapEventsSeparate: true,
firstDayOfWeek : 1,
businessHours :{start: 8, end: 18, limitDisplay: true },
daysToShow : 7,
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "json-events.php",
eventRender : function(calEvent, $event) {
calEvent.distributor //this is my new field
},
But I its not working and I can't find any working examples to compare it with.
Thanks
Thanks for the feedback I have been able to add my custom fields using the eventRender. So now not just body and description are being passed.
My main issue now is passing the date values to the database as these are not being saved. Does anyone know of any examples where this is being used. I would really really appreciated it.
In version 4 of fullcalendar, to get non-standard field is changed a little bit. Now it accepts just one parameter as Event Object:
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(info) {
console.log(info.event.extendedProps.description);
}
Note: You can access an additional field in this way: info.event.extendedProps.description
Check documentation
you can include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields.,this example help you eventRender
and see Event Object
Here is how I used eventRender to add some categories to each event. Then I can filter events based on category name
eventRender: function(event, element) {
element.attr("categories",event.categoryname)
}
Simply awesome calendar
Some attributes here:
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},
Related
My goal is to have 2 different FullCalendar elements that stay in sync. I'm not doing ANY network calls, simply client side arrays at this point.
When I add an event (say through a click or just right after it's built) the calendar does not actually re-render as the documentation claims.
I've also attempted to use the "renderEvents" and "renderEvent" flavors but that seems unnecessary since "updateEvents" would/should update the rendering of these events. The problem I also ran into is the "renderEvent" on the list version of the calendar does not show the event I'm adding if it's out of the range of that calendar.
const events = [{
title: 'All Day Event',
start: TODAY
},
{
title: 'Long Event',
start: TODAY,
end: NEXTDAY
}
]
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
events
})
$("#events").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'listMonth',
events
})
// Now add a new one
events.push([{
title: 'Event added',
start: YESTERDAY
}])
$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)
Here's a recreation of the issue:
https://jsfiddle.net/Kikketer/7d92utp5/
The use case is pretty simple: Add a new event to the list of events, render the events on the calendar.
firstly change your pushing event to object from array.
events.push({
title: 'Event added',
start: YESTERDAY
});
Now, you have many choice to do that. I will write 2 way for you.
a.
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
https://jsfiddle.net/7d92utp5/49/
b. 1) Change events param to function
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
// at here
events: function (start, end, timezone, callback) {
callback(events);
}
});
2) Use refetchEvents instead updateEvents
$('#calendar').fullCalendar('refetchEvents');
https://jsfiddle.net/7d92utp5/53/
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.
Im working in symfony2.5 framework.
In my app, i have a calendar page implemented with full calendar.js jquery plugin. (http://fullcalendar.io/).
I have a event table with records of employees' events.
How to display these events in the calendar page.
my calendar page's js:
$( '.calendar' ).fullCalendar({
header: {
left: 'prev,next,today',
center: 'title,',
right: 'month,agendaWeek,agendaDay'
}
});
Can anyone help me? Thanks in Advance!
First you have to parse your events as fullCalendar event object, following event documentation
var myEvent = {id: 1, title: 'myTitle', start: moment(...)}
Then, you should add those events to an array, function, json...
var mySourceEvents = [myEvent, myOtherEvent];
Finally you could set that array in your fullcalendar config as a source.
$('#calendar').fullCalendar({
eventSources: [
mySourceEvents
]
});
Or... You could add your events directly as an array:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
});
I have created a jquery fullcalendar, pulling the feed from a google calendar and would like to open the event details in a colorbox. So far, I am completely lost as to how to achieve this and am looking for help. Everything that I have tried so far causes the calendar not to appear at all, so there is clearly a problem. Here is the latest code that I have tried:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'my feed url'
}
eventAfterRender: function(event, element, view ) {
if(event.url) {
$('a',$(element)).colorbox({
type: 'ajax'
});
}
}
})
});
</script>
I don't think I completely understand what's going on with fullcalendar's event information; so if someone can provide a working code that I can mess with, I would appreciate it. Thanks very much in advance for any help!
Simply add the eventClick property when initializing the fullcalendar object and call colorbox within,
$('#calendar').fullCalendar({
editable: true,
eventClick: function(calEvent, jsEvent, view) {
$.colorbox({html:"<h1>"+calEvent.title+"</h1><br><p>"+calEvent.start+" TO "+calEvent.end+"</p>"});
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
}
]
});
This is a very basic example. You can expand on it as per your requirements. Hope it helps.
This may be obvious but I can't figure out how to bind a static json object to to a FormPanel in extjs. I am new to ExtJs so I'm still learning. I have a TreePanel with various additional attributes contained on the node.attributes object. When a node is clicked id like to display the data in a form. Below is what I have. The data does not get bound to the fields.
All the examples for extjs cover loading data from a store or a url.
tree.on('click', function (n) {
var detailEl = details.body;
if (n.attributes.iconCls == 'page') {
detailEl.hide();
var form = new Ext.FormPanel({
frame: true,
renderTo: detailEl,
title: 'Page Details',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: { width: 230 },
defaultType: 'textfield',
data: n.attributes,
items: [{
fieldLabel: 'Title',
name: 'title',
allowBlank: false
}, {
fieldLabel: 'Url',
name: 'url',
allowBlank: false
}, {
fieldLabel: 'Live',
name: 'islive',
xtype: 'checkbox'
}
],
buttons: [{
text: 'Save'
}]
});
detailEl.slideIn('l', { stopFx: true, duration: .2 });
}
});
Also is it best practise to create a new FormPanel each time or to rebind the existing formPanel?
Thanks,
Ian
The best practice is to have the form rendered once and change the values according to the nodes selected.
As already mentioned, data isn't the field to use. To assign values in a bulk manner, you should use Ext.form.BasicForm.setValues( Array/Object values ) method. You are getting BasicForm object using FormPanel's getForm() method.
Summarizing,
var form = new Ext.FormPanel({/*...*/});
tree.on('click', function (node){
form.getForm().setValues(node.attributes);
});
Pay attention, that form fields' names and attributes' names should correspond.
I don't believe the data configuration key does what you think it does.
Try setting values individually in the field definitions.