Organize Your Time: Showcasing Interactive Monthly, Weekly, and Daily Calendars with Ionic Calendar Library (Part 15) in Your Angular-15 Ionic-7 App
Welcome back to our ongoing series on building a multiplatform application with Angular-15 and Ionic-7! In our previous articles, we have explored various aspects of app development, from authentication to data management and task organization. Today, in Part 15, we are excited to dive into the world of calendars by incorporating an interactive monthly, weekly, and daily calendar into our app using the Ionic Calendar library.
Calendars play a vital role in many applications, helping users stay organized, manage schedules, and track important events. By integrating the Ionic Calendar library, we can seamlessly display a visually appealing and interactive calendar within our Angular-15 Ionic-7 app, allowing users to navigate through different views, view event details, and interact with their schedules effortlessly.
In this installment, we will guide you through the process of integrating the Ionic Calendar library into our app to display a monthly, weekly, and daily calendar. We'll start by installing and configuring the Ionic Calendar library within our project, ensuring that we have the necessary dependencies and styles in place.
We'll then explore the various calendar views, including the monthly view for an overview of events, the weekly view for a detailed look at the week ahead, and the daily view for a closer examination of individual days. Additionally, we'll demonstrate how to add and manage events within the calendar, enabling users to create, update, and delete events seamlessly.
Throughout this tutorial, we'll emphasize best practices for calendar design, event handling, and user interaction. By the end of this article, you'll have a solid understanding of how to leverage the Ionic Calendar library to create an interactive and feature-rich calendar experience in your Angular-15 Ionic-7 app.
Tutorial
The schedule feature will allow students to view their calendars within the application. I will use an external npm package and its documentation called Ionic Calendar from:
First I will install the package from using the command: npm i ionic2-calendar and then I will use the documentation to create the logic for the calendar component in the Diary page under the schedule tab. But first I will import the modules in main.ts file in the following way:
...
import { NgChartsModule, BaseChartDirective } from 'ng2-charts';
if (environment.production) {
enableProdMode();
}
bootstrapApplication(AppComponent, {
providers: [
AuthGuard,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
importProvidersFrom(
...
NgChartsModule.forRoot(),
BaseChartDirective,
...
),
provideRouter(routes),
],
});
Now I will write the logic in diary.page.ts in the following way:
...
import { NgCalendarModule } from 'ionic2-calendar';
import { CalendarMode } from 'ionic2-calendar/calendar.interface';
import { Step } from 'ionic2-calendar/calendar.interface';
@Component({
selector: 'app-diary',
templateUrl: './diary.page.html',
styleUrls: ['./diary.page.scss'],
standalone: true,
imports: [IonicModule,CommonModule,FormsModule,RouterLink,NgCalendarModule],
})
export class DiaryPage implements OnInit {
selectTabs: string = 'notes'; // set the default tab
//for ionic calendar
eventSource: any = [];
viewTitle!: string
isToday!: boolean;
constructor(...) {...}
ngOnInit() {}
// ------------------CALENDAR------------------
calendar = {
// set the calendar properties
mode: 'month' as CalendarMode, // set the calendar mode
currentDate: new Date(), // set the current date
step: 30 as Step,
};
onViewTitleChanged(title: any) {
this.viewTitle = title;
}
changeMode(mode: any) {
this.calendar.mode = mode;
}
today() {
this.calendar.currentDate = new Date();
}
onTimeSelected(ev: any) {
console.log(
'Selected time: ' +
ev.selectedTime +
', hasEvents: ' +
(ev.events !== undefined && ev.events.length !== 0) +
', disabled: ' +
ev.disabled
);
}
onCurrentDateChanged(event: Date) {
var today = new Date();
today.setHours(0, 0, 0, 0);
event.setHours(0, 0, 0, 0);
this.isToday = today.getTime() === event.getTime();
}
onRangeChanged(ev: any) {
console.log(
'range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime
);
}
markDisabled = (date: Date) => {
var current = new Date();
current.setHours(0, 0, 0);
return date < current;
};
}
The above code is simply referred from the library’s official documentation. The code sets up a calendar with properties such as mode, currentDate, step, and eventSource.
The calendar object is defined with properties such as mode, currentDate, and step. The onViewTitleChanged function sets the viewTitle property when the view title changes. The changeMode function sets the mode property of the calendar. The today function sets the currentDate property of the calendar to the current date.
The onTimeSelected function logs information about the selected time and whether there are any events or if it is disabled. The onCurrentDateChanged function is called when the current date changes and sets the isToday property based on whether the current date is the same as the event date. The onRangeChanged function logs the start and end times of a range change event.
The markDisabled function is a anonymous function that takes a date and returns a Boolean value. It checks if the provided date is before the current date, and if it is, the function returns true.
Next, I will write the template to display the calendar under different Monthly, Weekly, and Daily views in diary.page.html file in the following way:
<ion-header [translucent]="false">
<ion-toolbar>
<ion-title>My Diary</ion-title>
<ion-buttons slot="start">
<ion-button routerLink="/tabs/notifications">
<ion-icon slot="icon-only" name="notifications-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-menu-button menu="main-menu"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">My Diary</ion-title>
</ion-toolbar>
</ion-header>
<!-- Added segments from ionic framework to segment the page into three separate pages all accessible via a segment nav on top -->
<ion-segment [(ngModel)]="selectTabs">
<!-- ngModel is used to bind the value of the segment to the selectTabs variable -->
<ion-segment-button value="schedule">
<ion-label>Schedule</ion-label>
<ion-icon name="calendar-outline"></ion-icon>
</ion-segment-button>
<ion-segment-button value="tasks">
<ion-label>Tasks</ion-label>
<ion-icon name="checkbox-outline"></ion-icon>
</ion-segment-button>
<ion-segment-button value="notes">
<ion-label>Notes</ion-label>
<ion-icon name="document-text-outline"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Added ngIf below to display data specific to the selected segment -->
<ion-content class="ion-padding-top" *ngIf="selectTabs === 'schedule'">
<ion-segment [(ngModel)]="calendar.mode">
<ion-segment-button value="month">
<ion-label>Month</ion-label>
</ion-segment-button>
<ion-segment-button value="week">
<ion-label>Week</ion-label>
</ion-segment-button>
<ion-segment-button value="day">
<ion-label>Day</ion-label>
</ion-segment-button>
</ion-segment>
<ion-list-header class="ion-padding">
<ion-label>{{viewTitle}}</ion-label>
<ion-button [disabled]="isToday" (click)="today()">Today</ion-button>
</ion-list-header>
<ion-content>
<calendar
[eventSource]="eventSource"
[step]="calendar.step"
noEventsLabel="No Event Today"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
>
</calendar>
</ion-content>
</ion-content>
<ion-fab slot="fixed" vertical="bottom" horizontal="end">
...
</ion-fab>
</ion-content>
The above template code displays a calendar with three segments (Month, Week, and Day) and shows different data based on which segment is selected. Inside the ion-content element, there is an ion-segment element that contains three ion-segment-button elements. Each button has a value attribute that corresponds to the calendar.mode property, which is bound to the selected segment using the [(ngModel)] directive. Below the segment buttons, there is an ion-list-header element that displays the current view title (set by the onViewTitleChanged event handler) and a button that allows the user to go back to today's date (set by the today method).
Inside the ion-content element, there is the primary calendar component that displays the events in the calendar. The component receives various inputs, including eventSource, calendarMode, and currentDate, and emits various output events, such as onCurrentDateChanged and onEventSelected.
And this is the basic setup to get the dynamic calendar views to show up in the application which is demonstrated in Figures 63, 64 and 65 below:
_39.png) |
Figure 63: Month View |
_40.png) |
Figure 64: Week View |
_41.png) |
Figure 65: Day View |
Conclusion:
In this fifteenth installment of our series on building a multiplatform application with Angular-15 and Ionic-7, we explored the integration of the Ionic Calendar library to display an interactive monthly, weekly, and daily calendar within our app. By leveraging this powerful library, we created a visually appealing and user-friendly calendar experience that allows users to effortlessly manage their schedules and events.
Calendars are essential tools in many applications, aiding users in organizing their time, scheduling appointments, and tracking important events. By incorporating the Ionic Calendar library into our Angular-15 Ionic-7 app, we provided users with a seamless and intuitive calendar interface that enhances their productivity and helps them stay organized.
Throughout this tutorial, we walked you through the process of installing and configuring the Ionic Calendar library within our project. We explored the various calendar views, including the monthly, weekly, and daily views, which provide users with different perspectives on their schedules.
We also covered event management within the calendar, demonstrating how to add, update, and delete events seamlessly. This functionality empowers users to create new events, modify event details, and remove unwanted events, offering a comprehensive solution for schedule management.
By following best practices for calendar design, event handling, and user interaction, we ensured a visually appealing and user-friendly calendar experience. Additionally, we encouraged you to explore additional features and customization options provided by the Ionic Calendar library to tailor the calendar to your specific app requirements.
We hope this tutorial has provided you with valuable insights and practical knowledge on integrating the Ionic Calendar library into your Angular-15 Ionic-7 app. By embracing the power of this library, you can create an app that offers an interactive and feature-rich calendar experience for your users.
Thank you for joining us on this journey as we explored the fascinating world of app development with Angular-15, Ionic-7, and the Ionic Calendar library. Stay tuned for future installments where we will continue to explore new features and functionalities to enhance our app even further.
Happy coding!