qooxdoo desktop полная интеграция с календарем

Обычно, когда мне нужно интегрировать виджет внешней библиотеки в приложение Qooxdoo, я создаю qx.ui.core.Widget, прослушиваю его событие appear, чтобы позволить создать базовый элемент DOM, а затем добавляю виджет к нужному родителю.

var widget = new qx.ui.core.Widget();  
widget.addListenerOnce('appear', function(event) 
{
  var element = event.getTarget().getContentElement().getDomElement();
  // pass the DOM element to your library
}, this);
parent.add(widget);

Вот демонстрационный код для FullCallendar, который вы можете добавить в Игровая площадка Qooxdoo.

qx.bom.Stylesheet.includeFile('//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css');

var loadList = [
  '//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js',
  '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js',
  '//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js'
];

// Demonstration purpose dependency loading. In real app you would
// need to wrap external dependencies in qooxdoo classes and use 
// normal build process (look at ``qx.bom.Template`` as example).
function load(callback)
{
  var url = loadList.shift();
  if(url)
  {
    var request = new qx.bom.request.Script();
    request.onload = arguments.callee.bind(this, callback);
    request.open('GET', url);
    request.send();   
  }
  else
  {
    callback();
  }
}

load(function()
{
  var widget = new qx.ui.core.Widget();  
  widget.addListenerOnce('appear', function(event) 
  {
    var element = event.getTarget().getContentElement().getDomElement();
    $(element).fullCalendar({
      'header' : {
        'left'   : 'prev,next today',
        'center' : 'title',
        'right'  : 'month,basicWeek,basicDay'
      },
      'defaultDate' : '2014-09-12',
      'editable'    : true,
      'eventLimit'  : true, 
      'events'      : [
        {
          'title' : 'All Day Event',
          'start' : '2014-09-01'
        },
        {
          'title' : 'Long Event',
          'start' : '2014-09-07',
          'end'   : '2014-09-10'
        },
        {
          'title' : 'Birthday Party',
          'start' : '2014-09-13T07:00:00'
        },
        {
          'title' : 'Click for Google',
          'url'   : 'http://google.com/',
          'start' : '2014-09-28'
        }
      ]
    });
  }, this);
  this.getRoot().add(widget, {'edge': 8});
}.bind(this));

Вы пишете себе contrib — класс/набор классов qooxdoo, которые обертывают сторонний компонент JavaScript.

Шаги, примерно:

1. наследовать от виджета
2. добавьте сеттеры и геттеры для свойств календаря, которые вы хотите, чтобы ваш класс qooxdoo выставлял
3. добавьте методы для каждого обратного вызова, который вы хотите передать в jQuery - в идеале эти методы должны просто запускать событие qooxdoo, эквивалентное событию jQuery.
4. in the widget's on appear handler:
   • create all callbacks - use .bind(this) on the methods you want jQuery to call on your object, or simply create new functions on the fly
   • создайте полный список параметров/все, что вы хотите передать для создания календаря
   • передать внутренний элемент виджета в jQuery для создания календаря

Как писать вклады: http://manual.qooxdoo.org/devel/pages/development/contrib.html

Список доступных вкладов (которые вы можете использовать в качестве примеров): http://qooxdoo.org/contrib/project - среди них нет вклада календаря.

Однако может оказаться затруднительным стилизовать contrib аналогично теме qooxdoo, которую вы будете использовать.

Учитывая простоту создания новых виджетов qooxdoo на основе существующих, я бы предпочел создать собственное представление календаря — например, контейнер стека с тремя панелями (месяц, день недели) с таблицей qooxdoo на каждой панели с кнопками на top для управления представлениями календаря. Это будет автоматически оформлено так же, как и остальная часть приложения, и я оцениваю усилия по разработке всего в несколько дней, чтобы воспроизвести то, что я видел, что может сделать Fullcalendar. Это автоматически получит стиль, аналогичный остальной части приложения.