I have an array of Javascript datetime objects which I want to display on a cal-heatmap. For this, i've done the following:
var startTimes = [] //array of datetimes to show
var cal = new CalHeatMap();
cal.init({
itemSelector: '.heat-map',
domain: 'day',
subDomain: 'hour',
range: range,
start: new Date(startTimes[0]),
highlight: new Date(startTimes[0])
});
for (s in startTimes) {
cal.highlight(cal.options.highlight.push(new Date(startTimes[s])));
}
This however, doesn't seem to work as only the first date gets marked.
Note that push returns the new length of the array and not the element you just added to it.
According to this and the doc of cal-heatmap/#highlight which states that the method expects a date, I guess your code should be:
for (s in startTimes) {
var date = new Date(startTimes[s]);
cal.options.highlight.push(date);
cal.highlight(date);
}
Related
I'm trying to get all occurrences from a google calendar in Google Apps Script and create individual arrays for each event name.
Simplified version (example) of response array:
{summary=Name1, start={dateTime=2018-12-03T15:00:00+01:00}, end={dateTime=2018-12-03T23:00:00+01:00}},
{summary=Name2, start={dateTime=2018-12-04T11:00:00+01:00}, end={dateTime=2018-12-04T23:00:00+01:00}},
{summary=Name1, start={dateTime=2018-12-05T07:00:00+01:00}, end={dateTime=2018-12-05T15:00:00+01:00}}
What I can't figure out is how to filter/split (whatever you'd call it) this up so I'd end up with a new array with the following format:
EDIT
{Name1=[[2018-12-03, 15, 23, 8.0], [2018-12-04, 11, 23, 12.0], [2018-12-05, 7, 15, 8.0], [2018-12-06, 15, 23, 8.0]], Name2=[[2018-12-11, 7, 16, 9.0], [2018-12-12, 7, 16, 9.0]]}
The idea is to then iterate through this new array and do a foreach to get a list of all the dates for individual names.
This is as far as I've gotten
function hoursTally() {
var calendarId = [CALENDAR_ID];
var startDay = 24;
var endDay = 23;
var month = parseFloat(new Date().getMonth()).toFixed(0);
var year = new Date().getYear();
var startDate = new Date( year, month-1, startDay );
var endDate = new Date( year, month, endDay );
var optionalArgs = {
timeMin: startDate.toISOString(),
timeMax: endDate.toISOString(),
showDeleted: false,
singleEvents: true,
orderBy: 'startTime'
};
var response = Calendar.Events.list(calendarId, optionalArgs);
var events = response.items;
events.forEach(function(e){
Logger.log(e);
var name = e.summary;
var eventDateStart = new Date(e.start.dateTime);
var eventDateEnd = new Date(e.end.dateTime);
var startTime = parseFloat(eventDateStart.getHours()).toFixed(0);
var endTime = parseFloat(eventDateEnd.getHours()).toFixed(0);
var theDate = Utilities.formatDate(eventDateStart, 'GMT+1', 'yyyy-MM-dd');
var total = endTime-startTime;
});
}
Every attempt of looping the events and getting the aforementioned format has failed :(
Since your stated goal is to collect information from each similarly named event into a single summary object, your output data structure should not be an Array of objects - it should just be an associative object. An Array would be appropriate if you wanted equivalent objects to remain distinct, but you state this is not the case.
The solution is then to reduce the returned events into an object, where the key of the data is the name, and the value is an array of instance information. The instance information is itself an array (in your example, [2018-12-03, 15, 23, 8])
A simple example which you can adapt to your use case:
const summary = items.reduce(function (obj, item) {
var name = item.summary;
// If we haven't seen this name before, initialize an empty array
if (obj[name] === undefined) { obj[name] = []; }
...
// Create an array with the info we want to store
var info = [
eventStartDate,
...
];
// Store this info array with all the others for the same name
obj[name].push(info);
return obj;
}, {});
You then use this summary by iterating the object:
for (var name in summary) {
summary[name].forEach(function (info) {
...
});
...
}
Array#reduce
In MongoDB collection I have 3 objects. I need to update one variable (date type) in each object. The main task is to increment the date of the objects. For example: all objects have the same variable:
"Time1" : ISODate("2016-01-12T21:37:46.738Z")
My problem is to update the first object with the current date, manually I do it in this way:
$db.getCollection('my.data')({'_id':ObjectId("52e637fca92cf1ec6a73c1e8")}, {$currentDate: {Time1: true}})
The next is to increase the date of the second object by 1 day, I mean to update it with tomorrow date. I couldn't do it through the shell, because $inc doesn't work with Date type.
So, I am lost with javascript
I found how to get it with java script but I don't know how to collect all if this in one script.
var tomorrow = new Date();
tomorrow.setDate(today.getDate()+1);
Thank you for your help.
You could use the $set operator for the other fields, together the the $currentDate operator all within the update object:
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate()+1);
var dayAfterTomorrow = new Date();
dayAfterTomorrow.setDate(dayAfterTomorrow.getDate()+2);
db.getCollection("my.data").update(
{ "_id": ObjectId("52e637fca92cf1ec6a73c1e8") },
{
"$currentDate": { "Time1": true },
"$set": {
"Time2": tomorrow,
"Time3": dayAfterTomorrow
}
}
)
im currently starting with couchDB and have a problem building a reduce function on dates.
The database consists of timeline data for different locations. Every entry has a 'locationId' (String), a 'datetime' ( Array saved in lexicographic form like [year,month,day,hour,minute,sec]), a value (double)
i want to find out, which is the lowest and highest datetime for every location where a value exist. The timeline values have different start- and enddates.
In a first attempt i used _stats on milliseconds:
map:
function(doc) {
emit(doc.locationId, new Date(doc.datetime[0],doc.datetime[1],doc.datetime[2], doc.datetime[3], doc.datetime[4], doc.datetime[5]).getTime() ) }
reduce: _stats
this delivers the correct min and max milliseconds per locationId.
Now i want to have the output in a more readable form (formatted date string)
I tried different ways, here is the last one:
- map delivers locationId as key and a Date as value
- reduce converts every Date to milliseconds,
find the earlist date using Math.min,
re-converting milliseconds into Date and return
map:
function(doc) {
emit(doc.locationId, new Date(doc.datetime[0], doc.datetime[1],doc.datetime[2], doc.datetime[3], doc.datetime[4], doc.datetime[5]) ) }
reduce:
function(keys, values) {
var timestamps = new Array(values.length);
var i = 0;
var date;
for( date in values ) { timestamps[i] = date.getTime(); i++; }
var min = Math.min.apply(null, timestamps);
return new Date(min);
}
This results in 'null' for value.
is it possible to have a formatted date output for this case?
I've found the solution:
map:
function(doc) {
if (doc.datetime && doc.plantId)
emit(doc.plantId, [new Date(doc.datetime[0],doc.datetime[1]-1,doc.datetime[2],doc.datetime[3],doc.datetime[4],doc.datetime[5],0), new Date()] )
}
reduce:
function(keys, values) {
values.sort();
var date = [values[0][0], values[values.length-1][0]];
return date;
}
result: (key=locationID, value=[earliestDate, latestDate])
I'm trying to figure out how to disable all the dates older than today, this gets tricky with the bootstrap datetime picker I am using below.
The examples allows for an array of dates to be passed when creating the object :
$(function () {
$('#datetimepicker7').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
How can I do this without calculating all the dates before today and passing that to the function ?
Doc : http://eonasdan.github.io/bootstrap-datetimepicker/#example8
I think you looked for a bad option....
Doc : Look at here : http://eonasdan.github.io/bootstrap-datetimepicker/#options
In this doc, the option's name is minDate
Extract :
minuteStepping:1, //set the minute stepping
minDate:`1/1/1900`, //set a minimum date <---- HERE
maxDate: ,
$(function () {
$('#datetimepicker7').datetimepicker({
defaultDate: moment("11/01/2013", "DD-MM-YYYY"),
minDate: moment()
});
});
Apart from setting the minDate property, you might also want to disable times before the current time. You would do this as follows:
First, you need to initialise the minDate parameter to midnight of the current day. Then, you bind an event listener to the dp.change event and reject any times that are earlier than the current time.
When rejecting such a time, you notify the user and reset the DateTimePicker time to the current time. I've created a function to do this:
// Argument obj is the used DateTimePicker object
// Argument f is the selected datetime by the user
// Argument n is the current datetime
var checkDate = function (obj, f, n) {
if (f.getTime() < n.getTime()+60*1000 && !open) {
open = true;
$('#message').dialog({
modal: true,
position: ['center', 'center'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I understand. Let me try again": function () {
$(this).dialog("close");
obj.data('DateTimePicker').setDate(n);
open = false;
}
}
});
}
}
Likewise, you still want to update the minDate and maxDate parameters upon dp.change too. Therefore, combining both checking the time and updating the properties, you would get:
jQuery("#startDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
This will yield exactly what you are after:
You can find the full code in the jsFiddle I prepared for you:
GO TO THE DEMO
I am relatively new to the JSON notation, and have run into an issue when attempting to reformat. The current format contained in the database needs to be modified to a new format for importation into a project timeline graph.
Here is the current JSON format:
[
{
"name":"5-HP-N/A-N/A-F8",
"node":{
"name":"5",
"id":14
},
"timeline":{
"epc":null,
"m1":null,
"m2":null,
"m3":1554087600000,
"m4":1593572400000,
"m5":1625108400000,
"m6":1641006000000,
"m7":1656644400000
},
"fab":{
"name":"F8",
"id":1
}
},
However, in order to display in the graph, I need the following format:
{
'start': new Date(value from epc, or first non-null milestone),
'end': new Date(value from m1 or first non-null milestone), // end is optional
'content': 'label from start Date milestone'
'group' : ' value from name field above 5-HP'
'classname' : ' value from start Date milestone'
});
I am trying to write a function in order to accomplish this. Only epc, m1, or m2 may have the value of null, but the condition must be checked for to determine if an event range should be created and where it should end. What would be the best way to reformat this json data (preferrably from an external json sheet)?
Edit: Thanks for all the help I see how this is working now! I believe I didn't explain very well the first time though, I actually need multiple class items per "group".
The end result is that these will display inline on a timeline graph 'group' line, and so I am trying to figure out how to create multiple new objects per array element shown above.
So technically, the first one will have start date = m3, and end date = m4. Then, the next object would have the same group as the first (5-HP...), the start date = m4, end date = m5...etc. This would continue until m7 (always an end date but never a start date) is reached.
This is why the loop is not so simple, as many conditions to check.
see a working fiddle here: http://jsfiddle.net/K37Fa/
your input-data seems to be an array, so i build a loop around that. if not just see this fiddle where the input data is a simple object: http://jsfiddle.net/K37Fa/1/
var i
, result = [],
, current
, propCounter
, content = [ { "name":"5-HP-N/A-N/A-F8", "node":{ "name":"5", "id":14 }, "timeline":{ "epc":null, "m1":null, "m2":null, "m3":1554087600000, "m4":1593572400000, "m5":1625108400000, "m6":1641006000000, "m7":1656644400000 }, "fab":{ "name":"F8", "id":1 } }],
// get the milestone in a function
getMileStone = function(obj) {
propCounter = 1;
for(propCounter = 1; propCounter <= 7; propCounter++) {
// if m1, m2 and so on exists, return that value
if(obj.timeline["m" + propCounter]) {
return {key: "m" + propCounter, value: obj.timeline["m" + propCounter]};
}
}
};
// loop over content array (seems like you have an array of objects)
for(i=0;i< content.length;i++) {
current = content[i];
firstMileStone = getMileStone(current);
result.push({
'start': new Date(current.epc || firstMileStone.value),
'end': new Date(current.m1 || firstMileStone.value),
'content': firstMileStone.key,
'group' : current.name,
'classname' : firstMileStone.value
});
}
EDIT:
getMileStone is just a helper-function, so you could just call it with whatever you want. e.g. current[i+1]:
secondMileStone = getMileStone(current[i + 1])
you should just check, if you are not already at the last element of your array. if so current[i+1] is undefined, and the helperfunction should return undefined.
you could then use as fallback the firstMileStone:
secondMileStone = getMileStone(current[i + 1]) || firstMileStone;
see the updated fiddle (including check in the getMileStone-Helperfunction): http://jsfiddle.net/K37Fa/6/