Can you please say whats wrong with this? I have a javascript function called which creates a new events array and tries to refresh fullcalendar.
var events=new Array();
var numberofevents = this.serviceVariableGetDates.getTotal();
for (i=0;i<numberofevents;i++)
{
//alert("numbrr:" + i);
var dates=this.serviceVariableGetDates.getItem(i);
console.log(dates.getData());
var start_date = dates.getValue("c0");
var end_date = dates.getValue("c1");
var event_name = dates.getValue("c2");
//var EventEntry = [ 'title: '+ event_name, 'start: '+ start_date,'end: '+ end_date ];
events['title'] = event_name;
events['start'] = start_date;
events['end'] = end_date;
events['color'] = "blue";
this.label1.setCaption(start_date);
//EventArray.push(EventEntry);
console.log(events['title']);
}
$('#calendar').fullCalendar('addEventSource',events);
$('#calendar').fullCalendar('rerenderEvents');
The calendar does not refresh or show the events in the events array....Through different debug methods I am sure that the events array is populated with the correct data. The start_date is for example "1307318400000" which is in the unix timestamp format. The fullcalendar is being initialized somewhere else in the begining (when the page load) and it stays unchanged even though addeventsource and rerenderevents methods are called.
according to the docs you need to put array of events to the addEventSource function
event must be an Event Object with a title and start at the very
least.
var events=new Array();
var numberofevents = this.serviceVariableGetDates.getTotal();
for (i=0;i<numberofevents;i++)
{
//alert("numbrr:" + i);
var dates=this.serviceVariableGetDates.getItem(i);
console.log(dates.getData());
var start_date = dates.getValue("c0");
var end_date = dates.getValue("c1");
var event_name = dates.getValue("c2");
//var EventEntry = [ 'title: '+ event_name, 'start: '+ start_date,'end: '+ end_date ];
event = new Object();
event.title = event_name; // this should be string
event.start = start_date; // this should be date object
event.end = end_date; // this should be date object
event.color = "blue";
event.allDay = false;
this.label1.setCaption(start_date);
//EventArray.push(EventEntry);
console.log(events['title']);
events.push(event);
}
$('#calendar').fullCalendar('addEventSource',events);
//$('#calendar').fullCalendar('rerenderEvents');
Hope this will help!
Related
How to create calendar event using server-side javascript code?
Here is the code for creating calendar event.
var node = companyhome.childByNamePath("Sites/demo/calendar");
var myEvent = node.createNode(new Date().getTime() + "-" + Math.round(Math.random()*10000) + ".ics", "ia:calendarEvent")
myEvent.properties["ia:whereEvent"] = "Where event";
myEvent.properties["ia:descriptionEvent"] = "This is the description";
myEvent.properties["ia:whatEvent"] = "What event";
var fromDate = new Date();
var fromISODate = utils.toISO8601(fromDate);
myEvent.properties["ia:fromDate"] = fromISODate;
var toDate = new Date();
toDate.setHours(toDate.getHours() + 3);
var toISODate = utils.toISO8601(toDate);
myEvent.properties["ia:toDate"] = toISODate;
myEvent.save();
logger.warn("Created new calendar event: " + myEvent.nodeRef);
I have Google Apps Script which inputs events into my google calendar from a spreadsheet. Anyone know how to have the script set a row's background color to green & last column value to "complete" only if it's been ran through the loop?
Currently I have it just setting the full range to these parameters, but would like to prevent certain rows from being included if the last column is equal to "Invalid".
function inputEvents() {
var spreadsheet = SpreadsheetApp.getActiveSheet();
var calendarId = spreadsheet.getRange("B1").getValue();
var calendar = CalendarApp.getCalendarById(calendarId)
var lr = spreadsheet.getLastRow();
var count = spreadsheet.getRange("A3:AF"+lr+"").getValues();
for (x=0; x<count.length; x++) {
var events = count[x];
var name = events[2];
var phone = events[3];
var email = events[4];
var title = events[5];
var startTime = events[6];
var endTime = events[7];
var description = events[8];
var location = events[9];
var eventId = events[31];
var contactHeader = "CONTACT:";
var descriptionHeader = "DESCRIPTION:";
var complete = "Complete";
var invalid = "Invalid";
var info =
contactHeader.bold() + "\n"
+ name + "\n"
+ phone + "\n"
+ email + "\n"
+ "\n" + descriptionHeader.bold() + "\n"
+ description;
var options = {
'guests' : email,
'description': info,
'sendInvites': 'True',
'location': location,
}
if (eventId != complete && eventId != invalid){
calendar.createEvent(title, startTime, endTime, options);
spreadsheet.getRange("AF3:AF"+lr+"").activate().setValue('Complete');
spreadsheet.getRange("A3:AF"+lr+"").activate().setBackground('#d9ead3');
}
}
}
You're using the setValue and setBackground methods to the entire range, you need to apply them only to the range you're interested in, try setting a currentRow variable and change the range you're getting inside your if statement, like this:
var currentRow = 3 + x;
if (eventId != complete && eventId != invalid){
calendar.createEvent(title, startTime, endTime, options);
spreadsheet.getRange("AF" + currentRow).setValue('Complete');
spreadsheet.getRange("A"+ currentRow + ":AF" + currentRow).setBackground('#d9ead3');
}
I have a function which retrieve data from a xml file and then it is supposed to show it in a div. The problem is that I only get the last element of the array. Is there a way to obtain all the elements and populate them into the div?
Here is the function:
function paradascamionesHistorico() {
google.maps.event.addListener(map, 'click', function() {
infowindowMarkerParadas.close();
});
var Boton = document.getElementById('Boton').value;
var textboxImei = document.getElementById('imeiHistorico').value;
var textboxFecha = document.getElementById('fechaInicioHistorico').value;
var textboxFechaFin = document.getElementById('fechaFinHistorico').value;
var textboxDesdeHora = document.getElementById('desdeHoraHistorico').value;
var textboxHastaHora = document.getElementById('hastaHoraHistorico').value;
downloadUrl("paradas.asp?imei="+textboxImei+"&fecha="+textboxFecha+" "+textboxDesdeHora+"&fechaFin="+textboxFechaFin+" "+textboxHastaHora,
function(data) {
var xml = xmlParse(data);
var markersParadas = xml.documentElement.getElementsByTagName("marker");
var position = [];
//var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersParadas.length; i++) {
var lat = parseFloat(markersParadas[i].getAttribute("lat"));
var lng = parseFloat(markersParadas[i].getAttribute("lng"));
var myLatlngParadas = new google.maps.LatLng(lat, lng);
var fechaInicio = markersParadas[i].getAttribute("fechaInicio");
var fechaFinal = markersParadas[i].getAttribute("fechaFinal");
var diferencia = markersParadas[i].getAttribute("diferencia");
//alert(+diferencia);
var datearray = diferencia.split("/");
var newDate = datearray[1] + '/' + datearray[0] + '/' + datearray[2];
var aFecha = new Date(newDate);
var hours = aFecha.getHours();
var minutes = aFecha.getMinutes();
var seconds = aFecha.getSeconds();
var markerParadas = createMarkerParadas(myLatlngParadas, hours, minutes, seconds, fechaInicio, fechaFinal);
myMarkersParadas.push(markerParadas);
var tablaParadas = '<a href="javascript:myclickParadas(' + (myMarkersParadas.length-1) + ')">' + seconds + '<\/a><br>';
document.getElementById("paradasDiv").innerHTML = tablaParadas;
}//finish loop
}); //end download url
}//termina function
function myclickParadas(i) {
google.maps.event.trigger(myMarkersParadas[i], "click");
}
So if anyone knows how to show the rest of the elements of the array I will be very gratefully.
Best regards.
document.getElementById("paradasDiv").innerHTML = tablaParadas;
You are overwriting innerHTML of #paradasDiv on each iteration of your loop.
That's why you only see the last element of the array.
You have to append to it:
document.getElementById("paradasDiv").innerHTML += tablaParadas;
Also, before starting the loop you maybe need to empty it:
document.getElementById("paradasDiv").innerHTML = '';
Thanks in advance. I'm making a website for a service I run with my partner called Laughter Yoga Dublin. I've come across a problem that's got me stuck. It looks like lots of code below but my question pertains mainly (I think) to the first and last few lines.
The first five lines are variable declarations as you can see. Those lines are followed by a jQuery function beginning ($.getJSON etc...) in which those variables are processed. And that function ends just before the last few lines of code given below.
My question is: how come the lines at the end of the code (console.log etc...) are showing that the variables' values are uninfluenced by the preceding function? I'm the first to admit that I'm a baby with this programming stuff but I thought that since I'd declared the variables outside the function, their values could be changed from within the function. Have I got that wrong? I'm finding it a bit hard to understand, and my own (limited) experience with this seems to contradict the effects of the bit of code below.
I'm willing to research and learn but I'd really appreciate even a nudge in the right direction with this problem.
Thanks again,
Niall, Dublin, Ireland.
var events = []
var theBitImInterestedIn
var prettyDate;
var nextEventString;
var JSONurl = 'https://www.google.com/calendar/feeds/avmknaehgjre8qjqhbi22fn8mo%40group.calendar.google.com/public/basic?alt=json&orderby=starttime&max-results=20&singleevents=true&sortorder=ascending&futureevents=true';
$.getJSON(JSONurl ,function(data){
theBitImInterestedIn = data.feed.entry;
$.each(theBitImInterestedIn, function(key, val){
var event = {};
var Content = val.content.$t;
var weekDayNumber, weekDay = '', Days=['Mon','Tue','Wed','Thu', 'Fri', 'Sat', 'Sun'];
var monthNumber, monthOfTheEvent = '', Months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var venue = theBitImInterestedIn[0].content.$t
venueBegin = venue.indexOf('Where');
venueMod = venue.substring(venueBegin);
venueEnd = venue.indexOf('<br') -2;
venue = venueMod.substring(7, venueEnd);
$.each(Days, function(key, val){
if (Content.match(Days[key])){
weekDay = val;
weekDayNumber = key + 1;
}
})
$.each(Months, function(key, val){
if (Content.match(Months[key])){
monthOfTheEvent = val;
monthNumber = key + 1;
}
})
var actualDay = Content.match(/\d+/)[0];
var year = Content.match(/\d+/g)[1];
event.Title = 'Laughter Yoga';
var tempDate = monthNumber + '/' + actualDay + '/' + year;
var prettyDate = weekDay + ' ' + actualDay + ' ' + monthOfTheEvent + ' ' + year;
event.Venue = venue;
event.PrettyDate = prettyDate;
event.Date = new Date(tempDate);
events.push(event);
})
nextEventString = 'Next class: ' + events[0].PrettyDate + ' at ' + events[0].Venue;
//$('p').html(nextClassString).appendTo('#next-class');
});
console.log(events); //these result in an empty [] and undefined
console.log(theBitImInterestedIn)
console.log(prettyDate)
console.log(nextEventString)
As mentioned, getJSON is asynchronous. In order for console.log to do anything with the changed variables, you would need to call them in a function after the asynchronous call.
var events = []
var theBitImInterestedIn
var prettyDate;
var nextEventString;
function callJSON() {
var JSONurl = 'https://www.google.com/calendar/feeds/avmknaehgjre8qjqhbi22fn8mo%40group.calendar.google.com/public/basic?alt=json&orderby=starttime&max-results=20&singleevents=true&sortorder=ascending&futureevents=true';
$.getJSON(JSONurl ,function(data){
...
///////////////////////////////////////////////////////////////
// call to show console log
///////////////////////////////////////////////////////////////
logConsole()
});
}
function logConsole() {
console.log(events); //these result in an empty [] and undefined
console.log(theBitImInterestedIn)
console.log(prettyDate)
console.log(nextEventString)
}
I have an unordered list which is dynamically created, and I need to add a class called 'selected' to one particular -li-.
The -ul- is a list of the Days of the Week, and the -li- that needs to be selected is the current day. Unfortunately I can't figure out how to add this class to just the one element, and the entire list disappears whenever I try to add this class. Here's my code:
var weekday = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var today = day.getDay();
for(var x=0;x<=6;x++){
$('ul').append(
$('<li>')
.toggleClass(function(){
if(today == x){ return 'selected'; }
else{ return ''; };
});
.append( $('' + weekday[x] + ''));
);
$('li:last').addClass('last-child');
Can someone help me figure out how to add this class to just the current day's -li-?
if(today = x)
= assign
== compares
Another way of doing it:
var weekday = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var lis = [];
var today = new Date().getDay();
jQuery.map( weekday,
function( day, ind ){
var cls = ind===today ? " class='selected'" : "";
lis.push( "<li><a" + cls +" href='#" + day.toLowerCase() + "'>"+ day + "</a></li>" );
}
);
$("ul").html( lis.join("") );
Following the advice from the other comments and fixing some errors fixed the code:
var weekday = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
today = new Date().getDay(),
list = $('ul');
for(var x=0;x<=6;x++){
list.append(
$('<li></li>', {
html : '' + weekday[x] + ''
}).toggleClass(function(){
if(today == x){
return 'selected';
}
}).bind('click', function(e){
e.preventDefault();
$(this).parent().children('li').removeClass('selected');
$(this).addClass('selected');
})
);
}
$('li:last').addClass('last-child');
Is day defined as new Date?
var day = new Date();
or var today = new Date().getDay();
Try that:
var weekday = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var d = new Date();
var today = d.getDay();
for(var x=0;x<=6;x++){
$('ul').append(
$('<li>' + weekday[x] + '')
);
$('li:last-child').addClass('last-child');
if(x == today)
{
$('li:gt('+(x - 1)+')').toggleClass('selected');
}
}