Modifying calendar so that notes will open when dates are clicked - javascript

I have 2 files, calendar.html and notes.html, and here is a screenshot of the calendar:
I want notes.html to open when dates are clicked.
Here is my code so far:
$.fn.zabuto_calendar = function(b) {
var c = $.extend({}, $.fn.zabuto_calendar_defaults(), b);
var a = $.fn.zabuto_calendar_language(c.language);
c = $.extend({}, c, a);
this
.each(function() {
var j = $(this);
j.attr("id", "zabuto_calendar_" + Math.floor(Math.random() * 99999).toString(36));
j.data("initYear", c.year);
j.data("initMonth", c.month);
j.data("monthLabels", c.month_labels);
j.data("weekStartsOn", c.weekstartson);
j.data("navIcons", c.nav_icon);
j.data("dowLabels", c.dow_labels);
j.data("showToday", c.today);
j.data("showDays", c.show_days);
j.data("showPrevious", c.show_previous);
j.data("showNext", c.show_next);
j.data("cellBorder", c.cell_border);
j.data("jsonData", c.data);
j.data("ajaxSettings", c.ajax);
j.data("legendList", c.legend);
j.data("actionFunction", c.action);
j.data("actionNavFunction", c.action_nav);
l();
function l() {
var y = parseInt(j.data("initYear"));
var B = parseInt(j.data("initMonth")) - 1;
var C = new Date(y, B, 1, 0, 0, 0, 0);
j.data("initDate", C);
var D = (j.data("cellBorder") === true) ? " table-bordered"
: "";
$tableObj = $('<table class="table' + D + '"></table>');
$tableObj = w(j, $tableObj, C.getFullYear(), C.getMonth());
//Custom code
var i = document.getElementById('$tableObj');
i = w('notes.html');
$legendObj = g(j);
var z = $('<div class="zabuto_calendar" id="'
+ j.attr("id") + '"></div>');
z.append($tableObj);
z.append($legendObj);
j.append(z);
var A = j.data("jsonData");
if (false !== A) {
r(j, C.getFullYear(), C.getMonth())
}
}
Can you help me get on the right direction?

I think your code is a bit complicated, and dificult to understand.
I think what you should do first is to create two objects:
First Object Calendar
function Calendar(month,year) {
var actualDate=new Date();
var month=(!month)?(actualDate.getMonth()):month;
var year=(!year)?(actualDate.getFullYear()):year;
var days=new Array();
//DEFINE SETTERS AND GETTERS
//FOLLOWING FUNCTION SHOWS THE CALENDAR
this.showCalendar=function(){
var d=new Date(year,month,1);
var result='<table summary="Calendar"><caption>'+tableMonth[month]+'</caption><thead><th>Monday</th><th>Tuesday</th><th>Wed</th><th>Thirsday</th><th>Friday</th><th>Sat</th><th>Sun</th></thead>'+
<tr>';
if (f.getDay()==0)
for (i=1;i<7;i++)
result+='<td></td>'
else
for (i=1;i<f.getDay();i++)
result+='<td></td>';
for (i=1;i<=days.length;i++){
var f=new Date(year,month,i);
if (f.getDay()==0)
resultad+='<td>'+i+'</td></tr><tr>'
else
resultad+='<td>'+i+'</td>';
}
resultad+='</tr></tbody></table>';
return resultado;
}
}
the second object to create are the notes, following the same proccess:
Second object Notes:
function notes(param1,param2) {
//same process as before you define your object as you like
}
Once, you have defined both objects then using the dom either with jquery or javascript you can show your note in a new layer or in a new window (window.open), or as you like.
The code is too wide to write it here, so i have written you the main ideas.

Related

trying to get a rocket to run (doesnt work :()

So i'm currently partaking in some tasks for my school and then i came across one of them which got me a bit confused! We are asked to make the rocket launch however i am confused on how i would go about this. Hopefully, you can help me do this and thanks for reading.
// Launch the rocket!
var launchRocket = function (sequence) {
if (sequence != 321) {
var _$_f307 = ["\x63\x6C\x61\x73\x73\x4E\x61\x6D\x65", "\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x2D\x77\x69\x6E\x64\x6F\x77", "\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x43\x6C\x61\x73\x73\x4E\x61\x6D\x65", "\x62\x6F\x64\x79", "\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x2D\x77\x69\x6E\x64\x6F\x77\x20\x61\x6E\x69\x6D\x61\x74\x65", "\x66\x69", "\x72\x33\x61", "\x77\x61\x79", "\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C", "\x72\x6F\x63\x6B\x65\x74\x2D\x63\x6F\x64\x65"];
document[_$_f307[3]][_$_f307[2]](_$_f307[1])[0][_$_f307[0]] = _$_f307[4];
var e = _$_f307[5];
var x = _$_f307[6];
var n = _$_f307[7];
document[_$_f307[3]][_$_f307[2]](_$_f307[9])[0][_$_f307[8]] = e + x + n;
}
}
All these \xXX are Hex codes of letters. Just decode them to see
var _$_f307 = [//create array
"className", //[0]
"animation-window",
"getElementsByClassName",
"body",
"animation-window animate",
"fi",
"r3a",
"way",
"innerHTML",
"rocket-code" //[9]
];
//then replace other cipher with values
//document[_$_f307[3]][_$_f307[2]](_$_f307[1])[0][_$_f307[0]] = _$_f307[4];
document["body"]["getElementsByClassName"]("animation-window")[0]["className"] = "animation-window animate";
var e = _$_f307[5]; //fi
var x = _$_f307[6]; //r3a
var n = _$_f307[7]; //way
//document[_$_f307[3]][_$_f307[2]](_$_f307[9])[0][_$_f307[8]] = e + x + n;
document["body"]["getElementsByClassName"]("rocket-code")[0]["innerHTML"] = e + x + n; //fir3away
Note that you can address JS object properties using dot . or bracket [] syntax.
So add rocket launcher ;)
<div class="animation-window"></div>
<div class="rocket-code"></div>
Update See working example
// Launch the rocket!
var launchRocket = function(sequence) {
if (sequence != 321) {
var _$_f307 = ["\x63\x6C\x61\x73\x73\x4E\x61\x6D\x65", "\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x2D\x77\x69\x6E\x64\x6F\x77", "\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x43\x6C\x61\x73\x73\x4E\x61\x6D\x65", "\x62\x6F\x64\x79", "\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x2D\x77\x69\x6E\x64\x6F\x77\x20\x61\x6E\x69\x6D\x61\x74\x65", "\x66\x69", "\x72\x33\x61", "\x77\x61\x79", "\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C", "\x72\x6F\x63\x6B\x65\x74\x2D\x63\x6F\x64\x65"];
console.log(_$_f307);
document[_$_f307[3]][_$_f307[2]](_$_f307[1])[0][_$_f307[0]] = _$_f307[4];
var e = _$_f307[5];
var x = _$_f307[6];
var n = _$_f307[7];
document[_$_f307[3]][_$_f307[2]](_$_f307[9])[0][_$_f307[8]] = e + x + n;
}
}
//Call the function
//launchRocket(0);
.animate {
background: red
}
<div class="animation-window">Will be red</div>
<div class="rocket-code">code</div>
<button type="button" onclick="launchRocket(0);">Launch!</button>

Accessing Excel's Object Model from Javascript

I have excel as an activeX object in javascript. I seem to be missing something with reards to how to interact with the object model from there. My watch window shows the value of the "Value" property of the range I am trying to pull data from as "undefined" when I try to assign "range.Value" to an array.
Unfortunately I am unable to update the outdated browsers on my machine at work so I cannot upload pictures.
My script:
function open_files(A, B, C)
{
var excel = new ActiveXObject("Excel.Application");
excel.Visible=true;
excel.DisplayAlerts = false;
var wbA = excel.Workbooks.Open(document.getElementById(A).value);
var wbB = excel.Workbooks.Open(document.getElementById(B).value);
var wbC = excel.Workbooks.Open(document.getElementById(C).value);
excel.EnableEvents = false;
excel.ScreenUpdating = false;
excel.Calculation = -4135 //xlCalculationManual enumeration;
var wb_collection = [wbA, wbB, wbC];
excel.Application.Run("'" + wbA.name + "'" + '!update_links');
var CLIN_list = [wbA.Sheets("Control Form").Range("B62:B141").value(1)]
for (i = 0; i = CLIN_list.length; i++)
{
if (CLIN_list(i) > 0)
{
var CLIN_list_count = i
}
}
var decrement_range_start = wbA.Sheets("Fee & Decrement Table").Range("AJ14")
//for (i = 0; i < 80; i++){
//Sheets("Fee & Decrement Table").Cells(decrement_range_start.column+i
// Model Setup for VBA
wbA.Sheets("CONTROL FORM").Activate
wbA.Sheets("CONTROL FORM").OLEObjects("TextBox21").Object.Text = wbB.fullname
wbA.Sheets("CONTROL FORM").OLEObjects("TextBox22").Object.Text = wbC.fullname
excel.Application.Run("'" + wbA.name + "'" + '!Run_JPO');
I found an answer on another forum. A Range cannot be assigned directly to a js array, it has to be converted. The line below works to fill my CLIN_list variable.
var CLIN_list = new VBArray(wbA.Sheets("Control Form").Range("B62:B141").value).toArray();

Push value into array using $(this) with DRY approach jquery

I am having some trouble finding a way to push into an array based on the div.
My goal is to add up the amount of time that I am hovering over each element. Instead, of creating the same function for each div. I wanted to try a DRY approach. This is difficult to visualize.
I want to change the array I am pushing into when I change the div. I have figured out a way to add all of the time into one array. However this is not my goal.
Here is a very shortened version of my code and I am attaching a plunker to show how it is working. In the console you can see the time change.
http://plnkr.co/edit/zBRyix6TJjTjvp7OCrMC?p=preview
I am pushing into the timeArray. Ideally I could push into panelHeading array or panelHeadingArray
Here is my iffe being used in a DRY approach.
var timeMonitering = (function() {
var mouseenterTime = 0;
var timeArray = [];
var navArray = [];
var panelHeadingArray = [];
return {
inAndOut: inAndOut
}
function inAndOut(evt) {
var currentTime = new Date();
var mouseoverTime;
if(evt.type === 'mouseenter') {
mouseenterTime = currentTime.getTime();
}
else if (evt.type === 'mouseleave') {
mouseoverTime =currentTime.getTime();
}
var time =mouseoverTime - mouseenterTime;
if(time >0) {
timeArray.push(time/1000);
}
console.log('time array added',Math.round(timeArray.reduce(add,0) ));
return time/1000;
}
function add(a,b) {
return a +b;
}
})();
$(document).on('ready', function() {
$('.navbar').bind('mouseenter mouseleave', timeMonitering.inAndOut);
$('.panel-heading').bind('mouseenter mouseleave', timeMonitering.inAndOut);
});
Need to figure out how to push into navArray or panelHeadingArray
depending on where I mouseover.
Any help would be greatly appreciated.
*********Update ****************
Here is how I essentially was able to add each array's time up.
The jumbotronArray adds the seconds up as I hover over the element. However, I would like to reuse this function or like the one I showed above.
var enteredTime = 0;
var jumbotronArray = [];
var listGroupArray = [];
$('.jumbotron').hover(function(evt) {
enteredTime = new Date();
console.log('e',enteredTime)
}, function() {
var ctime = new Date();
var time = (ctime.getTime() - enteredTime.getTime())/1000;
jumbotronArray.push(time);
console.log('time spend ' + time/1000 + 'sec');
console.log('jumbotronArray',jumbotronArray)
console.log('added',Math.round(jumbotronArray.reduce(add,0) ));
})
$('.list-group').hover(function(evt) {
enteredTime = new Date();
}, function() {
var ctime = new Date();
var time = (ctime.getTime() - enteredTime.getTime())/1000;
listGroupArray.push(time);
console.log('listGroupArray',listGroupArray)
console.log('listGroupArray added',Math.round(listGroupArray.reduce(add,0) ));
})
function add(a,b) {
return a +b;
}
You could select which array using a conditional and then call push on it.
var array;
if (condition) {
array = navArray;
} else {
array = panelHeadingArray;
}
array.push(...);
or more concisely using the ternary operator
(condition ? navArray : panelHeadingArray).push(...)
Edit:
var enteredTime = 0;
var jumbotronArray = [];
var listGroupArray = [];
var mapping = {
".jumbotron": jumbotronArray,
".list-group": listGroupArray
};
Object.keys(mapping).forEach(function(selector) {
$(selector).hover(function(evt) {
enteredTime = new Date();
}, function() {
var ctime = new Date();
var time = (ctime.getTime() - enteredTime.getTime())/1000;
mapping[selector].push(time);
});
}

JS: Create Objects in loop with iterator

I want to create some objects like object_point1, object_point2, ...
with a for loop that split a string with x and y coords.
How can i use iterates to create the name of objects?
Thanks
var vMsg = req.body.myMessage;
var fields = vMsg.split(/\n/);
var myobjct = new Object();
myobject.PointCount=parseFloat(paramsCoords);
for (var ii=0; ii<fields.length; ii++)
{
var coord=fields[ii].split(/\t/);
//console.info ("X" + coord[0]);
//console.info ("Y" + coord[1]);
var object_Point[ii] = new Object();
object_Point[ii].x_m=parseFloat(coord[0]);
object_Point[ii].y_m=parseFloat(coord[1]);
myobject.Polygon_Point[ii]=object_Point[ii];
}
At the moment i use this construction:
for (var ii=0; ii
var coord=fields[ii].split(/\t/);
var objPolygon_Point = new Object()
objPolygon_Point["point" + ii] = new Object();
objPolygon_Point["point" + ii].x_m=parseFloat(coord[0]);
objPolygon_Point["point" + ii].y_m=parseFloat(coord[1]);
if (ii=='1')
{
myobject.Polygon_Point1=objPolygon_Point["point" + ii];
}
if (ii=='2')
{
myobject.Polygon_Point2=objPolygon_Point["point" + ii];
}
// ii==3, ii==4, .......
}
You can generate dynamic object names in the global scope like:
Browser:
var ii = 11
, x = 123
, y = 234;
window['Object_Point' + ii] = {
x : parseFloat(x),
y : parseFloat(y)
}
console.log(Object_Point11);
console.log(window.Object_Point11);
// Object {x: 123, y: 234}
node.js
> var i = 12;
> global['MyObj'+i] = { hello : 'world' };
> console.log(MyObj12);
> console.log(global.MyObj12);
// { hello: 'world' }
see node.js global variables?
But rather than using window or global, you might want to use your own object
> var i = 12, myObj = {};
> myObj['MyObj'+i] = { hello : 'world' };
> console.log(myObj.MyObj12);
// { hello: 'world' }
I directly used your example. I'll suggest to create middle-map object. I.e. something like holder of all the points. Using the global namespace is not a good practice.
var vMsg = req.body.myMessage;
var fields = vMsg.split(/\n/);
var myobjct = new Object();
myobject.PointCount=parseFloat(paramsCoords);
var points = {};
for (var ii=0; ii<fields.length; ii++)
{
var coord=fields[ii].split(/\t/);
//console.info ("X" + coord[0]);
//console.info ("Y" + coord[1]);
var point = points["point" + ii] = new Object();
point.x_m = parseFloat(coord[0]);
point.y_m = parseFloat(coord[1]);
myobject.Polygon_Point[ii] = point;
}

Paging in slickGrid

I was able to utilize paging in slickGrid however I am new to jquery and slickGrid and can't get to move in between pages. can anyone help me with this? Any help is greatly appreciated. Thanks!
$(document).ready(function() {var columns = [
{id:"counter", name:"#",field:"counter"},
{id:"data1", name:"Data 1",field:"data1"},
{id:"data2", name:"Data 2",field:"data2"},
{id:"data3", name:"Data 3",field:"data3"},
{id:"data4", name:"Data 4",field:"data4"}];
var options = { enableCellNavigation: false,
enableColumnReorder: false};
var FB_C_grid;
var FB_C_data;
var selectedRowIds = [];
var dataView;
$(function() {
FB_C_data = [];
FB_C_data[0]={"id":"0",
"data1":"test1",
"data2":"test1",
"data3":"test1",
"data4":"test1,
"counter":"1"
};
for (var i=1; i<50000; i++) {
var d = (FB_C_data[i] = {});enter code here
d["id"] = "id_" + i;
d["data1"] = "data1_" + i;
d["data2"] = "data2_" + i;
d["data3"] = "data3_" + i;
d["data4"] = "data4_" + i;
d["counter"] = i;
}
dataView = new Slick.Data.DataView();
dataView.setItems(FB_C_data);
dataView.setPagingOptions({pageSize:20});
FB_C_grid= new Slick.Grid($("#FB_C_sheet"),dataView.rows, columns,options);
var pager = new Slick.Controls.Pager(dataView, FB_C_grid, $("#pagerTest"));
dataView.onRowsChanged.subscribe(function(rows) {
FB_C_grid.removeRows(rows);
FB_C_grid.render();
if (selectedRowIds.length > 0)
{
// since how the original data maps onto rows has changed,
// the selected rows in the grid need to be updated
var selRows = [];
for (var i = 0; i < selectedRowIds.length; i++)
{
var idx = dataView.getRowById(selectedRowIds[i]);
if (idx != undefined)
selRows.push(idx);
}
FB_C_grid.setSelectedRows(selRows);
}
});
dataView.onPagingInfoChanged.subscribe(function(pagingInfo) {
var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >= pagingInfo.totalRows;
var enableAddRow = isLastPage || pagingInfo.pageSize==0;
var options = FB_C_grid.getOptions();
if (options.enableAddRow != enableAddRow)
FB_C_grid.setOptions({enableAddRow:enableAddRow});
});
dataView.onRowCountChanged.subscribe(function(args) {
FB_C_grid.updateRowCount();
FB_C_grid.render();
});
})
});
I see some of your errors as you are trying to pass a jQuery object into SlickGrid while SlickGrid already uses jQuery in the code behind. When you create your SlickGrid object, you just need to pass the name of your grid and so in your code, you have to replace this $("#pagerTest") without jQuery wrapper becomes this "#pagerTest"
I see you called it the same in 2 different locations, so replace your 2 lines with this:
FB_C_grid= new Slick.Grid("#FB_C_sheet",dataView.rows, columns,options);
var pager = new Slick.Controls.Pager(dataView, FB_C_grid, "#pagerTest");
Hope that helps you make it to work...

Categories

Resources