Google Apps Script - calendar shift generator - can we split dates and times?

Question

Ok so I jumped in at the deep end a bit with Google Apps Script. At work we have week long shifts of set hours. The three types of shifts can be Earlies (7am - 3.30pm), Middles (8.30am to 5pm) and Lates (10.30am to 7pm).

What I am trying to do is generate a UI with a date picker and 3 buttons, one for each shift. The idea is you click a Monday on the date picker, then click a shift button and it generates 5 shifts (one for each day of the week) and adds them as events to my Google calendar.

I can get the functions to generate the events, but I am unable to tie in the input from the date picker into the date for each function. Is there any way of splitting the date and time for the events? Ideally the time would be 'Hard coded' into the script so it couldn't be changed but the date would be user selectable.

I hope all this makes sense, code below:

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

 };

Srik Srik · Accepted Answer · 2012-07-17T09:04:48

Okay - there is something known as callback element which you have to add to your sever handler.

So, ideally instead of adding all the UI elements directly, I would create a panel and add to the panel. Something like

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

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

Using that you should be able to get the date selected in the date picker using eventInfo.parameter.picker

Google Apps Script - calendar shift generator - can we split dates and times?

3 Answers