Calendar Service : Date and Time Picker

Google Sites for Business‎ > ‎Google Apps Script Examples‎ > ‎

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;

}

Google Sites Examples