这是一个可能与您可以使用的对话框接近的示例。
文件名:aq4.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
google.script.run
.withSuccessHandler(function(vA){
var id='sel1';
var select = document.getElementById(id);
select.options.length = 0;
for(var i=0;i<vA.length;i++) {
select.options[i] = new Option(vA[i],vA[i]);
}
})
.getInspectors();
});
function submitForm(frmData) {
google.script.run
.withSuccessHandler(function(hl){
document.getElementById('status').style.display ='inline';
document.getElementById('status').innerHTML=hl;
})
.createEvent(frmData)
}
console.log('My Code');
</script>
</head>
<body>
<h1 id="main-heading">Event Dialog</h1>
<div id="formDiv">
<form id="myForm">
<br /><input type="text" name="title" value=""/> Title
<br /><input type="datetime-local" name="start" id="dt"/> Start
<br /><input type="datetime-local" name="end" /> End
<br /><select id="sel1" name="inspector"></select> Inspector
<br /><input type="button" value="Submit" onclick="submitForm(this.parentNode)" />
</form>
</div>
<div id="status" style="display: none"></div>
</body>
</html>
文件名:aq1.gs
function createEvent(frmData) {
//Logger.log('title: %s, start: %s, end: %s, inspector: %s ',frmData.title,frmData.start,frmData.end,frmData.inspector);
var rv='Event Not Created';
var cal=CalendarApp.getCalendarById("calendar id");//insert your calendar id
var event=cal.createEvent(frmData.title,new Date(frmData.start),new Date(frmData.end));
if(event) {
event.setDescription(Utilities.formatString('Inspector: %s', frmData.inspector))
rv="Event Created";
}
return rv;
}
//The following function gets the data in column one of the Inspectors sheet or tab in the script container spreadsheet. You can create your own list that way and then you wont have to type them in
function getInspectors() {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Inspectors');
var rg=sh.getRange(1,1,sh.getLastRow()-1,1);
var vA=rg.getValues();
return vA;
}
function launchDialog() {
var userInterface=HtmlService.createHtmlOutputFromFile('aq4');
SpreadsheetApp.getUi().showModelessDialog(userInterface, "Event Creation Dialog");
}
这是一个免费赠品,您可以使用它来显示您的日历 ID:
function displayCalendarInfo()
{
var cals=CalendarApp.getAllCalendars();
var s='Calendar Information';
for(var i=0;i<cals.length;i++)
{
s+=Utilities.formatString('<br />Name: %s Id: %s', cals[i].getName(),cals[i].getId());
}
s+='<br /><input type="button" value="Close" onClick="google.script.host.close();" />';
var ui=HtmlService.createHtmlOutput(s).setWidth(1200).setHeight(450);
SpreadsheetApp.getUi().showModelessDialog(ui, 'Calendar Data');
}
这也是一个简单的对话框。
对话框如下所示:
警告:不要尝试使用 google.script.run 将 Date() 从客户端传递到服务器。阅读this,直到你明白它在告诉你什么。