Как встроить календарь в Ionic 4 - PullRequest
Новая
       15

Как встроить календарь в Ionic 4

0 голосов
/ 06 апреля 2019

Я пытаюсь сделать приложение для посещения занятий.Итак, мне нужно показать календарь, в котором можно показать посещаемость учащегося, независимо от того, присутствовали они или отсутствовали в этот конкретный день.Есть ли обходной путь для непосредственного отображения календаря и выполнения над ним функций.

Снимок экрана, показывающий, как он должен выглядеть: https://imgur.com/a/MfZXy0q

1 Ответ

0 голосов
/ 06 апреля 2019

вам нужно использовать плагин под названием ionic2-calender , затем выполните следующие действия

1) добавьте модуль ionic2-calender в app.module.ts 

import { NgCalendarModule  } from 'ionic2-calendar';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), 
    AppRoutingModule, NgCalendarModule],    
})
export class AppModule {}

2) объявите его в файле .ts модуля страницы так же, как и выше.

3) затем добавьте .html 

 <ion-content>
    <calendar [eventSource]="eventSource" [markDisabled]="markDisabled" 
        [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
        (onCurrentDateChanged)="onCurrentDateChanged($event)" 
        (onEventSelected)="onEventSelected($event)" 
        (onTitleChanged)="onViewTitleChanged($event)"
        (onTimeSelected)="onTimeSelected($event)" step="30">
      </calendar>
    </ion-content>

4), затем используйте событие согласно вашей потребности в странице.ts file. 

export class HomePage {
  public eventSource = [];
  public selectedDate = new Date();
  isToday: boolean = true;
  markDisabled = (date: Date) => {
    var d = new Date();
    // d.setDate(d.getDate() - 1);
    return date < d;
  };
  calendar = {
    mode: 'month',
    currentDate: this.selectedDate
  }

  constructor(public navCtrl: NavController) {
  }
  changeMode(mode) {
    this.calendar.mode = mode;
  }
  loadEvents() {
    this.eventSource = this.createRandomEvents();
  }
  onCurrentDateChanged(ev) {
    console.log(ev);
    var today = new Date();
    today.setHours(0, 0, 0, 0);
    ev.setHours(0, 0, 0, 0);
    this.isToday = today.getTime() === ev.getTime();
  }
  onViewTitleChanged(Title) {
    this.viewTitle = Title;
  }
  onTimeSelected(event) {
    console.log(event);
    var date = new Date().getTime();
    console.log(date);
    var task = "work fast";

  }
  onEventSelected(event) {
    console.log(event);
  }

это рабочий пример, который я применил в моем проекте ionic4. Если вы не понимаете этот ответ, проверьте видеоурок ionic2-calender

...