How to Colorize Google Calendar Event Using Apps Script (1/2)

Google Calendar + Google Apps Script | Made using Canva

Automatically colorize your calendar events using the power of Google Calendar and Google Apps Script platform.

We have so many things going in our life. In this fast paced era, one must keep track of their daily activities and agenda. I use Google Calendar to organize my academic and personal life and I bet you are using it as well. Google Calendar provides a facility to create multiple calendars in order to keep different kind of events tidy. It also let’s us colorize them, but in the addition to that, you can also colorize different events in a single calendar!

This can be a real life changer when used to it’s full potential.

Colorized Events From My Academic Calendar

As you can see in the image, even without reading the title I can get a quick look on what kind of event is up next in my schedule. For example, Lectures gets “Green”, Test gets “Orange”, etc. Sounds interesting, right?

Let’s get right into it, shall we?

Prerequisites

Before we start coding, grab your Calendar ID from that calendar’s settings page.

You need to follow certain convention on how to name your events. In our case, we are naming our events as follow,

• Assignment: “Event Name”
• Test: “Event Name”

Excluding double quotes.

Now that we have our Calendar ID, let’s open Apps Script console. Follow this link: https://script.google.com/home

We will create a new project. This is what it will look like on the first start.

New Project in Apps Script

A bit about Apps Script

Google Apps Script is a JavaScript platform in the cloud. With access to several Google products like Sheets, Drive, Calendar to name a few. If you happen to know a little bit of JavaScript, this will come natural to you.

NOTE: All the reference are quoted where needed. Look for (ref) tag. I have also attached references and further guide in the footer of this article.

Coding

Remove the boilerplate code and let’s start writing our own.

var calendar = CalendarApp.getCalendarById('putYourCalendarIdHere:String');
var beginDate = new Date(1970, 0, 1); 
var endDate = new Date(2500, 0, 1);

Let’s understand the code line by line.

Line 1 create a variable called calendar and it fetches Calendar using the Calendar ID you just passed. (ref)

Line 2 and 3 denotes start date and end date respectively. We will query all the events falling into this time frame.

function assign_color() {
  var events = calendar.getEvents(beginDate, endDate);
  for (var i=0; i<events.length; i++) {
    var event = events[i];
    var title = event.getTitle();
    if (/Submission:/.test(title)) {
      event.setColor('3');
    } else if (/Test:/.test(title)) {
      event.setColor('5');
    } else if (/Subscription:/.test(title)) {
      event.setColor('9');
    } else {}
  }
}

Function assign_color() is where all the magic happens! Query the all events falling between beginDate and endDate using getEvents() method. This will return an array of CalendarEvent (ref)

Now, let’s loop over events . We will grab title of the event using getTitle() method. It will return a string type. Check if the title we got contains any of our “Event Type” using Regular Expression.

/Submission:/.test(title) will return true if the variable title has Submission: inside it. Here /Submission:/ is a RegExpObject. If regular expression matches any of the given, it will go ahead and colorize the event using setColor() method. This method will take String-ed integer as parameter. Here is the list of available colors: https://developers.google.com/apps-script/reference/calendar/event-color

Testing

Create some random events in your calendar and remember to follow the naming convention!

Three Events in the Calendar With Default Color

As you can see, we have three events in our calendar with their default color. Now, let’s run our assign_color method!

Running the assign_color Method

NOTE: You might be asked to allow access to use your Google Calendar when your first run your code.

As soon as you run your code, head over to calendar to see the magic!

Colorized Calendar Events Using Apps Script

Conclusion

Impressed? Show your creativity using the Google Apps Script. It is real fun to write code in Apps Script. The possibilities are endless.

In the next part of this article, we will see how we can automate this script using IFTTT! (Edit: I have switched from Python to IFTTT platform.)

I hope this article was helpful! Thank you for taking time into reading.

Link to part two: https://medium.com/@dhavalsavalia/how-to-colorize-google-calendar-event-using-apps-script-2-2-59593b8b8567

References and Further Reading

Calendar Service | Apps Script | Google Developers

Overview of Google Apps Script | Google Developers

Regular expressions