Hello,

I am trying to understand how it is possible to write new "screens" for Projeqtor (as a hobby). On an other hand, I like vis.js because it allows very nice views of many things so I'd like to integrate a vis.js view in a Projeqtor screen.

Below, I try to reduce the problem to make it the less complicated I can.

Step 1 : I create a file toto.html as follows and I display it in my browser (it's an example from vis.js). it works : the timeline is properly rendered in the "visualization" div.
The inclusion of the library is quite unconventionnal because I wanted to test it as it seems when modifying code from Projeqtor below, we are in fact directly in the body part.

  
    
    







// DOM element where the Timeline will be attached
const container = document.getElementById("visualization");

// Create a DataSet (allows two way data-binding)
const items = new vis.DataSet([
  { id: 1, content: "item 1", start: "2014-04-20" },
  { id: 2, content: "item 2", start: "2014-04-14" },
  { id: 3, content: "item 3", start: "2014-04-18" },
  { id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
  { id: 5, content: "item 5", start: "2014-04-25" },
  { id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);

// Configuration for the Timeline
const options = {};

// Create a Timeline
const timeline = new vis.Timeline(container, items, options);

Step 2 : In projeqtor, in order not to mess with the menus and so on, I use diaryMain.php and almost nuke it to only keep the minimum (it works) and add my timeline as I did before ... and it does not work ; by the way, the alert I set is never executed.

    

        
            
                
                
                
                

                
            
        
 


                    <div dojoType="dijit.form.DateTextBox"

                        id="dateSelector" name=""
                        dateSelector""
                        invalidMessage=""
                        type="text" maxlength="10"
                        style="width: 100px; text-align: center;"
                        class="input roundedLeft" hasDownArrow="true"
                        value="">
                            
                                saveDataToSession('dateSelectorDiary',formatDate(dijit.byId('dateSelector').get("value")), false);
                                return diarySelectDate(this.value);
                            
                    
                
    


    <div id="detailDiv" dojoType="dijit.layout.ContentPane" region="center" style="overflow-x:auto;height: px">
        
 I can put text here and I can read it on screen o/