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...
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
