├── src
    ├── app
    │   ├── app.component.scss
    │   ├── app.component.html
    │   ├── pages
    │   │   ├── event-modal
    │   │   │   ├── event-modal.page.scss
    │   │   │   ├── event-modal.page.spec.ts
    │   │   │   ├── event-modal.page.html
    │   │   │   └── event-modal.page.ts
    │   │   └── calendar
    │   │   │   ├── calendar.page.scss
    │   │   │   ├── calendar.page.spec.ts
    │   │   │   ├── calendar.page.html
    │   │   │   └── calendar.page.ts
    │   ├── models
    │   │   └── calendar-event.model.ts
    │   ├── app.component.ts
    │   ├── home
    │   │   ├── home.page.ts
    │   │   ├── home.page.scss
    │   │   ├── home.page.spec.ts
    │   │   └── home.page.html
    │   ├── app.component.spec.ts
    │   └── app.routes.ts
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── assets
    │   ├── icon
    │   │   └── favicon.png
    │   └── shapes.svg
    ├── zone-flags.ts
    ├── theme
    │   └── variables.scss
    ├── test.ts
    ├── main.ts
    ├── index.html
    ├── global.scss
    └── polyfills.ts
├── ionic.config.json
├── README.md
├── capacitor.config.ts
├── tsconfig.app.json
├── tsconfig.spec.json
├── .editorconfig
├── .gitignore
├── tsconfig.json
├── LICENSE
├── karma.conf.js
├── package.json
└── angular.json


/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <ion-app>
2 |   <ion-router-outlet></ion-router-outlet>
3 | </ion-app>
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/didinj/ionic3-angular5-calendar-ui-event/HEAD/src/assets/icon/favicon.png


--------------------------------------------------------------------------------
/src/app/pages/event-modal/event-modal.page.scss:
--------------------------------------------------------------------------------
1 | ion-item {
2 |   margin-bottom: 10px;
3 | }
4 | 
5 | ion-textarea {
6 |   resize: none;
7 | }
8 | 


--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "ionic8-calendar",
3 |   "integrations": {
4 |     "capacitor": {}
5 |   },
6 |   "type": "angular-standalone"
7 | }
8 | 


--------------------------------------------------------------------------------
/src/app/models/calendar-event.model.ts:
--------------------------------------------------------------------------------
1 | export interface CalendarEvent {
2 |   title: string;
3 |   desc?: string;
4 |   startTime: Date;
5 |   endTime: Date;
6 |   allDay: boolean;
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Build Ionic 8 and Angular 20 Calendar UI with Event Integration
2 | 
3 | Read the full tutorial [here](https://www.djamware.com/post/5a0bb8f780aca75eadc12d6b/build-ionic-8-and-angular-20-calendar-ui-with-event-integration).
4 | 


--------------------------------------------------------------------------------
/src/zone-flags.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * Prevents Angular change detection from
3 |  * running with certain Web Component callbacks
4 |  */
5 | // eslint-disable-next-line no-underscore-dangle
6 | (window as any).__Zone_disable_customElements = true;
7 | 


--------------------------------------------------------------------------------
/capacitor.config.ts:
--------------------------------------------------------------------------------
 1 | import type { CapacitorConfig } from '@capacitor/cli';
 2 | 
 3 | const config: CapacitorConfig = {
 4 |   appId: 'io.ionic.starter',
 5 |   appName: 'ionic8-calendar',
 6 |   webDir: 'www'
 7 | };
 8 | 
 9 | export default config;
10 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 3 | 
 4 | @Component({
 5 |   selector: 'app-root',
 6 |   templateUrl: 'app.component.html',
 7 |   imports: [IonApp, IonRouterOutlet],
 8 | })
 9 | export class AppComponent {
10 |   constructor() {}
11 | }
12 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
 1 | // For information on how to create your own theme, please see:
 2 | // http://ionicframework.com/docs/theming/
 3 | :root {
 4 |   --calendar-bg: var(--ion-color-light);
 5 |   --calendar-text: var(--ion-color-dark);
 6 | }
 7 | 
 8 | @media (prefers-color-scheme: dark) {
 9 |   :root {
10 |     --calendar-bg: #1e1e1e;
11 |     --calendar-text: #f5f5f5;
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 3 | 
 4 | @Component({
 5 |   selector: 'app-home',
 6 |   templateUrl: 'home.page.html',
 7 |   styleUrls: ['home.page.scss'],
 8 |   imports: [IonHeader, IonToolbar, IonTitle, IonContent],
 9 | })
10 | export class HomePage {
11 |   constructor() {}
12 | }
13 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
 2 | # editorconfig.org
 3 | 
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 2
 9 | 
10 | # We recommend you to keep these unchanged
11 | end_of_line = lf
12 | charset = utf-8
13 | trim_trailing_whitespace = true
14 | insert_final_newline = true
15 | 
16 | [*.md]
17 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/src/app/home/home.page.scss:
--------------------------------------------------------------------------------
 1 | #container {
 2 |   text-align: center;
 3 | 
 4 |   position: absolute;
 5 |   left: 0;
 6 |   right: 0;
 7 |   top: 50%;
 8 |   transform: translateY(-50%);
 9 | }
10 | 
11 | #container strong {
12 |   font-size: 20px;
13 |   line-height: 26px;
14 | }
15 | 
16 | #container p {
17 |   font-size: 16px;
18 |   line-height: 22px;
19 | 
20 |   color: #8c8c8c;
21 | 
22 |   margin: 0;
23 | }
24 | 
25 | #container a {
26 |   text-decoration: none;
27 | }


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | // First, initialize the Angular testing environment.
11 | getTestBed().initTestEnvironment(
12 |   BrowserDynamicTestingModule,
13 |   platformBrowserDynamicTesting(),
14 | );
15 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HomePage } from './home.page';
 4 | 
 5 | describe('HomePage', () => {
 6 |   let component: HomePage;
 7 |   let fixture: ComponentFixture<HomePage>;
 8 | 
 9 |   beforeEach(async () => {
10 |     fixture = TestBed.createComponent(HomePage);
11 |     component = fixture.componentInstance;
12 |     fixture.detectChanges();
13 |   });
14 | 
15 |   it('should create', () => {
16 |     expect(component).toBeTruthy();
17 |   });
18 | });
19 | 


--------------------------------------------------------------------------------
/src/app/pages/calendar/calendar.page.scss:
--------------------------------------------------------------------------------
 1 | .calendar-container {
 2 |   padding: 8px;
 3 |   background: var(--ion-background-color);
 4 |   height: 100%;
 5 | }
 6 | 
 7 | calendar {
 8 |   border-radius: 12px;
 9 |   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
10 |   background: var(--ion-color-light);
11 |   overflow: hidden;
12 | }
13 | 
14 | ion-fab-button {
15 |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
16 |   border-radius: 50%;
17 | }
18 | 
19 | ion-fab-button:hover {
20 |   transform: scale(1.05);
21 |   transition: transform 0.2s ease-in-out;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app/pages/calendar/calendar.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | import { CalendarPage } from './calendar.page';
 3 | 
 4 | describe('CalendarPage', () => {
 5 |   let component: CalendarPage;
 6 |   let fixture: ComponentFixture<CalendarPage>;
 7 | 
 8 |   beforeEach(() => {
 9 |     fixture = TestBed.createComponent(CalendarPage);
10 |     component = fixture.componentInstance;
11 |     fixture.detectChanges();
12 |   });
13 | 
14 |   it('should create', () => {
15 |     expect(component).toBeTruthy();
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/src/app/pages/event-modal/event-modal.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | import { EventModalPage } from './event-modal.page';
 3 | 
 4 | describe('EventModalPage', () => {
 5 |   let component: EventModalPage;
 6 |   let fixture: ComponentFixture<EventModalPage>;
 7 | 
 8 |   beforeEach(() => {
 9 |     fixture = TestBed.createComponent(EventModalPage);
10 |     component = fixture.componentInstance;
11 |     fixture.detectChanges();
12 |   });
13 | 
14 |   it('should create', () => {
15 |     expect(component).toBeTruthy();
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { provideRouter } from '@angular/router';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   it('should create the app', async () => {
 7 |     await TestBed.configureTestingModule({
 8 |       imports: [AppComponent],
 9 |       providers: [provideRouter([])]
10 |     }).compileComponents();
11 |     
12 |     const fixture = TestBed.createComponent(AppComponent);
13 |     const app = fixture.componentInstance;
14 |     expect(app).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Specifies intentionally untracked files to ignore when using Git
 2 | # http://git-scm.com/docs/gitignore
 3 | 
 4 | *~
 5 | *.sw[mnpcod]
 6 | *.log
 7 | *.tmp
 8 | *.tmp.*
 9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | .vscode/
13 | npm-debug.log*
14 | 
15 | .idea/
16 | .sourcemaps/
17 | .sass-cache/
18 | .tmp/
19 | .versions/
20 | coverage/
21 | dist/
22 | node_modules/
23 | tmp/
24 | temp/
25 | hooks/
26 | platforms/
27 | plugins/
28 | plugins/android.json
29 | plugins/ios.json
30 | www/
31 | $RECYCLE.BIN/
32 | 
33 | .DS_Store
34 | Thumbs.db
35 | UserInterfaceState.xcuserstate
36 | 


--------------------------------------------------------------------------------
/src/app/app.routes.ts:
--------------------------------------------------------------------------------
 1 | import { Routes } from '@angular/router';
 2 | 
 3 | export const routes: Routes = [
 4 |   {
 5 |     path: 'home',
 6 |     loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
 7 |   },
 8 |   {
 9 |     path: '',
10 |     redirectTo: 'calendar',
11 |     pathMatch: 'full',
12 |   },
13 |   {
14 |     path: 'calendar',
15 |     loadComponent: () => import('./pages/calendar/calendar.page').then(m => m.CalendarPage)
16 |   },
17 |   {
18 |     path: 'event-modal',
19 |     loadComponent: () => import('./pages/event-modal/event-modal.page').then(m => m.EventModalPage)
20 |   },
21 | ];
22 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.html:
--------------------------------------------------------------------------------
 1 | <ion-header [translucent]="true">
 2 |   <ion-toolbar>
 3 |     <ion-title>
 4 |       Blank
 5 |     </ion-title>
 6 |   </ion-toolbar>
 7 | </ion-header>
 8 | 
 9 | <ion-content [fullscreen]="true">
10 |   <ion-header collapse="condense">
11 |     <ion-toolbar>
12 |       <ion-title size="large">Blank</ion-title>
13 |     </ion-toolbar>
14 |   </ion-header>
15 | 
16 |   <div id="container">
17 |     <strong>Ready to create an app?</strong>
18 |     <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
19 |   </div>
20 | </ion-content>
21 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { bootstrapApplication } from '@angular/platform-browser';
 2 | import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
 3 | import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
 4 | 
 5 | import { routes } from './app/app.routes';
 6 | import { AppComponent } from './app/app.component';
 7 | import { importProvidersFrom } from '@angular/core';
 8 | import { NgCalendarModule } from 'ionic2-calendar';
 9 | 
10 | bootstrapApplication(AppComponent, {
11 |   providers: [
12 |     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
13 |     provideIonicAngular(),
14 |     provideRouter(routes, withPreloading(PreloadAllModules)),
15 |     importProvidersFrom(NgCalendarModule)
16 |   ],
17 | });
18 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <title>Ionic App</title>
 7 | 
 8 |   <base href="/" />
 9 | 
10 |   <meta name="color-scheme" content="light dark" />
11 |   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
12 |   <meta name="format-detection" content="telephone=no" />
13 |   <meta name="msapplication-tap-highlight" content="no" />
14 | 
15 |   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
16 | 
17 |   <!-- add to homescreen for ios -->
18 |   <meta name="mobile-web-app-capable" content="yes" />
19 |   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
20 | </head>
21 | 
22 | <body>
23 |   <app-root></app-root>
24 | </body>
25 | 
26 | </html>
27 | 


--------------------------------------------------------------------------------
/src/app/pages/calendar/calendar.page.html:
--------------------------------------------------------------------------------
 1 | <ion-header translucent="true">
 2 |   <ion-toolbar color="primary">
 3 |     <ion-title>{{ viewTitle }}</ion-title>
 4 |   </ion-toolbar>
 5 | </ion-header>
 6 | 
 7 | <ion-content [fullscreen]="true">
 8 |   <div class="calendar-container">
 9 |     <calendar
10 |       [eventSource]="eventSource"
11 |       [calendarMode]="calendar.mode"
12 |       [currentDate]="calendar.currentDate"
13 |       (onEventSelected)="onEventSelected($event)"
14 |       (onViewTitleChanged)="onViewTitleChanged($any($event))"
15 |       (onTimeSelected)="onTimeSelected($event)"
16 |     >
17 |     </calendar>
18 |   </div>
19 | 
20 |   <ion-fab slot="fixed" vertical="bottom" horizontal="end">
21 |     <ion-fab-button color="success" (click)="addEvent()">
22 |       <ion-icon name="add-outline"></ion-icon>
23 |     </ion-fab-button>
24 |   </ion-fab>
25 | </ion-content>
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "esModuleInterop": true,
 9 |     "strict": true,
10 |     "noImplicitOverride": true,
11 |     "noPropertyAccessFromIndexSignature": true,
12 |     "noImplicitReturns": true,
13 |     "noFallthroughCasesInSwitch": true,
14 |     "sourceMap": true,
15 |     "declaration": false,
16 |     "experimentalDecorators": true,
17 |     "moduleResolution": "node",
18 |     "importHelpers": true,
19 |     "target": "es2022",
20 |     "module": "es2020",
21 |     "lib": ["es2018", "dom"],
22 |     "useDefineForClassFields": false
23 |   },
24 |   "angularCompilerOptions": {
25 |     "enableI18nLegacyMessageIdFormat": false,
26 |     "strictInjectionParameters": true,
27 |     "strictInputAccessModifiers": true,
28 |     "strictTemplates": true
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Didin Jamaludin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/assets/shapes.svg:
--------------------------------------------------------------------------------
1 | <svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/src/global.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * App Global CSS
 3 |  * ----------------------------------------------------------------------------
 4 |  * Put style rules here that you want to apply globally. These styles are for
 5 |  * the entire app and not just one component. Additionally, this file can be
 6 |  * used as an entry point to import other CSS/Sass files to be included in the
 7 |  * output CSS.
 8 |  * For more information on global stylesheets, visit the documentation:
 9 |  * https://ionicframework.com/docs/layout/global-stylesheets
10 |  */
11 | 
12 | /* Core CSS required for Ionic components to work properly */
13 | @import "@ionic/angular/css/core.css";
14 | 
15 | /* Basic CSS for apps built with Ionic */
16 | @import "@ionic/angular/css/normalize.css";
17 | @import "@ionic/angular/css/structure.css";
18 | @import "@ionic/angular/css/typography.css";
19 | @import "@ionic/angular/css/display.css";
20 | 
21 | /* Optional CSS utils that can be commented out */
22 | @import "@ionic/angular/css/padding.css";
23 | @import "@ionic/angular/css/float-elements.css";
24 | @import "@ionic/angular/css/text-alignment.css";
25 | @import "@ionic/angular/css/text-transformation.css";
26 | @import "@ionic/angular/css/flex-utils.css";
27 | 
28 | /**
29 |  * Ionic Dark Mode
30 |  * -----------------------------------------------------
31 |  * For more info, please see:
32 |  * https://ionicframework.com/docs/theming/dark-mode
33 |  */
34 | 
35 | /* @import "@ionic/angular/css/palettes/dark.always.css"; */
36 | /* @import "@ionic/angular/css/palettes/dark.class.css"; */
37 | @import '@ionic/angular/css/palettes/dark.system.css';
38 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       jasmine: {
17 |         // you can add configuration options for Jasmine here
18 |         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 |         // for example, you can disable the random execution with `random: false`
20 |         // or set a specific seed with `seed: 4321`
21 |       },
22 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
23 |     },
24 |     jasmineHtmlReporter: {
25 |       suppressAll: true // removes the duplicated traces
26 |     },
27 |     coverageReporter: {
28 |       dir: require('path').join(__dirname, './coverage/app'),
29 |       subdir: '.',
30 |       reporters: [
31 |         { type: 'html' },
32 |         { type: 'text-summary' }
33 |       ]
34 |     },
35 |     reporters: ['progress', 'kjhtml'],
36 |     port: 9876,
37 |     colors: true,
38 |     logLevel: config.LOG_INFO,
39 |     autoWatch: true,
40 |     browsers: ['Chrome'],
41 |     singleRun: false,
42 |     restartOnFileChange: true
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/src/app/pages/event-modal/event-modal.page.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |   <ion-toolbar color="primary">
 3 |     <ion-title>Add Event</ion-title>
 4 |     <ion-buttons slot="end">
 5 |       <ion-button (click)="dismiss()">Close</ion-button>
 6 |     </ion-buttons>
 7 |   </ion-toolbar>
 8 | </ion-header>
 9 | 
10 | <ion-content class="ion-padding">
11 |   <form [formGroup]="eventForm" (ngSubmit)="saveEvent()">
12 |     <ion-item>
13 |       <ion-label position="stacked">Event Title</ion-label>
14 |       <ion-input
15 |         formControlName="title"
16 |         placeholder="Enter event title"
17 |       ></ion-input>
18 |     </ion-item>
19 | 
20 |     <ion-item>
21 |       <ion-label position="stacked">Start Time</ion-label>
22 |       <ion-datetime
23 |         presentation="date-time"
24 |         formControlName="startTime"
25 |         [min]="minDate"
26 |       >
27 |       </ion-datetime>
28 |     </ion-item>
29 | 
30 |     <ion-item>
31 |       <ion-label position="stacked">End Time</ion-label>
32 |       <ion-datetime
33 |         presentation="date-time"
34 |         formControlName="endTime"
35 |         [min]="minDate"
36 |       >
37 |       </ion-datetime>
38 |     </ion-item>
39 | 
40 |     <ion-item>
41 |       <ion-label position="stacked">Description</ion-label>
42 |       <ion-textarea
43 |         rows="3"
44 |         placeholder="Optional event description"
45 |         formControlName="desc"
46 |       >
47 |       </ion-textarea>
48 |     </ion-item>
49 | 
50 |     <ion-button
51 |       expand="block"
52 |       color="primary"
53 |       class="ion-margin-top"
54 |       type="submit"
55 |       [disabled]="eventForm.invalid"
56 |     >
57 |       Save Event
58 |     </ion-button>
59 |   </form>
60 | </ion-content>
61 | 


--------------------------------------------------------------------------------
/src/app/pages/event-modal/event-modal.page.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnInit } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 4 | import { ModalController } from '@ionic/angular/standalone';
 5 | import { IonicModule } from '@ionic/angular';
 6 | import dayjs from 'dayjs';
 7 | 
 8 | @Component({
 9 |   selector: 'app-event-modal',
10 |   templateUrl: './event-modal.page.html',
11 |   styleUrls: ['./event-modal.page.scss'],
12 |   imports: [CommonModule, IonicModule, ReactiveFormsModule]
13 | })
14 | export class EventModalPage {
15 |   @Input() selectedDate!: Date;
16 | 
17 |   eventForm!: FormGroup;
18 |   minDate = new Date().toISOString();
19 |   isEdit: boolean = false;
20 |   event: any;
21 | 
22 |   constructor(
23 |     private modalCtrl: ModalController,
24 |     private fb: FormBuilder
25 |   ) { }
26 | 
27 |   ngOnInit() {
28 |     this.eventForm = this.fb.group({
29 |       title: ['', Validators.required],
30 |       startTime: [this.selectedDate.toISOString(), Validators.required],
31 |       endTime: [
32 |         dayjs(this.selectedDate).add(1, 'hour').toDate().toISOString(),
33 |         Validators.required,
34 |       ],
35 |       desc: ['']
36 |     });
37 | 
38 |     if (this.isEdit && this.event) {
39 |       this.eventForm.patchValue({
40 |         title: this.event.title,
41 |         desc: this.event.desc,
42 |         startTime: this.event.startTime,
43 |         endTime: this.event.endTime,
44 |         allDay: this.event.allDay
45 |       });
46 |     }
47 |   }
48 | 
49 |   dismiss() {
50 |     this.modalCtrl.dismiss();
51 |   }
52 | 
53 |   saveEvent() {
54 |     const newEvent = {
55 |       title: this.eventForm.value.title,
56 |       desc: this.eventForm.value.desc,
57 |       startTime: new Date(this.eventForm.value.startTime),
58 |       endTime: new Date(this.eventForm.value.endTime),
59 |       allDay: this.eventForm.value.allDay,
60 |       color: this.eventForm.value.allDay ? '#10dc60' : '#3880ff' // green or blue
61 |     };
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic8-calendar",
 3 |   "version": "0.0.1",
 4 |   "author": "Ionic Framework",
 5 |   "homepage": "https://ionicframework.com/",
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "build": "ng build",
10 |     "watch": "ng build --watch --configuration development",
11 |     "test": "ng test",
12 |     "lint": "ng lint"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/animations": "^20.0.0",
17 |     "@angular/common": "^20.0.0",
18 |     "@angular/compiler": "^20.0.0",
19 |     "@angular/core": "^20.0.0",
20 |     "@angular/forms": "^20.0.0",
21 |     "@angular/platform-browser": "^20.0.0",
22 |     "@angular/platform-browser-dynamic": "^20.0.0",
23 |     "@angular/router": "^20.0.0",
24 |     "@capacitor/app": "7.1.0",
25 |     "@capacitor/core": "7.4.3",
26 |     "@capacitor/haptics": "7.0.2",
27 |     "@capacitor/keyboard": "7.0.3",
28 |     "@capacitor/status-bar": "7.0.3",
29 |     "@ionic/angular": "^8.0.0",
30 |     "dayjs": "^1.11.18",
31 |     "ionic2-calendar": "^2.7.0",
32 |     "ionicons": "^7.0.0",
33 |     "rxjs": "~7.8.0",
34 |     "tslib": "^2.3.0",
35 |     "zone.js": "~0.15.0"
36 |   },
37 |   "devDependencies": {
38 |     "@angular-devkit/build-angular": "^20.0.0",
39 |     "@angular-eslint/builder": "^20.0.0",
40 |     "@angular-eslint/eslint-plugin": "^20.0.0",
41 |     "@angular-eslint/eslint-plugin-template": "^20.0.0",
42 |     "@angular-eslint/schematics": "^20.0.0",
43 |     "@angular-eslint/template-parser": "^20.0.0",
44 |     "@angular/cli": "^20.0.0",
45 |     "@angular/compiler-cli": "^20.0.0",
46 |     "@angular/language-service": "^20.0.0",
47 |     "@capacitor/cli": "7.4.3",
48 |     "@ionic/angular-toolkit": "^12.0.0",
49 |     "@types/jasmine": "~5.1.0",
50 |     "@typescript-eslint/eslint-plugin": "^8.18.0",
51 |     "@typescript-eslint/parser": "^8.18.0",
52 |     "eslint": "^9.16.0",
53 |     "eslint-plugin-import": "^2.29.1",
54 |     "eslint-plugin-jsdoc": "^48.2.1",
55 |     "eslint-plugin-prefer-arrow": "1.2.2",
56 |     "jasmine-core": "~5.1.0",
57 |     "jasmine-spec-reporter": "~5.0.0",
58 |     "karma": "~6.4.0",
59 |     "karma-chrome-launcher": "~3.2.0",
60 |     "karma-coverage": "~2.2.0",
61 |     "karma-jasmine": "~5.1.0",
62 |     "karma-jasmine-html-reporter": "~2.1.0",
63 |     "typescript": "~5.8.0"
64 |   },
65 |   "description": "An Ionic project"
66 | }
67 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes recent versions of Safari, Chrome (including
12 |  * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /**
22 |  * By default, zone.js will patch all possible macroTask and DomEvents
23 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
24 |  * because those flags need to be set before `zone.js` being loaded, and webpack
25 |  * will put import in the top of bundle, so user need to create a separate file
26 |  * in this directory (for example: zone-flags.ts), and put the following flags
27 |  * into that file, and then add the following code before importing zone.js.
28 |  * import './zone-flags';
29 |  *
30 |  * The flags allowed in zone-flags.ts are listed here.
31 |  *
32 |  * The following flags will work for all browsers.
33 |  *
34 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 |  *
38 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
40 |  *
41 |  *  (window as any).__Zone_enable_cross_context_check = true;
42 |  *
43 |  */
44 | 
45 | import './zone-flags';
46 | 
47 | /***************************************************************************************************
48 |  * Zone JS is required by default for Angular itself.
49 |  */
50 | import 'zone.js';  // Included with Angular CLI.
51 | 
52 | 
53 | /***************************************************************************************************
54 |  * APPLICATION IMPORTS
55 |  */
56 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "app": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@ionic/angular-toolkit:page": {
 10 |           "styleext": "scss",
 11 |           "standalone": true
 12 |         }
 13 |       },
 14 |       "root": "",
 15 |       "sourceRoot": "src",
 16 |       "prefix": "app",
 17 |       "architect": {
 18 |         "build": {
 19 |           "builder": "@angular-devkit/build-angular:application",
 20 |           "options": {
 21 |             "outputPath": {
 22 |               "base": "www",
 23 |               "browser": ""
 24 |             },
 25 |             "index": "src/index.html",
 26 |             "polyfills": [
 27 |               "src/polyfills.ts"
 28 |             ],
 29 |             "tsConfig": "tsconfig.app.json",
 30 |             "inlineStyleLanguage": "scss",
 31 |             "assets": [
 32 |               {
 33 |                 "glob": "**/*",
 34 |                 "input": "src/assets",
 35 |                 "output": "assets"
 36 |               }
 37 |             ],
 38 |             "styles": ["src/global.scss", "src/theme/variables.scss"],
 39 |             "scripts": [],
 40 |             "browser": "src/main.ts"
 41 |           },
 42 |           "configurations": {
 43 |             "production": {
 44 |               "budgets": [
 45 |                 {
 46 |                   "type": "initial",
 47 |                   "maximumWarning": "2mb",
 48 |                   "maximumError": "5mb"
 49 |                 },
 50 |                 {
 51 |                   "type": "anyComponentStyle",
 52 |                   "maximumWarning": "2kb",
 53 |                   "maximumError": "4kb"
 54 |                 }
 55 |               ],
 56 |               "fileReplacements": [
 57 |                 {
 58 |                   "replace": "src/environments/environment.ts",
 59 |                   "with": "src/environments/environment.prod.ts"
 60 |                 }
 61 |               ],
 62 |               "outputHashing": "all"
 63 |             },
 64 |             "development": {
 65 |               "optimization": false,
 66 |               "extractLicenses": false,
 67 |               "sourceMap": true,
 68 |               "namedChunks": true
 69 |             },
 70 |             "ci": {
 71 |               "progress": false
 72 |             }
 73 |           },
 74 |           "defaultConfiguration": "production"
 75 |         },
 76 |         "serve": {
 77 |           "builder": "@angular-devkit/build-angular:dev-server",
 78 |           "configurations": {
 79 |             "production": {
 80 |               "buildTarget": "app:build:production"
 81 |             },
 82 |             "development": {
 83 |               "buildTarget": "app:build:development"
 84 |             },
 85 |             "ci": {
 86 |               "progress": false
 87 |             }
 88 |           },
 89 |           "defaultConfiguration": "development"
 90 |         },
 91 |         "extract-i18n": {
 92 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 93 |           "options": {
 94 |             "buildTarget": "app:build"
 95 |           }
 96 |         },
 97 |         "test": {
 98 |           "builder": "@angular-devkit/build-angular:karma",
 99 |           "options": {
100 |             "main": "src/test.ts",
101 |             "polyfills": "src/polyfills.ts",
102 |             "tsConfig": "tsconfig.spec.json",
103 |             "karmaConfig": "karma.conf.js",
104 |             "inlineStyleLanguage": "scss",
105 |             "assets": [
106 |               {
107 |                 "glob": "**/*",
108 |                 "input": "src/assets",
109 |                 "output": "assets"
110 |               }
111 |             ],
112 |             "styles": ["src/global.scss", "src/theme/variables.scss"],
113 |             "scripts": []
114 |           },
115 |           "configurations": {
116 |             "ci": {
117 |               "progress": false,
118 |               "watch": false
119 |             }
120 |           }
121 |         },
122 |         "lint": {
123 |           "builder": "@angular-eslint/builder:lint",
124 |           "options": {
125 |             "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
126 |           }
127 |         }
128 |       }
129 |     }
130 |   },
131 |   "cli": {
132 |     "schematicCollections": ["@ionic/angular-toolkit"]
133 |   },
134 |   "schematics": {
135 |     "@ionic/angular-toolkit:component": {
136 |       "styleext": "scss"
137 |     },
138 |     "@ionic/angular-toolkit:page": {
139 |       "styleext": "scss"
140 |     },
141 |     "@angular-eslint/schematics:application": {
142 |       "setParserOptionsProject": true
143 |     },
144 |     "@angular-eslint/schematics:library": {
145 |       "setParserOptionsProject": true
146 |     }
147 |   }
148 | }
149 | 


--------------------------------------------------------------------------------
/src/app/pages/calendar/calendar.page.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit, ViewChild } from '@angular/core';
  2 | import { CommonModule } from '@angular/common';
  3 | import { ModalController, AlertController } from '@ionic/angular';
  4 | import { FormsModule } from '@angular/forms';
  5 | import dayjs from 'dayjs';
  6 | import { EventModalPage } from '../event-modal/event-modal.page';
  7 | import { CalendarComponent, NgCalendarModule } from 'ionic2-calendar';
  8 | import { CalendarMode, Step } from 'ionic2-calendar';
  9 | import { IonContent, IonHeader, IonTitle, IonToolbar, IonSegmentButton, IonItem, IonButton, IonLabel, IonFab, IonFabButton, IonIcon } from '@ionic/angular/standalone';
 10 | import { add, addOutline } from 'ionicons/icons';
 11 | import { addIcons } from 'ionicons';
 12 | import { CalendarEvent } from 'src/app/models/calendar-event.model';
 13 | 
 14 | @Component({
 15 |   selector: 'app-calendar',
 16 |   templateUrl: './calendar.page.html',
 17 |   styleUrls: ['./calendar.page.scss'],
 18 |   standalone: true,
 19 |   imports: [NgCalendarModule, IonIcon, IonFabButton, IonFab, IonLabel, IonButton, IonItem, IonSegmentButton, IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
 20 | })
 21 | export class CalendarPage implements OnInit {
 22 |   @ViewChild(CalendarComponent) calendarComponent!: CalendarComponent;
 23 |   eventSource: any[] = [];
 24 |   calendar = {
 25 |     mode: 'month' as CalendarMode,
 26 |     currentDate: new Date()
 27 |   };
 28 |   selectedDate: Date = new Date();
 29 | 
 30 |   viewTitle = '';
 31 | 
 32 |   constructor(private modalCtrl: ModalController, private alertCtrl: AlertController) {
 33 |     addIcons({ addOutline, add });
 34 |   }
 35 | 
 36 |   ngOnInit() {
 37 |     this.loadEvents();
 38 |   }
 39 | 
 40 |   loadEvents() {
 41 |     const storedEvents = localStorage.getItem('events');
 42 |     if (storedEvents) {
 43 |       this.eventSource = JSON.parse(storedEvents);
 44 |     }
 45 |   }
 46 | 
 47 |   next() {
 48 |     const nextDate = dayjs(this.calendar.currentDate).add(1, this.calendar.mode as any);
 49 |     this.calendar.currentDate = nextDate.toDate();
 50 |   }
 51 | 
 52 |   back() {
 53 |     const prevDate = dayjs(this.calendar.currentDate).subtract(1, this.calendar.mode as any);
 54 |     this.calendar.currentDate = prevDate.toDate();
 55 |   }
 56 | 
 57 |   async addEvent() {
 58 |     const modal = await this.modalCtrl.create({
 59 |       component: EventModalPage,
 60 |       componentProps: { selectedDate: this.selectedDate, isEdit: false }
 61 |     });
 62 |     modal.onDidDismiss().then((result) => {
 63 |       if (result.data && result.data.event) {
 64 |         this.eventSource.push(result.data.event);
 65 |         localStorage.setItem('events', JSON.stringify(this.eventSource));
 66 |         this.calendarComponent.loadEvents();
 67 |       }
 68 |     });
 69 |     await modal.present();
 70 | 
 71 |     const { data } = await modal.onWillDismiss();
 72 |     if (data && data.event) {
 73 |       this.eventSource.push(data.event);
 74 |       this.eventSource = [...this.eventSource]; // refresh calendar
 75 |     }
 76 |   }
 77 | 
 78 |   async onEventSelected(event: CalendarEvent) {
 79 |     const alert = await this.alertCtrl.create({
 80 |       header: event.title,
 81 |       message: `
 82 |         <strong>Start:</strong> ${new Date(event.startTime).toLocaleString()}<br>
 83 |         <strong>End:</strong> ${new Date(event.endTime).toLocaleString()}<br>
 84 |         <strong>All Day:</strong> ${event.allDay ? 'Yes' : 'No'}
 85 |       `,
 86 |       buttons: [
 87 |         {
 88 |           text: 'Edit',
 89 |           handler: () => this.openEditEventModal(event)
 90 |         },
 91 |         {
 92 |           text: 'Delete',
 93 |           role: 'destructive',
 94 |           handler: () => this.deleteEvent(event)
 95 |         },
 96 |         { text: 'Close', role: 'cancel' }
 97 |       ]
 98 |     });
 99 |     await alert.present();
100 |   }
101 | 
102 |   onTimeSelected(event: any) {
103 |     this.selectedDate = event.selectedTime;
104 |   }
105 | 
106 |   async openEditEventModal(event: CalendarEvent) {
107 |     const modal = await this.modalCtrl.create({
108 |       component: EventModalPage,
109 |       componentProps: { isEdit: true, event }
110 |     });
111 |     modal.onDidDismiss().then((result) => {
112 |       if (result.data && result.data.event) {
113 |         const index = this.eventSource.findIndex(e => e.startTime === event.startTime && e.title === event.title);
114 |         if (index > -1) {
115 |           this.eventSource[index] = result.data.event;
116 |           localStorage.setItem('events', JSON.stringify(this.eventSource));
117 |           this.calendarComponent.loadEvents();
118 |         }
119 |       }
120 |     });
121 |     await modal.present();
122 |   }
123 | 
124 |   deleteEvent(event: CalendarEvent) {
125 |     this.eventSource = this.eventSource.filter(e => e !== event);
126 |     localStorage.setItem('events', JSON.stringify(this.eventSource));
127 |     this.calendarComponent.loadEvents();
128 |   }
129 | 
130 |   onViewTitleChanged(title: string) {
131 |     this.viewTitle = title;
132 |   }
133 | }
134 | 


--------------------------------------------------------------------------------