Ionic Angular Calendar Component

Question

I'm using Ionic 5 & Angular 10 for my Project.

I'm looking for any component that can help me to make calendar like this.

Thank you!!

Answer 1

I would recommend ion-datetime and try to customize it. I am not sure if you will be able to make it look exactly like in the picture, but I still think it is the best solution.

Answer 2

calendars and ionic doesn't like eachother that much, so i would suggest you creating a completly new one using a ionic page.

If you want to use ion2-calendar plugin, https://www.npmjs.com/package/ion2-calendar which I've used several times, there is a 'week-view' type of calendar.

I'd suggest you to follow this tutorial: https://devdactic.com/ionic-5-calendar-modal/ and when you get to the calendar- options definition, change 'month' to 'week':

calendar = {
   mode: 'week',
   currentDate: new Date(),
};

 selectedDate: Date;

@ViewChild(CalendarComponent) myCal: CalendarComponent;

constructor(
    private alertCtrl: AlertController,
    @Inject(LOCALE_ID) private locale: string,
    private modalCtrl: ModalController
  ) {}

Answer 3

please use this one, I think this is the same as you want.

https://github.com/hsuanxyz/ion2-calendar

thanks.