I had followed this question to create a table -> Excel table in HTML throught Javascript
My table is connected to a calendar created throught fullCalendar library and I implamented this table in a modal.
I also found a way to get the current visualized month as header of the table (by using getView). But now I have this bug:
This is how my table show up the first time I open it (it's the correct viewing): normal
and this is how it shows up when I open it the second time, also in a different month: wrong one
These are the mod I did to the code linked to the question added at the begining here:
function renderTable($targetTable, date, view, element ) {
var view = $('#calendar').fullCalendar('getView');
var start = view.intervalStart._d;
var end = view.intervalEnd.subtract(1, 'days');
alert(end);
//prende mese e anno attualmente visualizzati e lo imposta come titolo del modal nell'HTML
const months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
//calcola il numero dei giorni nel mese (30/31/28)
let numberOfDaysInMonth = new Date(end).getDate(); // just get the last day
//create the table header to display the month and date, and make is span all the days + the names column + the total column.
let $tableHeader = $(`<tr><th colspan="${numberOfDaysInMonth+2}" style="text-align: center;">${months[start.getMonth()]} ${start.getFullYear()}</th></tr>`)
I found the solution
Basically where i call the function that build my table I added this:
//table2 is the ID of my table
var table = document.getElementById('table2');
//i check if the table is empty; if it is than I render the thead and tbody
if (table.rows.length == 0){
var date = new Date();
renderTable($('#table2'), date);
}
//if not, before I delete whats inside and than I render it
else if(table.rows.lenght != 0){
$("#table2 thead").empty();
$("#table2 tbody").empty();
var date = new Date();
renderTable($('#table2'), date);
}
Related
please help me with my code. I tried display retrieved data in my html table using javascript, but nothing work. I am new in firebase, if it possible please anyone help me or give advice, I have already tried everything methods on stack (
The structure of my base looks like this,please check the image from the link below
/Notes/{Generated User Token}/{Generated Date}/{Generated Note ID}/Fields
My Html Code
<table style="width:100%" id="ex-table">
<tr id="tr">
<th>Name:</th>
</table>
Javascript
var database = firebase.database();
var uid = firebase.auth().uid; // Not working, How to get a path to Generated tokens?
var date = // How to get a path to "DateddMMyyyy" from a structure?
var notes = // How to get a path to "NoteXXXXXXX" from a structure?
database.ref().child('Notes' +token+ '/' +date+ '/' +notes+ '/' ).once('value').then(function(snapshot) {
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var val = data.val();
content +='<tr>';
content += '<td>' + val.name + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});
I do not know how to write a path to Generated Date "DateddMMyyyy" and Generated Note ID "NoteXXXXXXX"
I need only display end fields from structure. What should I edit in
my code?
Ps: For more details about Generated date, please check code from android studio "timeStamp = new SimpleDateFormat("ddMMyyyy").format(Calendar.getInstance().getTime());"
For getting the date formated id pass the input date to getDateId use it to construct the database.ref()
function getDateId(dt){
var date = new Date(dt);
var currentMonth = date.getMonth();
var currentDate = date.getDate();
if (currentMonth < 10) { currentMonth = '0' + currentMonth};
if (currentDate < 10) { currentMonth = '0' + currentDate};
return `Date${currentDate}${currentMonth}${date.getFullYear()}`
}
var inputDate = new Date();
var dateId = getDateId(inputDate);
console.log(dateId)
I am building a simple Google App Script that sends an e-mail every month with a file attached.
The file is updated with :
-the first day of the current month
-the last day of the current month
-the name of the month
All document creation and fields modification works well (I see the gdoc with modified fields few seconds after the script is launched).
The problem is that I receive an e-mail WITHOUT the modified fields in the attachment.
Does anyone knows WHY THE CHILD DOCUMENT IS MODIFIED WELL, BUT THE PDF VERSION ATTACHED TO THE EMAIL HASN'T ITS FIELDS MODIFIED ?
Thank you !
function myFunction() {
//DEALS WITH DATES
//Create a date
var today = new Date();
//Create a variable that will take month's values
var Mois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"];
//Get the current month
var MoisNum = today.getMonth()+1;
var TextMois = Mois[MoisNum-1];
//Get the number of first day of the month, and last day of the month
var Jour = today.getDate();
var NombreJourMois = ["31", "28", "31","30","31","30","31","31","30","31","30","31"];
var DernierJourMois = NombreJourMois[MoisNum-1];
//Get the current year
var Annee = today.getYear();
//Sets two variable with the date of the first day of the month and last day of the month
var DateDebutMois = 01+'/'+MoisNum+'/'+Annee;
var DateFinMois = DernierJourMois+'/'+MoisNum+'/'+Annee;
//CREATE A COPY OF THE PARENT FILE AND PUT IT IN THE RIGHT FOLDER
//Dossier de destination et fichier template
var DossierSource = DriveApp.getFolderById('0B0mCpRQd5BQidmQ2MGl4em9MRzA');
var DossierCible = DriveApp.getFolderById("13pril4REhDrITljX523z7LdQgVpOcazU");
var FichierSource = DriveApp.getFileById('109_Kuoxjh-C56MYeFhyyP-PhYJirCD5OVhuce0v7osI');
//Create a copy of the document and put it in the above folder
var Enfant = FichierSource.makeCopy();
DossierCible.addFile(Enfant);
DossierSource.removeFile(Enfant);
//MODIFY CHILD DOCUMENT WITH THE PROPER DATES AND RENAME IT
//Get the body of the child document
var BodyEnfant = DocumentApp.openById(Enfant.getId()).getBody();
//Replace date fields of the body by the right dates, and changes the name of the child document
BodyEnfant.replaceText('{1erDuMois}', DateDebutMois);
BodyEnfant.replaceText('{DernierDuMois}',DateFinMois);
Enfant.setName('Quittance de loyer - 218 rue de Grenelle - '+DateDebutMois);
//SEND AND EMAIL WITH THE DOCUMENT ATTACHED
var recipient = 'jean-marie.laly#magicmakers.fr';
var subject = 'Quittance de loyer - '+TextMois+' - '+Annee;
var body = 'Bonjour, Veuillez trouver ci-joint la quittance de loyer du mois de '+TextMois;
var pdf = Enfant.getAs("application/pdf");
GmailApp.sendEmail(recipient, subject, body, {attachments: [pdf],name: ''});
}
I think that the reason of your issue is because the modified values are not saved. So please convert to the PDF after the document was saved. In order to save the modified values to the document, how about this modification for your script?
Here, only modification part in your script was shown.
From :
//Get the body of the child document
var BodyEnfant = DocumentApp.openById(Enfant.getId()).getBody();
//Replace date fields of the body by the right dates, and changes the name of the child document
BodyEnfant.replaceText('{1erDuMois}', DateDebutMois);
BodyEnfant.replaceText('{DernierDuMois}',DateFinMois);
Enfant.setName('Quittance de loyer - 218 rue de Grenelle - '+DateDebutMois);
To :
//Get the body of the child document
var doc = DocumentApp.openById(Enfant.getId()); // Modified
var BodyEnfant = doc.getBody(); // Modified
//Replace date fields of the body by the right dates, and changes the name of the child document
BodyEnfant.replaceText('{1erDuMois}', DateDebutMois);
BodyEnfant.replaceText('{DernierDuMois}',DateFinMois);
Enfant.setName('Quittance de loyer - 218 rue de Grenelle - '+DateDebutMois);
doc.saveAndClose(); // Added
Reference :
saveAndClose()
If this was not what you want, please tell me. I would like to modify it.
i have a form where the previous dates from today must be hidden in the first date picker and the second date picker must not show dates previous to the first selected date.
Date picker one
Date picker two
The form is working for the first row but i can't get the code to work for the other rows that follow when i "add" a new row.
Can anyone assist me with this Please?
here is my current code :
$(document).ready(function(){
function updateMinimumEndDate ()
{
var minimum = $('.DepartDate input').val();
var minSplit = [];
minSplit = minimum.split("/");
var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
$('.ReturnDate input').attr('min',newMin);
}
$('.DepartDate input').change(updateMinimumEndDate);
});
$(function() {
$(document).ready(function () {
var todaysDate = new Date();
var year = todaysDate.getFullYear();
var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);
var day = ("0" + todaysDate.getDate()).slice(-2);
var minDate = (year +"-"+ month +"-"+ day);
$('.DepartDate input').attr('min',minDate);
});
});
The problem is with the line
$('.DepartDate input').change(updateMinimumEndDate);
This needs to be in docReady. It also needs to use the jQuery function .on so that it will be triggered for new rows as they are added. I haven't checked this:
$('.DepartDate input').on('change', 'AnchorSelector', function() {updateMinimumEndDate())};
where AnchorSelector is a location which contains your form.
I have some experience using the SharePoint Client Object Model to retrieve text fields and URLs/images from lists in SP 2013. I'm currently trying to do something similar with a calendar. I have been able to successfully retrieve Title and Location fields without any issue, but the Start and End Time fields I am not able to retrieve. I cannot figure out what exactly the issue is. Additionally, I can read Created and Modified with no problems. Here is the relevant code:
function retrieveListItemsCal() {
var clientContextCal = new SP.ClientContext.get_current();
var oListCal = clientContextCal.get_web().get_lists().getByTitle('Calendar');
var camlQueryCal = new SP.CamlQuery.createAllItemsQuery();
AllItemsCal = oListCal.getItems(camlQueryCal);
clientContextCal.load(AllItemsCal);
clientContextCal.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededCal), Function.createDelegate(this, this.onQueryFailedCal));
}
function onQuerySucceededCal(sender, args) {
var listItemInfo = '';
var listItemEnumeratorCal = AllItemsCal.getEnumerator();
var htmlCal = '';
htmlCal+="<div id='CalHeader'>Upcoming Events</div>\
<div id='CalDivider'></div>\
<div id='CalContainer'>";
while(listItemEnumeratorCal.moveNext()) {
var oListItemCal = listItemEnumeratorCal.get_current();
/*htmlCal+="<div class='CalItem'>\
"oListItemCal.get_item('Start Time')"\
</div>";*/
alert(oListItemCal.get_item("Start Time").format("MMMM d, yyyy"));
}
htmlCal+="</div>";
$("#CalSpace").append(htmlCal);
}
function onQueryFailedCal(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
$(document).ready(function(){
SP.SOD.executeFunc("sp.js", "SP.ClientContext", retrieveListItemsCal);
});
And here is a screenshot of the list columns: http://i.imgur.com/8IK4KTO.png
I have resolved my issue. I ran the following PowerShell queries (found here http://techtrainingnotes.blogspot.com/2012/10/sharepointfinding-column-display-and.html):
$web = Get-SPWeb SiteUrl
$list = $web.Lists["Announcements"]
$list.fields | select Title, InternalName, Hidden, CanBeDeleted | sort title | ft -AutoSize
The internal names of the Start Time and End Time fields are EventDate and EndDate, respectively.
I have a select option drop down that shows only Mondays (to select a particular week).
<select id="monday" name="monday">
<option value="7">
Mon 1/7/2013 (Week 02)
</option><option value="14">
Mon 1/14/2013 (Week 03)
</option>
// etc...
</select>
I would like to grab the option text (i.e. Mon 1/7/2013 (Week 02)) and use it to display that week's dates in a table:
<div id='mondaydate'>Mon 1/7/2013 (Week 02)</div> | <div id='tuesdaydate'>Tue 1/8/2013 (Week 02)</div> | <div id='wednesdaydate'>Wed 1/9/2013 (Week 02)</div>...
When the select option changes I would like the dates in the <div>'s to change as well. Right now the JavaScript I have (which isn't working) is:
<script type='text/javascript'>
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date("text");
document.getElementById("mondaydate").innerHTML = "mon.setDate(mon.getDate()+0)";
document.getElementById("tuesdaydate").innerHTML = "mon.setDate(mon.getDate()+1)";
document.getElementById("wednesdaydate").innerHTML = "mon.setDate(mon.getDate()+2)";
document.getElementById("thursdaydate").innerHTML = "mon.setDate(mon.getDate()+3)";
document.getElementById("fridaydate").innerHTML = "mon.setDate(mon.getDate()+4)";
document.getElementById("saturdaydate").innerHTML = "mon.setDate(mon.getDate()+5)";
document.getElementById("sundaydate").innerHTML = "mon.setDate(mon.getDate()+6)";
</script>
Can this be done, or am I spinning my wheels?
UPDATE - SOLUTION
As was suggested, I got a little quote happy, so I got rid of those. Also as suggested, the dates would need to be formatted as the first attempt only provided timestamps. Using this date format solution I was able to format the dates into something readable by humans.
Full working JavaScript code:
<script type='text/javascript'>
function formatDate(date, fmt) {
function pad(value) {
return (value.toString().length < 2) ? '0' + value : value;
}
return fmt.replace(/%([a-zA-Z])/g, function (_, fmtCode) {
switch (fmtCode) {
case 'Y':
return date.getUTCFullYear();
case 'M':
return pad(date.getUTCMonth() + 1);
case 'd':
return pad(date.getUTCDate());
case 'H':
return pad(date.getUTCHours());
case 'm':
return pad(date.getUTCMinutes());
case 's':
return pad(date.getUTCSeconds());
default:
throw new Error('Unsupported format code: ' + fmtCode);
}
});
}
function changeDate()
{
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon = new Date(text);
document.getElementById("mondaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+0)), '%M/%d/%Y');
document.getElementById("tuesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("wednesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("thursdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("fridaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("saturdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("sundaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
}
</script>
Also, note that originally I was setting the dates incorrectly with Monday +0, Tuesday +1, Wednesday +2, etc. (didn't notice it as all I got were timestamps). This really seemed to be setting the date, so Monday and Tuesday displayed correctly, but then Wednesday was displaying Thursday's date, Thursday displayed Sunday's date, etc. incrementing each by +1 instead solved that problem.
Remove the quotes around your variables or else it'll just display what's in the quotes and not perform any logic:
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date(text); <--- No quotes around text variable
document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0); <--- No quotes
//Same with everything below, stop with the quotes!
document.getElementById("tuesdaydate").innerHTML = mon.setDate(mon.getDate()+1);
document.getElementById("wednesdaydate").innerHTML = mon.setDate(mon.getDate()+2);
document.getElementById("thursdaydate").innerHTML = mon.setDate(mon.getDate()+3);
document.getElementById("fridaydate").innerHTML = mon.setDate(mon.getDate()+4);
document.getElementById("saturdaydate").innerHTML = mon.setDate(mon.getDate()+5);
document.getElementById("sundaydate").innerHTML = mon.setDate(mon.getDate()+6);
You have a lot of unnecessary quotes, which is screwing up your code.
Have a look at this :
JS :
$("#monday").click(function(){
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date(text);
console.log(mon);
document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0);
});
Find the working fiddle here : http://jsfiddle.net/bnWRU/1/
tymeJV already answered, but I think you might have some trouble with date format in javascript.
I sugest this post: Javascript get date in format