3 Replies Latest reply: Jun 4, 2014 7:19 AM by Jochem Zwienenberg RSS

    Custom Calendar Extension Jquery Loading Issue

    Ross Turner

      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() {     ///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    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 += "

      Diary Calendar<\/h1>"; HTML += "

      Current Diary View<\/p>"; HTML += "

      <\/div>"; HTML += "
      "; HTML += " Event Data Source: <\/strong>"; HTML += "