qooxdoo desktop fullcalendar 통합

Question

FullCalendar을 qooxdoo (데스크탑) 프레임 워크 내에 사용할 수 있습니까? 나는 FullCalendar가 jquery 플러그인이지만, 어떤 자바 스크립트 코드처럼 프레임 워크 안에 임베드 될 수있는 샘플 qooxdoo 코드를보고있다. 불행히도 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); 

다음은 Qooxdoo playground에 넣을 수 있습니다 FullCallendar에 대한 the demo code입니다.

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

당신이 qooxdoo는 [DateChooser``````DateField`` 및] 완전한 기능을 제공하는 경우, 외부 코드를 사용할 것입니다 왜

Answer 2

당신은 자신을 contrib - qooxdoo 클래스/외부 JavaScript 구성 요소를 래핑하는 클래스 집합으로 작성합니다. approximatively

단계 : 당신이 당신의 qooxdoo 클래스는 각 당신이 jQuery를 전달하려는 콜백

이 방법을 추가 노출 할 달력 속성 세터와 게터를 추가 위젯

에서

1. 상속 - 이상적으로, 이러한 메소드는 jQuery 이벤트가 위젯의 on 핸들러에있는
2. 과 같은 qooxdoo 이벤트를 발생시켜야합니다.
   • 모든 콜백 만들기 - jQuery에서 개체에서 호출 할 메서드에서 .bind (this)를 사용하거나 즉시 새 함수를 만듭니다.
   • 전달할 매개 변수의 전체 목록을 만들거나 가능한 기여의 http://manual.qooxdoo.org/devel/pages/development/contrib.html

     목록 (당신이 예제로 사용할 수있는) : 일정 생성

   • 달력 기여를 작성하는 방법에 대해서는

의 창조를 위해 jQuery를에 위젯의 내부 요소를 통과 : http://qooxdoo.org/contrib/project - 달력 contrib은 그들 사이에 없습니다.

당신이 사용할 qooxdoo 테마와 비슷하게 contrib 스타일을 지정하는 것이 어려울 수도 있습니다.

기존 qooxdoo 위젯을 쉽게 만들 수 있다고 가정 할 때, 각 패널에 qooxdoo 테이블이있는 3 개의 패널 (월, 일 요일) 캘린더보기를 제어하려면 상단에 버튼이 있습니다. 이 앱의 나머지 부분과 마찬가지로 자동으로 스타일이 지정되며, Fullcalendar에서 수행 할 수있는 작업을 복제하기 위해 며칠 정도의 개발 노력을 예상합니다. 이는 앱의 나머지 부분과 비슷하게 자동으로 스타일이 지정됩니다.