CODEWITHSUNDEEP
javascriptjqueryqooxdoo
nicko
nicko

Reputation: 3

qooxdoo desktop fullcalendar integration

Is it possible to use FullCalendar within qooxdoo (Desktop) framework? I know that FullCalendar is a jquery plugin but looking at some of the sample qooxdoo code it looks like any javascript code can be embedded within the framework. Unfortunately qooxdoo is not as popular as some of the other frameworks out there and the documentation doesn't explain how to do things like this. Any sample code or links to other projects that integrate qooxdoo/jquery/javascript would be appreciated.

Upvotes: 0

Views: 706

Answers (2)

saaj
saaj

Reputation: 25293

Usually when I need to integrate an external library widget to a Qooxdoo app, I create qx.ui.core.Widget, listen for its appear event to let the underlying DOM element to be created, and then add the widget to desired parent.

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

Here's the demo code for FullCallendar you can put in Qooxdoo playground.

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

Upvotes: 1

user625488
user625488

Reputation: 415

You write yourself a contrib - a qooxdoo class/set of classes that wrap the foreign JavaScript component.

Steps, approximatively:

  1. inherit from Widget
  2. add setters and getters for the calendar properties you want your qooxdoo class to expose
  3. add methods for each callback you want to pass to jQuery - ideally, these methods should just fire a qooxdoo event equivalent to what the jQuery event is
  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
    • create the full list of parameters/whatever there is you want to pass to the calendar creation
    • pass the widget's inner element to jQuery for the creation of the calendar

For how to write contribs: http://manual.qooxdoo.org/devel/pages/development/contrib.html

List of available contribs (which you can use as examples): http://qooxdoo.org/contrib/project - a calendar contrib isn't among them.

It might prove difficult to style the contrib similarly to the qooxdoo theme you will be using, though.

Given the ease of creating new qooxdoo widgets based on existing ones, I'd go for creating my own calendar view - for example a stack container with three panels (month, week day) with a qooxdoo table on each panel, with buttons at the top to control the calendar views. This would automatically get styled similarly to the rest of the app, and I estimate the development effort to just a few days to replicate what I've seen that Fullcalendar can do. This would automatically get styled similarly to the rest of the app.

Upvotes: 0

Related Questions