Question

好的，所以我使用Google Apps脚本深入了解了一下。在工作中，我们有一个星期的工作时间班次。三种类型的轮班可以是Earlies（早上7点 - 下午3点30分），Middles（上午8点30分到下午5点）和Lates（上午10点30分到晚上7点）。

我要做的是生成一个带有日期选择器和3个按钮的UI，每个班次一个。您的想法是单击日期选择器上的星期一，然后单击一个班次按钮，它会生成5个班次（一周中的每一天），并将它们作为事件添加到我的Google日历中。

我可以获得生成事件的函数，但是我无法将日期选择器的输入绑定到每个函数的日期。有没有办法分割事件的日期和时间？理想情况下，时间将被“硬编码”到脚本中，因此无法更改，但日期可由用户选择。

我希望这一切都有道理，代码如下：

// loads the UI
function doGet() {
  var app = UiApp.createApplication();

  var label1 = app.createLabel("To use this application, select a Monday and then hit the Early Middle or Late button");
   app.add(label1);
  var label2 = app.createLabel("5 events will be created from the start date across five days");
   app.add(label2);

   var picker = app.createDatePicker().setId("picker");
   var handler = app.createServerHandler("change");
    app.add(picker);

  var button1 = app.createButton("Early").setId("button1");
   button1.addClickHandler(app.createServerHandler("early"));
   app.add(button1);

   var button2 = app.createButton("Middle").setId("button2");
    button2.addClickHandler(app.createServerHandler("middle"));
   app.add(button2);

  var button3 = app.createButton("Late").setId("button3");
   button3.addClickHandler(app.createServerHandler("late"));
   app.add(button3);

   return app;
};

//Handles date picker changes
 function change(eventInfo) {
   var app = UiApp.getActiveApplication();
   app.add(app.createLabel("The value of the date picker changed to " +     eventInfo.parameter.picker));
  return app;
};


//Generates the events
 function early(){
  var cal = CalendarApp.getDefaultCalendar();
  var title = "Computacenter";
  var start = new Date("July 21, 2012 07:00:00");  
  var end = new Date("July 21, 2012 15:30:00");
  var loc = "Unspecified";
  var recurrence = CalendarApp.newRecurrence().addDailyRule().times(5);

  var event = cal.createEventSeries(title, start, end, recurrence, {location : loc});

};


function middle(){

  var cal = CalendarApp.getDefaultCalendar();
  var title = "Computacenter";
  var start = new Date("July 21, 2012 08:30:00");
  var end = new Date("July 21, 2012 17:00:00");
  var loc = "Unspecified";
  var recurrence = CalendarApp.newRecurrence().addDailyRule().times(5);

  var event = cal.createEventSeries(title, start, end, recurrence, {location : loc});

};


function late(){

  var cal = CalendarApp.getDefaultCalendar();
  var title = "Computacenter";
  var start = new Date("July 21, 2012 10:30:00");
  var end = new Date("July 21, 2012 19:00:00");
  var loc = "Unspecified";
  var recurrence = CalendarApp.newRecurrence().addDailyRule().times(5);

  var event = cal.createEventSeries(title, start, end, recurrence, {location : loc});

 };

Answer 1

好的 - 有一些叫做回调元素的东西，你必须添加到你的服务器处理程序。

因此，理想情况下，我不是直接添加所有UI元素，而是创建一个面板并添加到面板中。像

这样的东西

var panel = app.createVerticalPanel().setId('panel'); 
app.add(panel); 
/* .... */
panel.add(picker); 
/* and the like... */

button2.addClickHandler(app.createServerHandler("middle").addCallbackElement(panel));

使用它你应该能够使用eventInfo.parameter.picker获取在日期选择器中选择的日期

Answer 2

这是您修改后的代码

// loads the UI
function doGet() {
  var app = UiApp.createApplication();

  var container = app.createVerticalPanel();

  var label1 = app.createLabel("To use this application, select a Monday and then hit the Early Middle or Late button");
   container.add(label1);
  var label2 = app.createLabel("5 events will be created from the start date across five days");
   container.add(label2);

   var picker = app.createDatePicker().setId("picker");
   var handler = app.createServerHandler("change");
  picker.addValueChangeHandler(handler);
    container.add(picker);

  var button1 = app.createButton("Early").setId("button1");
   button1.addClickHandler(app.createServerHandler("generateEvents").addCallbackElement(container));
   container.add(button1);

   var button2 = app.createButton("Middle").setId("button2");
    button2.addClickHandler(app.createServerHandler("generateEvents").addCallbackElement(container));
   container.add(button2);

  var button3 = app.createButton("Late").setId("button3");
   button3.addClickHandler(app.createServerHandler("generateEvents").addCallbackElement(container));
   container.add(button3);

  app.add(container);

   return app;
};

//Handles date picker changes
 function change(eventInfo) {
   Logger.log(eventInfo);
   var app = UiApp.getActiveApplication();
   app.add(app.createLabel("The value of the date picker changed to " +     eventInfo.parameter.picker));
  return app;
};


//Generates the events
 function generateEvents(e){
   var source = e.parameter.source;
   var date = e.parameter.picker.getDate();
   var month = e.parameter.picker.getMonth(); 
   var year = e.parameter.picker.getFullYear();

   var startTime;
   var endTime;

   //(7am - 3.30pm), Middles (8.30am to 5pm) and Lates (10.30am to 7pm).
   if(source == 'button1'){
     var startTime = '07:00';
     var endTime = '15:30';
   }

   //Middle events time
   if(source == 'button2'){
     var startTime = '08:30';
     var endTime = '17:00';
   }

   //Late events time
   if(source == 'button3'){
     var startTime = '10:30';
     var endTime = '19:00';
   }

  var cal = CalendarApp.getDefaultCalendar();
  var title = "Computacenter";
   //Using format new Date(year, month, day, hours, minutes, seconds); 
  var start = new Date(year, month, date, parseInt(startTime.substring(0,2)), parseInt(startTime.subString(3,5)));
  var end = new Date(year, month, date, parseInt(endTime.substring(0,2)), parseInt(endTime.subString(3,5)));
  var loc = "Unspecified";
  var recurrence = CalendarApp.newRecurrence().addDailyRule().times(5);

  var event = cal.createEventSeries(title, start, end, recurrence, {location : loc});

};

Answer 3

我担心你选择的方法是不可用的，至少不是非常用户友好，也不是“万无一失”。（即使使用回调元素）。你会发现很难避免有人选择错误的组合。

我建议使用3个单选按钮或listBox进行小时轮班，并使用日期选择器进行日期。单选按钮中的小时数将是您可以轻松转换为可以与日期结合的开始时间/结束时间的字符串。此外，日期选择器不是最好的解决方案，如果你想要工作几周，因为一个人可以选择一周中的任何一天，如果我理解你，选择的日子应该总是星期一，系统工作不是吗？

我有一个关于日期和时间片的application with almost the same situation，你可以看看它并看看它是如何工作的，我认为它至少在它的方法中可以很好地适合你的用例，它给出了一个选择一周中的每一天，但这个选择可以减少到一个。该脚本也是shown here。如果您需要更多详细信息，请随时询问。

编辑： Waqar的回答是在我写作的时候出现的，他的建议离我的不远;-)并解决了几乎所有问题......只想考虑更换找到的日期选择器一种拒绝任何“非星期一”选择的方法！

编辑2：以获得正确的时间和日期（使用Number（）来转换数字中的字符串）：

   var date = Number(e.parameter.picker.getDate());
   var month =Number(e.parameter.picker.getMonth()); 
   var year = Number(e.parameter.picker.getFullYear());
...
...
       var st = startTime.split(':');// returns an array of 2 string elements
           var stH=Number(st[0]);
           var stM=Number(st[1]) ;              
       var et = endTime.split(':')
           var etH=Number(et[0]);
           var etM=Number(et[1]) ;              
       //Using format new Date(year, month, day, hours, minutes, seconds, milliseconds); 
      var start = new Date(year,month,date,stH,stM,0,0);
      var end = new Date(year,month,date,etH,etM,0,0);
       Logger.log(start+'   '+end)
      var loc = "Unspecified";
      var recurrence = CalendarApp.newRecurrence().addDailyRule().times(5);

      var event = cal.createEventSeries(title, start, end, recurrence, {location : loc});

或者一直保持字符串：

   var startstring = year+','+month+','+date+','+startTime.replace(':',',')+', 00,000'
   var endstring =  year+','+month+','+date+','+endTime.replace(':',',')+', 00,000'
   Logger.log('start = '+startstring+'      end = '+endstring)
   var st = startstring.split(',')
   var et = endstring.split(',')

   var start = new Date(st[0],st[1],st[2],st[3],st[4],st[5],st[6]);
   var end = new Date(et[0],et[1],et[2],et[3],et[4],et[5],et[6]);
   Logger.log(start+'   '+end)

Google Apps脚本 - 日历转换生成器 - 我们可以分割日期和时间吗？

3 个答案: