How to manipulate ion2-calendar CSS in an Ionic 6 project.

molarity69 — Tue, 20 Dec 2022 11:17:52 +0000

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.

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.

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,

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.

DEV Community: molarity69