FullCalendar 4 - add and then access additional values to the Event Object - fullcalendar

How do I add and then access additional values My_Custom_Value to the Event Object?
events: [
{
title: 'My Title',
My_Custom_Value: 'some details',
allDay: false,
start: 1501056000000,
end: 1501057800000
}
],

Access your value through "extendedProps":
A plain object holding miscellaneous other properties specified during parsing. Receives properties in the explicitly given extendedProps hash as well as other non-standard properties."
https://fullcalendar.io/docs/event-object
eventRender: function(info){
console.log("_______ info _______\n");
console.log(info.event.extendedProps.My_Custom_Value);
}

Use extendedProps. You can include them in the event object directly (https://fullcalendar.io/docs/event-object), or add them afterwards using method Calendar::setExtendedProp (https://fullcalendar.io/docs/Event-setExtendedProp)
events: [
{
title: 'My Title',
My_Custom_Value: 'some details',
allDay: false,
start: 1501056000000,
end: 1501057800000
extendedProps: {
description: 'whatever',
madeupProperty: 'banana'
}
}
]

The answer to this is contained in the Event Parsing documentation at https://fullcalendar.io/docs/event-parsing.
The way you're setting the custom property in your object is fine. As per that documentation, fullCalendar will read it, and then place it in the extendedProps property of the event object it creates internally.
So if you then need come to access that event later (e.g. via one of fullCalendar's callbacks such as eventClick, perhaps) you would use event.extendedProps.My_Custom_Value to access it.

Related

HTML in createNotice with Gutenberg shows [object Object]

I’m playing around with creating a custom notice in Gutenberg, and based on whether the data validates when the post is saved, the notice may include some HTML links.
I ended up only seeing the raw HTML output, so after some searching on Google I found this post on Github suggesting to use RawHTML.
So I put this code together which does create the red notice, but it doesn’t show the actual HTML only [object Object]. So I’m clearly doing something wrong here, but not sure what? Anyone who can point me in the right direction how to make the notices show the raw HTML?
wp.data.dispatch( 'core/notices' ).createNotice(
'error',
wp.element.createElement( wp.element.RawHTML, null, '<p>test</p>' ),
{
id: 'wpslupdate', // prevent duplicates
isDismissible: true
}
);
The notice component has an actions property which enables links to be rendered inside a notice, removing the need to use RawHTML.
options.actions [Array]: User actions to be presented with notice.
A notice can have one or more actions, each action has a label and must specify either a url or onClick function, eg:
wp.data.dispatch('core/notices').createNotice(
'error', // type of notice
'Something went wrong..', // message
{
id: 'wpslupdate', // prevent duplicates
isDismissible: true,
actions: [
{
label: 'Option A',
url: '#link' // styled as plain link
},
{
label: 'Option B',
onClick: () => { alert('ok') } // styled as a button link
}
]
}
);
Result:

is it possible to addEventSource using googleCalendarId?

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',
});

Adding a new event with source property never displays?

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.

Extjs Bind TreePanel static data to FormPanel

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.

Provide public access to default plugin settings?

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

Resources