How to manipulate ion2-calendar CSS in an Ionic 6 project.
Tags: css, ionic, ion2calendar, angular
Published: 2022-12-20 11:17:52

#### Hello fellow **coders**! Welcome to my first post!

Many modern apps are in need of a calendar for time management, appointment booking, scheduling, you name it.

In my case it was a surveillance schedule app of a company I worked for and I had to make it look pretty. So I searched online for the available open source options to help me get started quick and came across [ion2-calendar](https://github.com/hsuanxyz/ion2-calendar).

After long hours of frustration through trial and error I finally found out how to access the CSS properties of the **ion2-calendar** components, so I share my hard gained wisdom to hopefully save some time from another struggling coding soul that didn't find a better solution online.

Don't get me wrong, it's one of **the best** tools but it is lacking the proper amount of up-to-date examples to help newbies, hence the present post!

##### Note: If you're reading this far into the future you might want to check out the last section of this post too.

The following example is for **CSS manipulation** of said **Ionic 6** project.

## Solution

In **`global.scss`** file add any of the following according to your needs.

### !IMPORTANT!

Make sure you always use the !important command after every property you need to change otherwise you won't see any changes.

```css
ion-calendar {
    /* for the background and the main container of the calendar */
}

ion-calendar .title {
    /* top bar of month and arrows */
}

ion-calendar .md.icon-small.hydrated {
    /* forward and backward arrows */
    --ionicon-stroke-width: 32px; /* for making the arrows bold */
}

ion-calendar .transparent .week-title {
    /* weekday names */
    li {
      /* inner text */
    }
}

ion-calendar .days-box {
    /* the container of the days */
}

ion-calendar .switch-btn {
    /* month name */
}

ion-calendar .days-btn {
    /* button and background of each day */
}

ion-calendar .days {
    /* each day container */
    p {
        /* inner text */
    }
}

ion-calendar .days .today {
    /* today's date */
    p {
        /* inner text */
    }
}

ion-calendar .days .on-selected {
    /* selected day */
    background-color: black !important;
    border-radius: 20% !important;
    p {
        color: white !important;
        font-weight: 700;
    }
    margin-bottom: 0 !important;
}
ion-calendar .days .last-month-day {
    /* last and next months month's day */
    p {
        /* inner text */
    }
}
```

I left some properties in the .on-selected class as an example. 

Since you get the hang of it it's a matter of minutes to code the best looking calendar. I hope this helped!

#### **Happy coding!**


## For future readers

In case any of this information not being relevant in the future, due to updates, the way I discovered about these containers and CSS classes and subclasses is the following command,
```javascript
ngAfterViewInit() {
        console.log('CalendarPage.ngAfterViewInit()');
        /* the line below */
        console.dir(document.getElementById('ion-calendar')); 
    }
```
placed in the parent components ngAfterViewInit method.
Inspect your app in the browser and see the results in the console.

Follow the *children* attribute "maze" and pay attention to the *classList* attribute too in order to know how to refer to them in the CSS.
It's good practice using it when you need to know the structure of a packaged component you didn't write yourself, so keep it in mind.

#### EDIT

I totally forgot that you can get the exact same information, as with the above command, by opening the DOM tree in your browsers Dev Tools.