Question

我有一个使用html服务的应用程序基本上创建个人工作时钟。我可以成功地将开始日期和时间以及结束日期和时间以及电子表格的注释写入。我还可以提取电子表格数据并显示最近班次的表格。

问题是当我尝试创建日历事件时。这是我到目前为止所拥有的。

<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;
}

Answer 1

[用户回答了他自己的问题，但编辑了问题而不是回答。我试图通过将他的编辑复制到社区wiki答案中来挽救它。

我终于想出了如何让它发挥作用。这是我改变的。在提交函数中，我格式化了这样的输入值。

var start = new Date(dateIn+ " " +timeIn).toString();
var end = new Date(dateOut+ " " +timeOut).toString();

这是服务器调用。

google.script.run.withSuccessHandler(function(ret){
  console.log(ret);
}).logHours(start, end, note);

这是code.gs函数

function logHours(start, end, note){
   var event = CalendarApp.getCalendarById("").createEvent('TFO: ' + note, new Date(start), new Date(end), {description: note});
   return event;
 }

代码的其余部分。

<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;
}

使用来自html5时间和日期输入的Google Apps脚本创建日历活动？

1 个答案: