Ionic 4 Calendar

Ionic Framework
1

I have followed so many tutorial and did a research but I couldn’t find a way to implement a calendar looks like this. ( without using mobiscroll)
image

2

Well, presumably you have a backing list of dates containing enough information in each one to tell whether to make a white box, a faded green circle, an intense green circle, a faded magenta circle, or an intense magenta circle, so the first thing I would do is leverage the techniques in good ol’ Tour of Heroes part 2 to lay those out in an ordinary vertical list. For managing the nuts and bolts of which months have how many days and what the days of the week are called and whatnot, I would use date-fns.

Once you’re happy with that, then I would turn it into a grid using the techniques described in CSS-Tricks’ Grid Guide. Others may suggest using Ionic’s grid components: that’s fine if you like them (I don’t really see the point, and just stick with ordinary CSS grid).

3

thanks for quick response. i have manage the problem by editing scss of the calendar component

4

i have made a calendar similar looking like this by editing the calendar component css and adding ng template

for the developers who are struggling like me I’m putting the code link here

cheers

5

Hi @prabhashi1 I’m trying to do something very similar although not for an ovulation calendar! As you found I can’t see exactly how to change the Ionic2-calendar component so that it looks a bit better. I will have a read through you code . How did you get the round highlighted dates? Thanks for making your stuff available.

6

hi @townheadbluesboy ,

you can get round highlighted dates by editing global.scss–> .calendar-day class as mention in the screen shot

image

2 Likes
7

Thanks very much I’ll give a it a go

8

I did the same to change the background color of the enabled days but it doesn’t work.
image