Forem: Usman Khalil

Get Public Holidays By Country Using Google Calendar API

Usman Khalil — Sun, 30 Jan 2022 16:10:29 +0000

This is something that I picked up while working on a client's project. I was tasked with displaying holidays with respect to user's region. One thing led to another and here I'm writing a small tutorial post here.

Background

It's not that it's super hard. But the major problem I faced was lack of connecting pieces. Everything felt scattered around and I found it cumbersome to join things together. I thought moment.js might offer any such functionality but to no luck. I did find a sister package named moment-holiday but I felt like it's not completed as I couldn't find my country in it. A similar package date-holidays is also there and it has good API but yeah - it wasn't completed either.

I finally resorted to Google Calendar API thanks to this stackoverflow answer.

Google Calendar API

To use Google Calendar API, you need to have API key from Google. Go to Google Developer Console and from the credential section, create a API for yourself. Each request to calendar API would need that key to process successfully.

Fetching Holidays

Google Calendar documentation provides a good start to help you understand the basic idea. We'll be making a fetch request using this endpoint

GET https://www.googleapis.com/calendar/v3/calendars/{calendarId}/events

calendarId is the pain point here. A normal search won't give you a clear idea where exactly would one find this id. Stackoverflow queries end up getting few calendar ids but for rest of them, it took me few hours to get on. Thankfully, we have developers who open source their works to help other. I was expecting Google to have their list available in documentation but unfortunately that wasn't the case.

Anyhow, let's start with some JavaScript and do some grinding.

const BASE_CALENDAR_URL = "https://www.googleapis.com/calendar/v3/calendars";
const BASE_CALENDAR_ID_FOR_PUBLIC_HOLIDAY =
  "holiday@group.v.calendar.google.com"; // Calendar Id. This is public but apparently not documented anywhere officialy.
const API_KEY = "YOUR_API_KEY";
const CALENDAR_REGION = "en.usa"; // This variable refers to region whose holidays do we need to fetch

There are other parameters available as well. Complete list can be found in the documentation here. Let's make a fetch request now.

/**
 * Making a fetch request
 */
const url = `${BASE_CALENDAR_URL}/${CALENDAR_REGION}%23${BASE_CALENDAR_ID_FOR_PUBLIC_HOLIDAY}/events?key=${API_KEY}`

fetch(url).then(response => response.json()).then(data => {
const holidays = data.items;
})

// A typical holidays would have this JSON structure:
{
  "kind": "calendar#event",
  "etag": "\"3262600847118000\"",
  "id": "20220417_3s7sr1qa2d9o9oe5cbgd3b6ju0",
  "status": "confirmed",
  "htmlLink": "https://www.google.com/calendar/event?eid=MjAyMjA0MTdfM3M3c3IxcWEyZDlvOW9lNWNiZ2QzYjZqdTAgZW4udXNhI2hvbGlkYXlAdg",
  "created": "2021-09-10T19:00:23.000Z",
  "updated": "2021-09-10T19:00:23.559Z",
  "summary": "Easter Sunday",
  "description": "Observance\nTo hide observances, go to Google Calendar Settings > Holidays in United States",
  "creator": {
    "email": "en.usa#holiday@group.v.calendar.google.com",
    "displayName": "Holidays in United States",
    "self": true
  },
  "organizer": {
    "email": "en.usa#holiday@group.v.calendar.google.com",
    "displayName": "Holidays in United States",
    "self": true
  },
  "start": {
    "date": "2022-04-17"
  },
  "end": {
    "date": "2022-04-18"
  },
  "transparency": "transparent",
  "visibility": "public",
  "iCalUID": "20220417_3s7sr1qa2d9o9oe5cbgd3b6ju0@google.com",
  "sequence": 0,
  "eventType": "default"
}

In my case, I was mostly concerned with summary, start and end properties.

Fetching for Other Regions

My requirement included displaying holidays based on regions. For this purpose, I need list of all supported regions by Google Calendar. Luckily, someone on GitHub already did the hardwork on this part. Shoutout to mattn. You can find the list in this gist:

Hopefully this would help save someone's few hours.

Enforce Husky Pre-Commit With ESLint & Prettier In Monorepo

Usman Khalil — Tue, 13 Jul 2021 04:25:17 +0000

Okay, this kept me frustrated for a whole week because I suck at configurations at many levels. But thankfully, I've now closed my 16 chrome tabs and writing this out to make sure you don't have to face the same exact problem.

Introduction

When different developers work on the same codebase, it becomes necessary to enforce some rules to keep code in check. ESLint and Prettier go hand in hand for this purpose in most of JS projects and integration support is widely available.

Finally husky is library that allows us trigger actions before committing or pushing. It provides git hooks for this purpose. I'll navigate it to in a minute.

Problem Statement

The problem that I faced here was that my project was built like a monorepo. It has frontend, backend and library folders in it. In order to use husky git hooks, they are to be placed in the directory where git is placed.

But then again, for husky to work, it needs to utilize package.json file. This issue had me rolling for days.

Solution

I'll navigate step by step from installing husky to committing the code. This might takes quite a few commands, so please bear with me.

Installing husky

In the root folder of the repo where git resides, run following commands:

npx husky install
npx husky add .husky/pre-commit "npm test"

This will create a .husky folder in the root directory with pre-commit file in it. This file would have a single command npm test in it.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test

Let's leave it for now and move to next step.

Installing Linters

Go to your frontend project and install eslint, husky and prettier with the following commands:

npm install husky lint-staged eslint-plugin-prettier eslint-config-prettier --save-dev
npm install --save-dev --save-exact prettier

--save-dev keeps these libraries in devDependencies because they won't be used in production and are here for development only.

Configuring Linters:

We'll be creating few files to let our linters know how they would be working across the project.

Create .estlintignore and .prettierignore files and place the following code

build
node_modules
.github

This will inform our linters not to look into files in the above mentioned directories

Now we'll be adding few configurations for estlint. Create a file .eslintrc.js with this code:

module.exports = {
    env: {
        browser: true,
        es6: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:prettier/recommended',
        'plugin:jsx-a11y/strict',
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 2018,
        sourceType: 'module',
    },
    plugins: ['react', 'jsx-a11y', '@typescript-eslint'],
    rules: {
        'react-hooks/exhaustive-deps': 'error',
        'no-var': 'error',
        'brace-style': 'error',
        'prefer-template': 'error',
        radix: 'error',
        'space-before-blocks': 'error',
        'import/prefer-default-export': 'off',
    },
    overrides: [
        {
            files: [
                '**/*.test.js',
                '**/*.test.jsx',
                '**/*.test.tsx',
                '**/*.spec.js',
                '**/*.spec.jsx',
                '**/*.spec.tsx',
            ],
            env: {
                jest: true,
            },
        },
    ],
};

And finally the configuration for prettier. Add a file .prettierrc.js and put the following code:

module.exports = {
    printWidth: 100,
    tabWidth: 2,
    singleQuote: true,
    semi: true,
    trailingComma: 'all',
    arrowParens: "always",
    overrides: [
        {
            files: '*.{js,jsx,tsx,ts,scss,json,html}',
            options: {
                tabWidth: 4,
            },
        },
    ],
};

Setting Up Package.json

We're almost there and now we'll have to add few scripts to package.json. I'll guide you about their purpose along the way.

Add the following line in the scripts section: "prepare": "cd .. && husky install frontend/.husky" npm prepare command runs before we commit our code. What essentially we're doing here is that we are moving out of frontend directory and installing husky in the front-end.
Now we need to add our linting configuration governed by lint-staged. Place the following code after scripts section:

"lint-staged": {
        "*.{js,ts,tsx, jsx}": [
            "eslint --quiet --fix"
        ],
        "*.{json,md,html,js,jsx,ts,tsx}": [
            "prettier --write"
        ]
    },

We've written the extensions of the files eslint and prettier would be amending.

Finally, we'll be adding a script that would invoke linting. Add this line in your scripts:
"lint-front": "lint-staged"
Running npm run lint-front would trigger linting our application.
Let's just inform our husky to run npm run lint-front before commit. Go to the husky folder in the project root and replace pre-commit file with this code:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

cd frontend
npm run lint-frontend

If everything followed correctly, making a commit would trigger linting. That's the end of it. Hope this helps someone. If you are still having issue, do mention the comments. I'd be more than happy to help.