javascript - Creating a calendar event with Google Apps Script from html5 time and date inputs? -
i have app uses html service create personal work time clock. can write start date , time end date , time along note spreadsheet. can pull spreadsheet data , display table of recent shifts app.
the trouble when try , create calendar event. here have far.
<h1>when did work?</h1> <div> <form id='timeclock'> <p class='in'>date in: <input type="date" id="datein" name="datein"></p> <p class='in'>time in: <input id="clockin" type="time" name="clockin" value="23:00:00"> </p> <p class='out'>date out: <input type="date" id="dateout" name="dateout"></p> <p class='out'>time out: <input id="clockout" type="time" name="clockout" value="07:30:00"></p> <textarea name="note"></textarea> <p><input type='submit'value="submit"></p> </form> <h3 class='hide'>submitted:</h3> <p id='dayin'></p> <p id='timein'></p> <p id='dayout'></p> <p id='timeout'></p> <p id='notesum'></p> <? var data = displaydata(); ?> <table> <? (var = 0; < data.length; i++) { ?> <tr> <? (var j = 0; j < data[i].length; j++) { ?> <td><?= data[i][j] ?></td> <? } ?> </tr> <? } ?> </table> <a href="" target="_blank">open spreadsheet</a> /div> <?!=htmlservice.createhtmloutputfromfile('css').getcontent(); ?> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#timeclock').submit(function(){ var datein = $('#datein').val(); var timein = $('#clockin').val(); var dateout = $('#dateout').val(); var timeout = $('#clockout').val(); var note = $('textarea').val(); google.script.run.withsuccesshandler(function(ret){ $('#timeclock').slideup(); $('.hide').show().text("submitted: "); $('#dayin').text("date in: " + datein); $('#timein').text("time in: " + timein); $('#dayout').text("date out: " + dateout); $('#timeout').text("time out: " + timeout); $('#notesum').text("note: " + note); console.log(ret); }).sendclock(this); google.script.run.withsuccesshandler(function(ret){ console.log(ret); }).loghours(this); }); }); </script> code.gs function doget() { var html = htmlservice.createtemplatefromfile("index") .evaluate().settitle('whendidiwork') .setsandboxmode(htmlservice.sandboxmode.native); return html; } function sendclock(form){ var ss = spreadsheetapp.openbyurl('').getsheets()[0]; ss.insertrowafter(1); var range = ss.getrange(2, 1, 1, 5); var values = [[ form.datein, form.clockin, form.dateout, form.clockout, form.note]]; range.setvalues(values); logger.log(values); return values; } function displaydata(){ var ss = spreadsheetapp.openbyurl('').getsheets()[0]; var data = ss.getsheetvalues(1, 1, 7, 5); logger.log(data); return data; } function loghours(form){ var event = calendarapp.getdefaultcalendar().createevent('work hours', new date(form.datein + form.clockin), new date(form.dateout + form.clockout),{description: form.note}); logger.log(event); return event; }
[user answered own question, edited question instead of answering. i'm trying salvage here copying edit community wiki answer]
i figured out how work. here changed. within submit function formatted input values this.
var start = new date(datein+ " " +timein).tostring(); var end = new date(dateout+ " " +timeout).tostring();
this server call.
google.script.run.withsuccesshandler(function(ret){ console.log(ret); }).loghours(start, end, note);
here code.gs function
function loghours(start, end, note){ var event = calendarapp.getcalendarbyid("").createevent('tfo: ' + note, new date(start), new date(end), {description: note}); return event; }
the rest of code.
<form id='timeclock'> <p class='in'>date in: <input type="date" id="datein" name="datein"></p> <p class='in'>time in: <input id="clockin" type="time" name="clockin" value="23:00:00"> </p> <p class='out'>date out: <input type="date" id="dateout" name="dateout"></p> <p class='out'>time out: <input id="clockout" type="time" name="clockout" value="07:30:00"></p> <textarea name="note"></textarea> <p><input type='submit'value="submit"></p> </form> <script> $(document).ready(function(){ $('#timeclock').submit(function(){ var datein = $('#datein').val(); var timein = $('#clockin').val(); var dateout = $('#dateout').val(); var timeout = $('#clockout').val(); var note = $('textarea').val(); google.script.run.withsuccesshandler(function(ret){ $('#timeclock').slideup(); $('.hide').show().text("submitted: "); $('#dayin').text("date in: " + datein); $('#timein').text("time in: " + timein); $('#dayout').text("date out: " + dateout); $('#timeout').text("time out: " + timeout); $('#notesum').text("note: " + note); console.log(ret); }).sendclock(this); google.script.run.withsuccesshandler(function(ret){ console.log(ret); }).loghours(this); }); }); </script>
code.gs
function doget() { var html = htmlservice.createtemplatefromfile("index") .evaluate().settitle('whendidiwork') .setsandboxmode(htmlservice.sandboxmode.native); return html; } function loghours(form){ var event = calendarapp.getdefaultcalendar().createevent('work hours', new date(form.datein + form.clockin), new date(form.dateout + form.clockout),{description: form.note}); logger.log(event); return event; }
Comments
Post a Comment