Bladeren bron

上传文件至 ''

0210329 8 maanden geleden
bovenliggende
commit
53b96f215d
5 gewijzigde bestanden met toevoegingen van 154 en 0 verwijderingen
  1. 27 0
      tab2.module.ts
  2. 44 0
      tab2.page.html
  3. 25 0
      tab2.page.scss
  4. 26 0
      tab2.page.spec.ts
  5. 32 0
      tab2.page.ts

+ 27 - 0
tab2.module.ts

@@ -0,0 +1,27 @@
+import { IonicModule } from '@ionic/angular';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Tab2Page } from './tab2.page';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { Tab2PageRoutingModule } from './tab2-routing.module';
+
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+    ExploreContainerComponentModule,
+    Tab2PageRoutingModule,
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory,
+    }),
+  ],
+  declarations: [Tab2Page]
+})
+export class Tab2PageModule {}

+ 44 - 0
tab2.page.html

@@ -0,0 +1,44 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>备忘录</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- 搜索框 -->
+  <ion-item>
+    <ion-label position="floating">搜索备忘录</ion-label>
+    <ion-input [(ngModel)]="searchQuery"></ion-input>
+  </ion-item>
+
+  <!-- 备忘录输入 -->
+  <ion-item>
+    <ion-label position="floating">备忘录内容</ion-label>
+    <ion-input [(ngModel)]="memoContent"></ion-input>
+  </ion-item>
+  <ion-button expand="full" (click)="addMemo()">添加备忘录</ion-button>
+
+  <!-- 备忘录列表 -->
+  <ion-list>
+    <ion-item *ngFor="let memo of filteredMemos()">
+      {{ memo }}
+    </ion-item>
+  </ion-list>
+
+  <!-- 日历 -->
+  <!-- 日历 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>日历</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div class="calendar-container">
+        <mwl-calendar-month-view
+          [viewDate]="viewDate"
+          [events]="events"
+          (dayClicked)="dayClicked($event.day)">
+        </mwl-calendar-month-view>
+      </div>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

+ 25 - 0
tab2.page.scss

@@ -0,0 +1,25 @@
+ion-card {
+      margin: 20px 0;
+    }
+    
+ion-item {
+      margin: 10px 0;
+    }
+    
+ion-button {
+      margin: 20px 0;
+    }
+.calendar-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      overflow-x: auto;
+      padding: 20px 0;
+    }
+    
+::ng-deep mwl-calendar-month-view {
+      width: 100%;
+      max-width: 100%;
+    }
+    

+ 26 - 0
tab2.page.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { Tab2Page } from './tab2.page';
+
+describe('Tab2Page', () => {
+  let component: Tab2Page;
+  let fixture: ComponentFixture<Tab2Page>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [Tab2Page],
+      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Tab2Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

+ 32 - 0
tab2.page.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { CalendarEvent } from 'angular-calendar';
+@Component({
+  selector: 'app-tab2',
+  templateUrl: 'tab2.page.html',
+  styleUrls: ['tab2.page.scss']
+})
+
+export class Tab2Page {
+  memoContent: string = '';
+  searchQuery: string = '';
+  memos: string[] = [];
+  viewDate: Date = new Date();
+  events: CalendarEvent[] = [];
+
+  constructor() {}
+
+  addMemo() {
+    if (this.memoContent.trim() !== '') {
+      this.memos.push(this.memoContent);
+      this.memoContent = '';
+    }
+  }
+
+  filteredMemos() {
+    return this.memos.filter((memo) => memo.includes(this.searchQuery));
+  }
+
+  dayClicked(day: any) {
+    console.log('Day clicked:', day);
+  }
+}