标签: angular-calendar

我有一个失败的异步角度组件DOM测试,但它的同步等效失败,我不明白为什么.

这是茉莉花测试:

describe('Availability Component', () => {

    let fixture: ComponentFixture<AvailabilityComponent>;

    const absenceService = jasmine.createSpyObj('AbsenceService', ['findAbsences']);
    absenceService.findAbsences.and.returnValue(of([{}]));

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [AvailabilityComponent],
            imports: [CalendarModule.forRoot()],
            providers: [{provide: AbsenceService, useValue: absenceService}]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(AvailabilityComponent);
    });

    const printAbsenceReasons = function () {
        console.log(fixture.debugElement.queryAll(By.css('.calendarAbsence'))
        .map(e => e.nativeElement.textContent)
        .join(','));
    };

    it('should synchronously find absences in calendar view', () => {
        fixture.detectChanges();

        console.log('synchronous test');
        printAbsenceReasons();
    });

    it('should  asynchronously find absences in calendar view', fakeAsync(() => {
        fixture.detectChanges();
        tick();
        fixture.detectChanges();
        tick();

        console.log('asynchronous …

我需要显示时间间隔为 15，可由用户配置。

我尝试了下面的方法，但显示如下：

我需要以 15 或 30 分钟的间隔显示：15:15 - 15:30 - 15:45

html 组件：

<mwl-calendar-week-view [dayStartHour]="8" [dayStartMinute]="0" [precision]="'minutes'" 
[hourSegments]="4" [dayEndHour]="18" [dayEndMinute]="0" 
*ngSwitchCase="'week'" [excludeDays]="[0,6]" [viewDate]="viewDate" 
(viewDateChange)="selectedDay = {date:$event}" [events]="events" 
[refresh]="refresh" (dayClicked)="dayClicked($event.day)" 
(eventClicked)="edit($event.event" (eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-week-view>

CSS：

.cal-week-view {

   .cal-hour-segment.cal-after-hour-start .cal-time {
       display: block;
   }
}

我在使用 Angular 5 日历组件时遇到问题 https://mattlewis92.github.io/angular-calendar

日历呈现完美，包括事件等。但是，使用mwlCalendarPreviousView和mwlCalendarNextView指令不起作用。

点击然后确实出现以下错误：

ERROR TypeError: subFn is not a function
    at CalendarPreviousViewDirective.onClick (angular-calendar.js:239)
    at Object.eval [as handleEvent] (PlanningOverview.html:58)
    at handleEvent (core.js:13581)
    at callWithDebugContext (core.js:15090)
    at Object.debugHandleEvent [as handleEvent] (core.js:14677)

导航到该onClick方法的源代码向我显示以下内容：

 /**
  * @hidden
  * @return {?}
  */
  CalendarNextViewDirective.prototype.onClick = function () {
        var /** @type {?} */ addFn = {
            day: addDays,
            week: addWeeks,
            month: addMonths
        }[this.view];
        this.viewDateChange.emit(addFn(this.viewDate, 1));
    };
    return CalendarNextViewDirective;

这说明subFn确实不是一个函数。

我肯定做错了什么，但我找不到什么......

（我在 Angular 5.0.00 上使用 …

我正在使用mattlewis Angular 日历来为我的项目实现周视图。我需要用不同的背景颜色显示一周中的特定时间。

我找不到输入或其他方式（使用 ng-template）来以不同的背景颜色在周视图中渲染特定单元格。

我想要这样的东西，其中周视图中特定时间的背景以不同的颜色显示。

需要建议/帮助。

谢谢。

请通过此stackblitz 演示提出更改建议。

在我新创建的 Angular 应用程序中，我尝试使用 mattlewis92 的 Angular-calendar 来创建他的日历。我已经复制了他的 github 上列出的所有步骤和代码： https: //mattlewis92.github.io/angular-calendar/#/kitchen-sink但我不断收到错误消息Error: StaticInjectorError(AppModule)[CalendarDayViewComponent -> Date Adapter]: NullInjectorError: No provider for DateAdapter!

在我的中app.module.ts，我有这个，并且也导入了所有这些：

imports: [
    CalendarModule.forRoot({
        provide: DateAdapter,
        useFactory: adapterFactory
    })
]

我唯一看到的问题是我也使用 Moment，所以我的提供程序中有这个：

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }

任何关于为什么会发生这种情况或我将如何解决它的帮助将不胜感激，谢谢！

在我的日历中，我需要按如下方式显示一天和一周的时间：09:00、09:15、09:20。

我将软件包升级到最新版本

angular-calendar version
0.26.1

现在下面的代码出错了，我不能再像以前一样显示时间了。

模块.ts：

class CustomDateFormatter extends CalendarNativeDateFormatter {
    public dayViewHour({ date, locale }: DateFormatterParams): string {
        return new Intl.DateTimeFormat('ca', {
            hour: 'numeric',
            minute: 'numeric'
        }).format(date);
    }
}
    // It does not work any more this way and error occurs ...
    CalendarModule.forRoot({
        dateFormatter: {
            provide: CalendarDateFormatter,
            useClass: CustomDateFormatter
        }
    }),

组件.scss：

.cal-day-view .cal-hour-segment.cal-after-hour-start .cal-time {
    display: block;
  }

我查看了在别处搜索的文档，但找不到我需要的内容......

我想在 Angular 中使用 mat-calendar 实现日期范围选择器。我无法以正确的方式实现它。任何人都可以帮助我吗？

我的html代码：

<mat-calendar [selected]="range"
[comparisonStart]="range.start"
[comparisonStart]="range.end"
(selectedChange)="onChange($event)"></mat-calendar>

我的Ts代码：

range: DateRange<Date>;
constructor(){}
ngOnInit(){
}
 onChange(event)
 {
  console.log(event);
 }

我正在使用 Angular Calendar https://github.com/mattlewis92/angular-calendar，我希望每个单元格有一个以上的徽章，每个徽章都放在一个计数器中，用于不同类型的事件。有不同类型的事件（使用事件中的元属性）。我在使用用于一天事件的计数器时遇到了困难。

这是我想要的结果。

编辑：这是我尝试过的

我使用日历单元的这个自定义模板来添加徽章。

<ng-template #customCellTemplate let-day="day" let-locale="locale">
  <div class="cal-cell-top">
    <span style="background-color: grey" class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
    <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
  </div>
  <div>
    <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{countErrors()}}</span>
    <span style="background-color: green" class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ countSuccesses() }}</span>
    <span style="background-color: orange" class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ countWarnings() }}</span>
  </div>
</ng-template>

这三种功能countErrors() countWarnings()和countSuccesses()计算相同的类型（错误或成功或警告）的事件的数量。

事件类型由meta属性指定：

{
  start: subDays(startOfDay(new Date()), 1),
  end: addDays(new Date(), 1),
  title: 'A 3 day event', …

我正在研究 Angular 6+ 日历。我想添加自定义事件模板，但它不起作用。实际上我想添加一个进度条以及标题和操作按钮，此自定义事件模板不起作用，周视图中没有显示任何事件，也没有错误。我究竟做错了什么？或者还有其他方法在标题中添加 html 吗？我尝试在标题中添加 html（进度条），而 Angular 不允许添加 html。感谢帮助。这是我的代码：

<ng-template #myTemplateId let-event="event" let-placement="placement">
    <div class="cal-tooltip" [ngClass]="'cal-tooltip-' + placement">
      <div class="cal-tooltip-arrow"></div>
      <div class="cal-tooltip-inner" style="min-width: 200px; padding: 10px; text-align: left; font-size:14px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif">
        <span><b>{{event.classprogram.name + " " + event.name}}</b></span>
        <div style="margin: 10px 0px;">
            <b>Start </b> {{event.startDate | date: 'dd/MM/yyyy'}} {{ " " + event.startTime }}<br/> 
            <b>End </b>{{event.startDate | date: 'dd/MM/yyyy'}} {{ " " + (event.endTime) ? event.endTime : "" }}
        </div>
        <span>{{ event.min_participants …

在我新创建的Angular应用中，我试图使用mattlewis92的angular-calendar来创建他的日历。我已经复制了他的github上列出的所有步骤和代码：https : //mattlewis92.github.io/angular-calendar/#/kitchen-sink，但是我在第一行上一直遇到错误，@ViewChild('modalContent', { static: true }) modalContent: TemplateRef<any>;也就是说“类型{的参数：静态：布尔值；}无法分配给类型{的参数？这是其余的代码供参考，但我认为这并不重要：

import { Component, ChangeDetectionStrategy, ViewChild, TemplateRef} from '@angular/core';
import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
import { Subject } from 'rxjs';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarView } from 'angular-calendar';

import * as _moment from 'moment';
import { JQ_TOKEN } from '../common/jQuery.service';
const moment = _moment;

const colors: any = {
  red: {
    primary: '#ad2121', …

日历在第一次加载时不显示事件。例如，仅当我触发任何事件（例如单击按钮）以将视图从月更改为周时。

我正在使用Angular Calendar 6 + LINK

我的项目是用Angular 6 制作的。

日历在第一次加载时不显示数据，只有在我触发任何事件之后才显示。

一切都按预期工作，所以我将给出 Html（其中的一部分）和最重要的：在这种情况下最重要的。

HTML ...

<div [ngSwitch]="view">
          <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" [viewDate]="viewDate" [events]="events"
            [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)"
            (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)"
            [locale]="locale" [weekStartsOn]="weekStartsOn" [weekendDays]="weekendDays" >
          </mwl-calendar-month-view>
          <mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" [viewDate]="viewDate" [events]="events"
            [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
            (eventTimesChanged)="eventTimesChanged($event)" [locale]="locale" [weekStartsOn]="weekStartsOn"
            [weekendDays]="weekendDays" (beforeViewRender)="beforeMonthViewRender($event)">
          </mwl-calendar-week-view>
          <mwl-calendar-day-view *ngSwitchCase="CalendarView.Day" [viewDate]="viewDate" [events]="events"
            [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
            (eventTimesChanged)="eventTimesChanged($event)" [locale]="locale" >
          </mwl-calendar-day-view>
        </div>

...

打字稿...

import {
  Component,
  ChangeDetectionStrategy,
  ViewChild,
  TemplateRef,
  OnInit
} from "@angular/core";
import {
  CalendarEvent,
  CalendarView,
  DAYS_OF_WEEK,
  CalendarEventAction,
  CalendarEventTimesChangedEvent,
  CalendarDateFormatter
} …

我mat-date-picker在我的应用程序中使用过，html 文件如下所示：

  <mat-form-field>
<input matInput [matDatepicker]="picker" formControlName="date" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

我在另一个组件中使用了完全相同的代码段并且它可以工作，但是在这个组件中它显示错误：

ERROR 错误：mat-form-field 必须包含一个 MatFormFieldControl。

即使页面在错误后加载，日期选择器的按钮也不会显示，我无法选择日期。