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