We Keep Coding

Using FullCalendar, how to add information to EventObject when eventReceive?

I've started discovering and using FullCalendar but I'm stuck with it.
What I want to do is a ResourceTimeline in Month view, with external event dragging (a left panel).
The subject later would be to have a modal when you drop an event, in order to choose if you want the event to be from 8am to 12pm, or afternoon from 12pm to 6pm.
So first, I'd like to do a simple eventReceive without modal, to see if I can update the event when it's dropped.
But it seems I can't, what do I do wrong ?
From what I can understand, it looks like when you drop an event in month view, the event in the param sent to eventReceive is modified.
eventReceive(info) {
info.event.start = moment(info.event.start).add(8, 'hours').format('YYYY-MM-DD hh:mm:ss');
// var c = confirm('OK = morning, Cancel = aprem');
// if (c) {
// console.log("morning !")
// } else {
// console.log("afternoon !")
// }
}
Events are very basic because I wanted to complete them whenever I drop them into the calendar
new Draggable(listofEvents, {
itemSelector: '.draggable',
eventData(event) {
return {
title: event.innerText,
activite: event.dataset.activite,
allDayDefault: false,
}
},
})
I even tried to force allDayDefault to false but it doesn't change a thing...
Here is the codepen of the project in its current state : https://codepen.io/nurovek/pen/zYYWGyX?editors=1000
Sorry if my post lacks information, I'm not used to ask questions on SO. If it's lacking, I'll try to be more explicit if you ask me, of course !

As per the documentation, an event's public properties (such as "start", "end", title" etc) are read-only. Therefore to alter a property after the event is created you must run one of the "set" methods.
So your idea will work if you use the setDates method:
eventReceive(info) {
info.event.setDates(moment(info.event.start).add(8, 'hours').toDate(), info.event.end, { "allDay": false } )
console.log(info.event);
}
Demo: https://codepen.io/ADyson82/pen/dyymawy?editors=1000
P.S. You might notice I also made a few other little changes to your CodePen, mainly to correct all the links to CSS and JS files, since it was generating all sorts of console errors. These errors were because links were wrong or simply referred to something non-existent, and for some reason you were also using files from two different versions of fullCalendar (4.3.0 and 4.3.1), which is never a good idea if you want to ensure full compatibility.

Fire Event on Background Change

Just the background:
(not really related to the question)
I am using SharePoint and creating a Sharepoint Hosted App.
I have some fields which provide a peoplepicker with which I can select Users out of a user pool. The functioninality is provide by the SharePoint internal scripts.
If I input a name of a user via jquery nothing happens. It has no built-in change handler I guess.
What I have done is a separat script which just resolve the user names on my jquery input via trigger("change") and then the SharePoint internal Scripts doing the job. This "job" is asynchronous and then if the data arrives from the backend the SharePoint Scripts apply the data to the Peoplepicker fields.
But this functions also doesn't support jQuery's trigger because I cannot alter the functions as they're pre-defined...
So want I want to do is to monitor when the text inside the Peoplepicker fields has been changed but I am a little bit lost now.
Question:
I have tried it with the following code (which doesn't work):
$('.peoplePickerDiv').bind("DOMSubtreeModified", function () {
alert("HAS BEEN CHANGED!");
});
Is there another way to react on lets say background editing of input fields in my DOM?

For People Picker control manipulation SPClientPeoplePicker object (clientpeoplepicker.js) is intended, which provides methods for getting information from the picker or to perform other operation.
SPClientPeoplePicker class exposes the following events:
OnControlValidateClientScript - triggers after a server error is set or cleared
OnUserResolvedClientScript - triggers once the resolved user is added or removed in client
OnValueChangedClientScript - triggers after text input or users change in client
OnValueChangedClientScript event probably suits your scenario, here is an example on how to attach it:
var picker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerId];
picker.OnValueChangedClientScript = function (elementId, userInfo) {
if(userInfo.length > 0){ // once the value is resolved it could be retrieved via `userInfo` object
console.log(userInfo[0]);
}
console.log('value changed');
};
References
Use the client-side People Picker control in SharePoint-hosted SharePoint Add-ins

Send DOM node object via chrome.tabs.sendMessage

I am writing a Chrome extension. I need to pass an element object from the content script to the background script.
The goal:
The extension is about record and replay user actions.
The data is saved on extension`s localstorage on different object for each tab (by tab ID).
The data structure is a list of {x: x, y:y, element: element}
When the user wants to replay, I am using a loop for each object on the list and using .click() on the element
Code in content script:
The function that sends a message to the background script:
function addToEventHistory(cords) {
console.log(cords)
chrome.runtime.sendMessage({action: "addToEventHistory", cords: cords}, function(response) {
return response;
});
}
The function that get the element and sens it:
mouseClick: function(e) {
var target = e.target || e.srcElement
var clickEvent = {x: e.pageX, y: e.pageY, element: target}
addToEventHistory(clickEvent)
}
The code in the background script:
var tabId = sender.tab.id;
var existingRecords = JSON.parse(localStorage.getItem('record_'+tabId)) || [];
existingRecords.push(request.cords)
console.log(request.cords)
localStorage.setItem('record_'+tabId, JSON.stringify(existingRecords));
sendResponse();
The problem is that the element that I am sending is recieved as an empty object. notice to the console.log on send and recieve. the outputs are:
sending:
Object {x: 1205, y: 1067, element: div#content.snippet-hidden}
receiving:
Object {x: 1205, y: 1067, element: Object}
* the element Object is empty and has only _proto_
What is the reason?
How can I solve this issue?
Looks like the issue is not serialize the DOM object, because the object looks ok right before the sending and not ok at receiving..

You can't send a DOM element as a runtime.sendMessage() message
The message in runtime.sendMessage() must be "a JSON-ifiable object". DOM elements/nodes are not JSON-ifiable. Thus, you can not send them. In your case, you are trying to send the target of the click event.
What you will need to do instead of trying to serialize the DOM element is, ultimately, determined by why you need this information in your background script.
If you want to identify the element, you will need to determine a unique selector. One way to do this would be to assign a unique ID to the element and pass that ID in your message. However, that will only be effective if you are wanting to refer to the DOM node during the time that page is loaded within that tab. Obviously, any ID you assign will not be available once the browser has left the page, or loaded it in a different tab. Thus, that alternative is only viable for identifying an element for the life of the current page. However, for an application where you were wanting to just store the actual DOM element, assigning a unique ID would be a valid solution. In other words, storing the DOM element would only be valid for the life of the page, so assigning a unique ID would be valid for the same time period (life of the current page).
If you want methods which will uniquely identify the element when the page is re-loaded, you will need to use a different method than assigning an ID. What to use will depend largely on how you are going about selecting the element when you are wanting to use it and how resilient you want the selection to be with respect to changes in the page structure (e.g. on pages where the structure is dynamic, you may need to use other methods than would work on a static page).
For your application, where you want to record and playback user actions, you will need to determine if you want to record these actions based on where the mouse is within the page, or based on the elements upon which the user initiates events. This is a common problem for applications/languages which are used to record/playback/simulate user actions. Commonly, the user is given the option as to how they want such user interaction to be recorded (e.g. by location or element). If you choose to store the user actions only by the location of the mouse at the time an event occurred, then you can use Document.elementFromPoint() to determine which element is now at that point and send the event to that element. However, when doing so, you will also need to track the scrolling state of the document and determine if you are going to store the location of the mouse based on the location of the mouse within the current display, or relative to the document.

I used a workaround to click the element,
besides save the element and then using element.click() I used the cords to click the element without saving the element itself:
document.elementFromPoint(cords.x - window.pageXOffset, cords.y - window.pageYOffset).click();

How to trigger data collection with SiteCatalyst?

I just get started with Adobe SiteCatalyst and I am just wondering how could I trigger the sending of colllected data to the server with it.
Imagine the situation that I have some custom event, for example event1 = 'user opened help us popup'. After user opens popup - I'm assigning data to props:
s.events = "event1";
s.prop1 = "name of popup";
After that I'm checking the analytics debugger (https://www.adobetag.com/d1/digitalpulsedebugger/live/DPD.js) and it says that I didn't get this data.I suppose that I need somehow send it to SiteCatalyst, but I can't figure out how. Please help me.

There are two triggers for Adobe Analytics: page view s.t() and click/event s.tl()
Based on your scenario, you are probably going to want to use the s.tl() trigger.
Here is an example of what the code should look like:
s.events = "event1";
s.prop1 = "name of popup";
s.linkTrackVars = "events,prop1";
s.linkTrackEvents = "event1";
s.tl(true,'o','popup opened');
The vars you want to be tracked in the s.tl() call should be listed in linkTrackVars. If there is more than one, delimit with a comma (no spaces, no s namespace). If you have any events to track, you must also specify the events in s.linkTrackEvents. Basically, s.linkTrackEvents should be the same value as s.events (except if you are serializing an event, do NOT include the serialization ID in s.linkTrackEvents)
As for the s.tl() call, above is an example of what you might pass for a general event, but args will vary depending on what you are trying to track. (refer to link for details).

Get object by its `id` in an AIR windowedApplication

There may be a better way of doing this...so please suggest if there is.
I've got some javascript that calls an AIR function. This AIR functions creates a new HTML element and adds it to the "Stage" like so:
// guid is the ID given to the new window (HTML element) by javascript
private function createNewWindow(guid:String):void {
var frame:HTML = new HTML();
frame.id = guid;
addElement(frame);
}
Now I've also got a function that sets the location of the frame based on its id...this is where I'm struggling.
// set the location of the window referenced by it's id (guid)
private function setLocation(guid:String, location:String):void {
// psuedocode. Obviously it won't work.
stage.getById(guid).location = location;
}
So, how do I "get" my HTML element based on its ID?

Short answer, you don't. This isn't javascript, this is a OO language and as such, you need to change your thought process. What are you trying to do? Create several html windows within an air application? If you want to have an id based approach, you're going to need to store the id and the pointer to the component in an data structure (like a dictionary).
private var _components:Dictionary = new Dictionary();
this._components['someId'] = someComponent;
And from there you can add a function that just saves/returns the components. I'm not entirely sure what's your approach and what you're trying to accomplish, but my gut tells me you're not doing something right.