Calendar Service : Date and Time Picker


Date and Time Picker


A Google Apps Script standalone 'Date and Time' picker.

Using the 'doGet' so the Apps script can be used as a Apps Script Gadget directly from the Google Sites Insert Menu. 

  • Add the Apps script Snippet to Google Site.
  • Add 2 calendars , 1 with available dates and times.
  • Authorize the App Script.
  • Insert the Apps script gadget from the Insert menu in google sites.

Apps Script Gadget (process)


Contact form UI 
  • Add Contact Details 
  • Select Year
  • Select Month
Dates and Time called from the Available Calendar

  • Select Date and Time 
  • Submit/Book Date and Time
Date and time added to booking calendar

Email of Booking confirmation sent with details  to Customer [..to Active User for testing].



Apps Script Snippet:


//GLOBAL VARIABLES ///////////////////////////////////////////////////////////////////////////////////////////////////// 

var app = UiApp.createApplication().setTitle('Simple Time and Date Picker');

//Available Times and Dates Calendar and booking calendar - ADD 2 CALENDAR IDS
var available_calendar = CalendarApp.getOwnedCalendarById('xxxxxxxxxxem92oat3esc8@group.calendar.google.com');
var booking_calendar = CalendarApp.getOwnedCalendarById('xxxxxxm92oat3esc8@group.calendar.google.com');

/////////////////////////////////////////////////////////////////////////////////////////////////////

function doGet() {
   
  var main_grid = app.createGrid(10, 1).setId('main_grid').setStyleAttribute('color', '#ccc');
    main_grid.setStyleAttribute('float', 'center').setWidth('600');
  
  var form_submit_handler = app.createServerClickHandler('form_submit');
  var form_submit = app.createButton('Book Time and Date',form_submit_handler).setId('form_submit');
    form_submit_handler.addCallbackElement(main_grid);
    form_submit.setEnabled(false);
  
  var name_text  = app.createTextBox().setId('name_text').setName('name_text').setValue('Name').setWidth('200');
  var email_text = app.createTextBox().setId('email_text').setName('email_text').setValue('Email').setWidth('200');
  
    
  var year_select = app.createListBox().setId('year_select').setName('year_select').setWidth('200');
    year_select.addItem('Select Year');
    var year_select_handler = app.createServerChangeHandler('YearSelect')
    year_select.addChangeHandler(year_select_handler);
    year_select_handler.addCallbackElement(main_grid);
       
    year_select.addItem ('2011');
    year_select.addItem ('2012');
    year_select.addItem ('2013');
    year_select.addItem ('2014');
    year_select.addItem ('2015');
  
  var month_select = app.createListBox().setId('month_select').setName('month_select').setWidth('200');
    month_select.addItem('Select Month');
    var month_select_handler = app.createServerChangeHandler('MonthSelect')
    month_select.addChangeHandler(month_select_handler);
    month_select_handler.addCallbackElement(main_grid);
       
    month_select.addItem ('January');
    month_select.addItem ('February');
    month_select.addItem ('March');
    month_select.addItem ('April');
    month_select.addItem ('May');
    month_select.addItem ('June');
    month_select.addItem ('July');
    month_select.addItem ('August');
    month_select.addItem ('September');
    month_select.addItem ('October');
    month_select.addItem ('November');
    month_select.addItem ('December');
    month_select.setEnabled(false); 
  
  var date_select = app.createListBox().setId('date_select').setName('date_select').setWidth('200');
    date_select.addItem('Select Date');
    var date_select_handler = app.createServerChangeHandler('DateSelect')
    date_select.addChangeHandler(date_select_handler);
    date_select_handler.addCallbackElement(main_grid);
    date_select.setEnabled(false); 
  
  var thanks_text = app.createLabel().setId('thanks_text').setText('Thank you for your booking!').setWidth('350').setHeight('400').setStyleAttribute('color', '#ff6600').setHeight('60');
   thanks_text.setVisible(false);
  
   
  app
    .add(main_grid)
    .add(thanks_text) 
  
  main_grid.setWidget(0,0,name_text); // note: 0,0 = 1st column , 1st row 
  main_grid.setWidget(1,0,email_text);
  main_grid.setWidget(2,0,year_select);
  main_grid.setWidget(3,0,month_select);
  main_grid.setWidget(4,0,date_select);
  main_grid.setWidget(5,0,form_submit);
  
  return app; //Very important to return the app
  
}
function YearSelect(e) {
   
  app.getElementById('month_select').setEnabled(true); 
  
  return app;
}

function MonthSelect(e) {
 
  var year_selection = e.parameter['year_select'];
  var month_selection = e.parameter['month_select'];
  GetDates(year_selection,month_selection,month_selection);
  app.getElementById('date_select').setEnabled(true); 
  
  return app;
}
function GetDates(year_selection,start_month, end_month){
  
    //SIMPLE 30 DAYS for the month
    var events = available_calendar.getEvents(new Date(start_month+ " 1, " + year_selection ), new Date(end_month+" 31, " + year_selection ));
    var date_select = app.getElementById('date_select');  
    for (var i = 0; i < events.length; i++) {
    var available_dates = events[i].getStartTime().toString();
    date_select.addItem(available_dates);}
  
    return app;
}
function DateSelect(e) {
  
    app.getElementById('form_submit').setEnabled(true);
  
    return app;   
}
function form_submit(e) {
  
  var form_name = e.parameter.name_text;
  var form_email = e.parameter.email_text;
  var form_month = e.parameter['month_select'];
  var form_dateandtime = e.parameter['date_select'];
 
  //For testing only change to Customer email - form_email
  var customer_email = Session.getUser().getEmail();
    
  var body = 'Please use a Html Capable email client.'; //ignored when using html is available in email client
  var customer_body_html = '<h3>Time/Date Booking Confirmation </h3> <br>'+form_name + '<br>' + form_email + '<br>' + form_month+ '<br>' + form_dateandtime;
  MailApp.sendEmail(customer_email, 'Customer Booking Confirmation', body, {htmlBody:customer_body_html, replyTo:'MY@EMAIL.com'});
  
  //Dates/Time from available calendar should be removed
  booking_calendar.createEventFromDescription(' BOOKING: '+ form_name +', '+ form_email +', '+ form_dateandtime +' 60 minutes');
  
  app.getElementById('main_grid').setVisible(false);
  app.getElementById('thanks_text').setVisible(true);
  
  return app;
}