Create calendar events by submitting form

This is an example to show you, how to create a calendar event by submitting a UI form.


In this example, I have created a UI form which asks for event Date, event Title, and event Details. Once the form is submitted, it gets the particular calendar and creates an event in it starting at 12:00 AM to 1:00 AM (Your local time) on the specified date. Also, it will log the same event information in a spredahseet.


To try a live demo of this exmaple, Fill this form and click the 'Create Events' button. To see the event in Calendar and Logs in spreadsheet, refresh the page. The time which will be shown in Calendar & Spreadsheet, which you see, will look different because all the time is Getting logged in IST (GMT+5:30) Time zone

createCal event from UI form

Example code:

//Create the GUI form

function doGet() {

  var app = UiApp.createApplication().setTitle('Form and Calendar Events');


  //Create a penel which holds all the form elelemnts

  var panel = app.createVerticalPanel().setId('panel');


  //Create the form elelemnts

  var eventDateLabel = app.createLabel('Event Date:');

  var evenDate = app.createDateBox().setId('eventDate');

  var eventTitleLabel = app.createLabel('Event title:');

  var eventTitle = app.createTextBox().setName('eventTitle').setId('eventTitle');

  var eventDeatilLabel = app.createLabel('Event Details:');

  var eventDetail = app.createTextArea()

      .setSize('200', '100').setId('eventDetail').setName('eventDetail');

    var btn = app.createButton('createEvents');


  //Create handler which eill execute 'createEvents(e)' on clicking the button

  var handler = app.createServerClickHandler('createEvents');


  //Add this handler to the button



  //Add all the elemnts to the panel 








  //Add this panel to the application


  //return the application

  return app;


function createEvents(e){


  //Get the active application

  var app = UiApp.getActiveApplication();



    //get the entries;

    var eventDate = e.parameter.eventDate;

    var eventTitle = e.parameter.eventTitle;

    var eventDetails = e.parameter.eventDetail;


    //Get the calendar

    var cal = CalendarApp.getCalendarsByName('Calendar-Name')[0];//Change the calendar name

    var eventStartTime = eventDate;

    //End time is calculated by adding an hour in the event start time 

    var eventEndTime = new Date(eventDate.valueOf()+60*60*1000);

    //Create the events

    cal.createEvent(eventTitle, eventStartTime,eventEndTime ,{description:eventDetails});


    //Log the entries in a spreadsheet

    var ss = SpreadsheetApp.openById('Spreadsheet-Key');//Change the spreadhseet key to yours

    var sheet = ss.getSheets()[0];

    sheet.getRange(sheet.getLastRow()+1, 1, 1, 5).setValues([[new Date(), eventDate,eventTitle, eventDetails, 'Event created']]);


    //Show the confirmation message

    app.add(app.createLabel('Event created Successfully'));

    //make the form panel invisible


    return app;



  //If an error occurs, show it on the panel


    app.add(app.createLabel('Error occured: '+e));

    return app;