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({

  concatenatedProperties: 'automaticallyInitialize'.w(),
  
  // FIXME: this name sucks
  automaticallyInitialize: null,
  
  /**
    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,

  /**
    Calls the main function the first time the object is init'd
  */
  init: function() {
    var autoInits = this.get('automaticallyInitialize');
    
    if (autoInits && autoInits.get('length') > 0) {
      // optimize and fortify
      autoInits.forEach(function(prop) {
        this.set(prop, this.get(prop).create());
      }
    }
  },

  /** 
    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({

  automaticallyInitialize: 'contentController'.w(),
  
  /**
     Content should be set to a DateTime object.
  */
  content: null,

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