Ionic Angular Calendar Component

Issue

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!!

Solution

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
  ) {}

EDIT: As I was searching for new plugins or components for a calendar I found this: https://openbase.com/categories/js/best-angular-calendar-libraries

There are several Calendar options to choose, but I've finally deleted ionic2-calendar and go ahead with angular-calendar.

Answered By - jlovera3