Build a Calendar Web Component with Stencil.js

In this post, I will be guiding you through the implementation of a basic calendar in Stencil. The design of the calendar will be kept simple.

Pros of Web Components

• Framework Agnostic: Web components are compatible with a wide range of frameworks such as React, Vue, Angular, and can also be used without any framework at all. This flexibility is a significant advantage of web components.
• Future Proof: Web components leverage standard HTML specifications, CSS, and JavaScript, which enables modern browsers to support them natively.
• Easy to share/reuse. Employing web components simplifies the management of multiple projects or ecosystems that have distinct technology stacks, where component sharing or reuse is necessary
• No dependencies. One of the benefits that web components offer is the ability to connect a specific custom element without importing intricate dependencies into the project. This sets web components apart from popular frameworks.

This tutorial assumes that you are already acquainted with: 

• TypeScript 
• Command-Line 
• CSS 
• NPM

First, you need to install Stencil.js by running the following command in your terminal:

npm install -g @stencil/core

Next, create a new Stencil.js project by running the following command:

stencil create calendar

This will create a new Stencil.js project called "calendar".
Create a new component for the calendar by running the following command:

cd calendar
stencil generate calendar

This will create a new component called "calendar" in the "src/components" directory.
Open the "src/components/calendar" directory and edit the "calendar.tsx" file to implement the calendar component. Here's an example implementation:

import { Component, h, State } from '@stencil/core';

@Component({
  tag: 'my-calendar',
  styleUrl: 'calendar.css',
  shadow: true,
})
export class Calendar {
  @State() currentDate: Date = new Date();

  private nextMonth(): void {
    const newDate = new Date(this.currentDate.getTime());
    newDate.setMonth(newDate.getMonth() + 1);
    this.currentDate = newDate;
  }

  private prevMonth(): void {
    const newDate = new Date(this.currentDate.getTime());
    newDate.setMonth(newDate.getMonth() - 1);
    this.currentDate = newDate;
  }

  render() {
    const monthNames: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    const daysOfWeek: string[] = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const currentDate: Date = this.currentDate;
    const firstDayOfMonth: Date = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
    const lastDayOfMonth: Date = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
    const daysInMonth: number = lastDayOfMonth.getDate();
    const monthName: string = monthNames[currentDate.getMonth()];
    const year: number = currentDate.getFullYear();
    const monthDays: number[][] = [];

    let dayOfWeek: number = firstDayOfMonth.getDay();
    let dayOfMonth: number = 1;
    while (dayOfMonth <= daysInMonth) {
      let week: number[] = [];
      for (let i = 0; i < 7; i++) {
        if ((i < dayOfWeek && monthDays.length === 0) || dayOfMonth > daysInMonth) {
          week.push(null);
        } else {
          week.push(dayOfMonth++);
        }
      }
      monthDays.push(week);
      dayOfWeek = 0;
    }

    return (
      <div>
        <div class="header">
          <button onClick={() => this.prevMonth()}>Previous Month</button>
          <h2>{monthName} {year}</h2>
          <button onClick={() => this.nextMonth()}>Next Month</button>
        </div>
        <table>
          <thead>
            <tr>
              {daysOfWeek.map((day) => (
                <th>{day}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {monthDays.map((week) => (
              <tr>
                {week.map((day) => (
                  <td>{day}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

Now, we can add some styles to the component.

:host {
  display: block;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
  border: 1px solid #1e88e5;
    border-radius: 7px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color:  #1E88E5;
  color: #fff;
  padding:5px;
  border-radius: 5px 5px 0 0;
}
h2{
  margin:0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th {
  text-align: left;
  padding: 10px;
  font-weight: normal;
  font-size: 14px;
  color:  #1E88E5;
}

td {
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

td:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color:  #1E88E5;
}

button:hover {
  color: #005CB2;
}

.mdl-button {
  font-size: 24px;
  margin: 0 10px;
  color: #FFA000;
}

.mdl-button:hover {
  color: #FF8F00;
}

To use the calendar component in index.html, you need to add a reference to the my-calendar element and its script tag. Here are the steps to do that:

Add the following line to index.html, where you want the calendar to appear:

<my-calendar></my-calendar>

Import the calendar component In the index.html file, add the following line to import the my-calendar component:

<script src="/build/my-calendar.js"></script>

Make sure to adjust the path to the my-calendar.js file if necessary.

The calendar component will resemble the following:

I hope you found this tutorial helpful. Your feedback is highly appreciated.