DEV Community

Cover image for How to manipulate ion2-calendar CSS in an Ionic 6 project.
molarity69
molarity69

Posted on

2 1

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

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 */
    }
}
Enter fullscreen mode Exit fullscreen mode

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')); 
    }
Enter fullscreen mode Exit fullscreen mode

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.

Neon image

Serverless Postgres in 300ms (!)

10 free databases with autoscaling, scale-to-zero, and read replicas. Start building without infrastructure headaches. No credit card needed.

Try for Free →

Top comments (0)

AI Agent image

How to Build an AI Agent with Semantic Kernel (and More!)

Join Developer Advocate Luce Carter for a hands-on tutorial on building an AI-powered dinner recommendation agent. Discover how to integrate Microsoft Semantic Kernel, MongoDB Atlas, C#, and OpenAI for ingredient checks and smart restaurant suggestions.

Watch the video 📺

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay