qooxdoo桌面全日历集成

Question

是否可以在FullCalendar (桌面)框架内使用高雄？我知道FullCalendar是一个jquery，但是看看一些示例qooxdoo代码，看起来任何javascript代码都可以嵌入到框架中。不幸的是，qooxdoo没有其他一些框架那么受欢迎，而且文档也没有解释如何做这样的事情。任何示例代码或其他项目的链接集成qooxdoo/jquery/javascript将不胜感激。

Answer 1

通常，当我需要将外部库小部件集成到一个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);

这是演示代码 for FullCallendar，您可以把它放进可可多游乐场。

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

Answer 2

您自己编写了一个cont肋骨--一个qooxdoo类/一组包装外部JavaScript组件的类。

步骤，近似：

1. 从Widget继承
2. 为您希望qooxdoo类公开的日历属性添加setter和getter
3. 为每个要传递给jQuery的回调添加方法--理想情况下，这些方法应该只触发一个与jQuery事件相同的qooxdoo事件。
4. 在小部件的启动处理程序中：
   • 创建所有回调--在您希望.bind调用对象的方法上使用jQuery (这个)，或者直接创建新函数
   • 创建参数的完整列表/想传递给日历创建的任何内容
   • 将小部件的内部元素传递给jQuery以创建日历

​

有关如何编写contribs：http://manual.qooxdoo.org/devel/pages/development/contrib.html

可用的控件列表(您可以作为示例使用)：http://qooxdoo.org/contrib/project --日历控件不在其中。

不过，可能很难将其样式与您将要使用的qooxdoo主题类似。

考虑到根据现有的控件创建新的qooxdoo小部件很容易，我会创建自己的日历视图--例如，一个包含三个面板(月、周)的堆栈容器，每个面板上都有一个qooxdoo表，顶部有控制日历视图的按钮。这将自动获得类似于应用程序的样式，我估计开发工作只需几天就可以复制我所看到的Fullcalendar所能做的事情。这将自动得到类似于应用程序其余部分的样式。