Custom Calendar Extension Jquery Loading Issue

Mon, 26 Jan 2026 16:26:21 GMT

Hello,

This is my first time posting so hopefully i'll make some sense.

I've been building a calendar extension for my company utilizing a pre-created jquery calendar. I've attached the file so you can have a look.

The calendar on the web looks like this:

http://jquery-week-calendar.googlecode.com/svn/trunk/jquery.weekcalendar/full_demo/weekcalendar_full_demo.html

I've got the extension loading in Jquery Libraries first off, then moving on to the actually creation of the extension.

This is where i get a little stuck...

The jquery libaries which loads the calendar into/apply/onto the div "<div id='calendar'><div>" doesn't seem to be loading, i

suspect it might be something to do with the order or the $(document).ready(function() not initializing.

Any guidance or help would be much appreciated

(Thank you Thank you In Advance)

var template_path = Qva.Remote + "?public=only&name=Extensions/NPA/BasicTable/"; /// path of the extension




function extension_Init() {
    ///<summary>Use QlikView's method of loading other files needed by an extension. These files should be added to your extension .zip file (.qar).
    ///If more than one script is needed you can nest the calls to get them loaded in the correct order</summary>

    var js_Load = 
  function () {Qva.LoadScript('https://getfirebug.com/firebug-lite-beta.js#startOpened=true',
  function () { Qva.LoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js",
  function () { Qva.LoadScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js",  
  function () { Qva.LoadScript(template_path + "jquery.weekcalendar.js", extension_Done);             
  }); 
  }); 
  });
    };

  js_Load();


}


function extension_Done() {


Qva.AddExtension('NPA/BasicTable', function() {

// load style sheets
  Qva.LoadCSS(template_path + "style.css");
  Qva.LoadCSS("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css");
  Qva.LoadCSS(template_path + "jquery.weekcalendar.css");
  
$(document).ready(function() {

  var year = new Date().getFullYear();
  var month = new Date().getMonth();
  var day = new Date().getDate();


  var $calendar = $('#calendar').weekCalendar({
  timeslotsPerHour: 4,
  scrollToHourMillis : 0,
  height: function($calendar){
  return $(window).height() - $("h1").outerHeight(true);
  },
  eventRender : function(calEvent, $event) {
  if(calEvent.end.getTime() < new Date().getTime()) {
  $event.css("backgroundColor", "#aaa");
  $event.find(".time").css({"backgroundColor": "#999", "border":"1px solid #888"});
  }
  },

  data: function(start, end, callback) {


  var eventData1 = {
  options: {
  timeslotsPerHour: 4,
  timeslotHeight: 20
  },
  events : [
    {"id":1, "start": new Date(year, month, day, 12), "end": new Date(year, month, day, 13, 30),"title":"Lunch with Mike"},
    {"id":2, "start": new Date(year, month, day, 14), "end": new Date(year, month, day, 14, 45),"title":"Dev Meeting"},
    {"id":3, "start": new Date(year, month, day + 1, 18), "end": new Date(year, month, day + 1, 18, 45),"title":"Hair cut"},
    {"id":4, "start": new Date(year, month, day - 1, 8), "end": new Date(year, month, day - 1, 9, 30),"title":"Team breakfast"},
    {"id":5, "start": new Date(year, month, day + 1, 14), "end": new Date(year, month, day + 1, 15),"title":"Product showcase"},
    {"id":6, "start": new Date(year, month, day + 1, 12), "end": new Date(year, month, day + 1, 15),"title":"Ross is Awesome"}
  ]
  };


  callback(eventData1);

            }
  });







  });
            






  // Local variable to hold the reference to QlikView 
    var _this = this;

 // Returns Selection from DropDown Box
  window.onclickreturn =  function(vars) 
  { 

  _this.Data.SelectRow(vars); 
   
  }






var HTML="";
HTML += " <h1>Diary Calendar<\/h1>";
HTML += " <p class=\"description\">Current Diary View<\/p>";
HTML += " <div id=\"message\" class=\"ui-corner-all\"><\/div>";
HTML += " <div id=\"calendar_selection\" class=\"ui-corner-all\">";
HTML += " <strong>Event Data Source: <\/strong>";
HTML += " <select id=\"data_source\" onclick='onclickreturn(this.value)'>";


        for (var i = 0; i < this.Data.Rows.length; i++) { 
       // get the row 
        var row = this.Data.Rows ;
       // Generate html 
       HTML += "<option value="+ "'" + i + "'" +">" + row[0].text +  "<\/option>"; 
    }
HTML += " <\/select>";
HTML += " <\/div>";
HTML += " <div id='calendar'><\/div>";
HTML += " <div id='calendar'><\/div>";
HTML += "<script type=\"text\/javascript\"> fullyloaded(); <\/script>";














this.Element.innerHTML = HTML;






},true)








}


extension_Init(); //Initiate extension

Re: Custom Calendar Extension Jquery Loading Issue

Nicole-Smith — Thu, 20 Mar 2014 15:46:55 GMT

So the $(document).ready function isn't needed, and you need to set the innerHTML closer to the top. (Fixed file attached.)

Re: Custom Calendar Extension Jquery Loading Issue

Tue, 25 Mar 2014 10:52:34 GMT

Nicole thank you so much for your help, once I've developed the rest of my extension i will post it back here.

Awesome!!! Thank you So Much!

Re: Custom Calendar Extension Jquery Loading Issue

jochem_zw — Wed, 04 Jun 2014 11:19:18 GMT

Hi Ross,

how is the progress on your Calendar extension.

Would be nice if you can share it with the community.

topic Re: Custom Calendar Extension Jquery Loading Issue in QlikView

Custom Calendar Extension Jquery Loading Issue

Re: Custom Calendar Extension Jquery Loading Issue

Re: Custom Calendar Extension Jquery Loading Issue

Re: Custom Calendar Extension Jquery Loading Issue