[英]Creating a calendar event with Google Apps Script from html5 time and date inputs?
I have an app that uses the html service to basically create a personal work time clock. 我有一个使用html服务的应用程序,基本上可以创建个人工作时间时钟。 I can successfully write the start date and time as well as the end date and time along with a note to a spreadsheet.
我可以成功地将开始日期和时间以及结束日期和时间以及注释添加到电子表格中。 I can also pull the spreadsheet data and display a table of recent shifts to the app.
我还可以提取电子表格数据并显示该应用程序最近班次的表格。
The trouble is when I try and create a calendar event. 问题是当我尝试创建日历事件时。 Here is what I have so far.
这是我到目前为止所拥有的。
<h1>When Did I 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>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (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 his own question, but edited the question instead of answering. [用户回答了自己的问题,但是编辑了问题而不是回答。 I'm trying to salvage it here by copying his edit into a community wiki answer]
我正在尝试通过将他的编辑内容复制到社区Wiki答案中来挽救它]
I finally figured out how to get this to work. 我终于想出了如何使它起作用。 Here is what I changed.
这是我改变的。 Within the submit function I formatted the input values like this.
在Submit函数中,我像这样格式化输入值。
var start = new Date(dateIn+ " " +timeIn).toString();
var end = new Date(dateOut+ " " +timeOut).toString();
This is the server call. 这是服务器调用。
google.script.run.withSuccessHandler(function(ret){
console.log(ret);
}).logHours(start, end, note);
Here is the code.gs function 这是code.gs函数
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 the 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 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.