Multiple javascript components inside Ember.js

I am building a prototype SPA application using Ember.js and to quickly get things up and working I have (3) three separate javascript components, i.e. A calendar/todo list, A javascript clock, and another jquery type plugin. I want all of these to be in sync together.

In other words, when someone enters a todo or calendar entry, it will color the analog clockface in with the time, and then update the other plugin with details.

Right now of course, all of these components are NOT written to talk to one another. They are just independent plugins written by different open source developers.

I have two questions concerning how to go about this.

1.) It's ridiculous going about it this way, and it would be much better to just take each of the components apart, see how they work and then code them from the bottom up to work together in a uniform way.

COMMENT: The above is good, but HUGELY time consuming, and defeats the purpose to get something working quickly for proof of concept. I just basically am going to write a Rails backend with postgres and populate all the controls with data and update as you play with it.

2.) if you can use the components as they are.... is it advisable or doable to black box or wrap each of these as an Ember component, i.e. turn them each into components and then get Ember to pass data back and forth.

Of course the goal here is to get something working and UNDERSTAND how it is put together and then from this knowledge, rewrite the whole thing in from ground up in Ember/ES6, or some other framework.

Thanks guys!