Accessory.js

/**
  An Accessory is an embeddable mini-application.  It can have its own set of controllers,
  states, and views.  Accessories are useful pattern for building independent, reusable plugins 
  inside of your application.
*/
SC.Accessory = SC.Object.extend({

  /**
    This should point to the main application object to give the accessory some context.
  */
  application: null,

  /**
    Set this to the content you want the accessory to manage (if you want).
  */
  content: null,

  /**
    The accessory will set the mainView to a view you can display within your application.
    You should put this into a pane if you want to show it independently.
  */
  mainView: null,

  /** 
    The main() function is called when the accessory is first init'd.  Like a regular app.
  */
  main: function() { .. }

});

MyAccessory.js

MyApp.CalendarAccessory = SC.Accessory.extend({

  /**
     Content should be set to a DateTime object.
  */
  content: null,

  // TODO: somehow this needs to auto-instantiate when the accessory is created...
  contentController: SC.ObjectController.extend({
    contentBinding: '.owner.content'
  }),

  main: function() {
    // setup mainView - this makes the app come alive
    this.set('mainView', MyApp.CalendarAccessory.getPath('mainPage.mainView'));
  }

});

UsingAccessory.js

var accessory = SC.Accessory.create({
  application:  MyApp,
  content: someDate
});

this.getPath('mainPage.mainPane.someContainer').set('content', accessory.get('mainView'));