Template parse errors

[L0key]

Unable to make use of the demo in Angular2 RC5 due to exceptions such as the following: Can't bind to 'viewDate' since it isn't a known property of 'mwl-calendar-month-view'.

1. If 'mwl-calendar-month-view' is an Angular component and it has 'viewDate' input, then verify that it is part of this module.
2. If 'mwl-calendar-month-view' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" <mwl-calendar-month-view *ngSwitchCase="'month'" [ERROR ->][viewDate]="viewDate" [events]="events" [activeDayIsOpen]="activeDayIsOpen" "): Calendar@31:10

I can't see anything wrong with the CalendarMonthView component, so I'm at a loss as to what the issue is.

[mattlewis92]

Are you importing the CalendarModule into your apps NgModule?

On 26 Sep 2016, at 23:22, Scott Hertel notifications@github.com wrote:

Unable to make use of the demo in Angular2 RC5 due to exceptions such as the following: Can't bind to 'viewDate' since it isn't a known property of 'mwl-calendar-month-view'.

If 'mwl-calendar-month-view' is an Angular component and it has 'viewDate' input, then verify that it is part of this module. If 'mwl-calendar-month-view' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" ][viewDate]="viewDate" [events]="events" [activeDayIsOpen]="activeDayIsOpen" "): Calendar@31:10 I can't see anything wrong with the CalendarMonthView component, so I'm at a loss as to what the issue is.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[L0key]

Followed the imports and providers for NgModule on the demo app and this appears to have cleared the error.

[Stevan0102]

for anyone who found the same problem, you need to include the demo-utlis folder and its files as well. Thats how i fix my problem

[AbinashBapu]

even though I add CalendarModule in NgModule it is not working for me .... where do i get demo-utlis folder @Stevan0102

Here it is my app.module.ts file

import { NgModule, ErrorHandler } from '@angular/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic'; import { ItemDetailsPage } from '../pages/item-details/item-details'; import { ListPage } from '../pages/list/list'; import { CalendarModule } from 'angular-calendar';

@NgModule({ declarations: [ MyApp, HelloIonicPage, ItemDetailsPage, ListPage ], imports: [ IonicModule.forRoot(MyApp),

CalendarModule.forRoot()

], bootstrap: [IonicApp], entryComponents: [ MyApp, HelloIonicPage, ItemDetailsPage, ListPage ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {}

[Stevan0102]

Hey @Abiansh , demo-utlis is here: https://github.com/mattlewis92/angular-calendar/tree/master/demos/demo-modules/demo-utils

if you look at this demo: https://mattlewis92.github.io/angular-calendar/demos/#/kitchen-sink

in module.ts, there is this line:

import { DemoUtilsModule } from '../demo-utils/module';

and this:

imports: [
DemoUtilsModule
],

i inculded these, thats how it went working for me

[AbinashBapu]

Thanks @Stevan0102 . 👍 .... I got the another solution to accomplish the goal....

[Enitnelav]

Hi, i have the same error and i don't want to use demoUtils i think it can work without, have you an other solution ? thanks

[mattlewis92]

@Enitnelav remove any component usages from your templates that start with <mwl-demo-utils-* and it should work ok.

[Enitnelav]

i am using <mwl-calendar-month-view></mwl-calendar-month-view>

[mattlewis92]

Are you including CalendarModule.forRoot() in your NgModule import?

[Enitnelav]

For sure

/** angular modules */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';
import { RouterModule } from '@angular/router';
/** lib modules */
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule , TranslateLoader} from '@ngx-translate/core';
import { CookieModule } from 'ngx-cookie';
import { CalendarModule } from 'angular-calendar';
/** Renault modules */
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { LayoutModule } from './layout/layout.module';
import { GalleryModule } from './pages/gallery/gallery.module';
import { CountryModule } from './pages/country/country.module';
import { VehicleModule } from './pages/vehicle/vehicle.module';
import { WelcomeModule } from './pages/welcome/welcome.module';
import { LiveModule } from './pages/live/live.module';
/** app services */
import { YamlLoader } from './core/services/translate/yaml-loader.service';
import { HttpLoaderFactory } from './core/services/translate/http-loader-factory.service';
/** app components */
import { AppComponent } from './app.component';
/** style guide */
import { StyleGuideModule } from './pages/style-guide/style-guide.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // angular 4.0+ only
    CalendarModule.forRoot(),
    FormsModule,
    HttpModule,
    TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useClass: YamlLoader,
          useFactory: HttpLoaderFactory
        }
    }),
    NgbModule.forRoot(),
    CookieModule.forRoot(),
    CoreModule,
    SharedModule,
    LayoutModule,
    GalleryModule,
    CountryModule,
    VehicleModule,
    WelcomeModule,
    StyleGuideModule,
    LiveModule,
    RouterModule.forRoot([]),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

[mattlewis92]

I can't see anything wrong with that, what's the exact error you're getting?

[Enitnelav]

Unhandled Promise rejection: Template parse errors:
'mwl-calendar-month-view' is not a known element:
1. If 'mwl-calendar-month-view' is an Angular component, then verify that it is part of this module.
2. If 'mwl-calendar-month-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<section class="calendar">
  [ERROR ->]<mwl-calendar-month-view></mwl-calendar-month-view>
</section>
"): ng:///LiveModule/LiveCalendarComponent.html@1:2 ; Zone: <root> ; Task: Promise.then ; Value: Error {__zone_symbol__error: Error: Template parse errors:
'mwl-calendar-month-view' is not a known element:
1. If 'mwl-calendar-……}

My calendar is a child of a component of one page of the application

[mattlewis92]

Ah right, that'll be why then. Add CalendarModule (without the forRoot bit) to your child components NgModule.

[Enitnelav]

Cool thanks :)

[menomanabdulla]

`'mwl-demo-utils-date-time-picker' is not a known element:

1. If 'mwl-demo-utils-date-time-picker' is an Angular component, then verify that it is part of this module.
2. If 'mwl-demo-utils-date-time-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]
3. If 'mwl-demo-utils-date-time-picker' is an Angular component, then verify that it is part of this module.
4. If 'mwl-demo-utils-date-time-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("`

i steel get this error,i use my-calendar as child component and use CalendarModule (without the forRoot) in child components NgModule.

[mattlewis92]

mwl-demo-utils-date-time-picker is just a utility used for part of the demo, it's not part of this library.

[ofir94]

Hello, I'm having problems with demo-utils, I'm new in angular and I want to use this calendar, where should I copy the demo-utils directory? because It is showing me the error: Cannot find module "../demo-utils/module" Thanks

[cyrinegh]

hello, please where we can add demo-utils ?

[cyrinegh]

this is the error please help

[Rajan5496]

i have same prob with mwl-utils-date-time-picker

Uncaught Error: Template parse errors: 'mwl-demo-utils-date-time-picker' is not a known element:

1. If 'mwl-demo-utils-date-time-picker' is an Angular component, then verify that it is part of this module.
2. If 'mwl-demo-utils-date-time-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]
3. If 'mwl-demo-utils-date-time-picker' is an Angular component, then verify that it is part of this module.
4. If 'mwl-demo-utils-date-time-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:26913) at compiler.es5.js:26800 at Object.then (compiler.es5.js:1683) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26799) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26728)

[canangok]

I could not fix the error in any way. Can you please help?

error ; 'mwl-calendar-month-view' is not a known element:

1. If 'mwl-calendar-month-view' is an Angular component, then verify that it is part of this module.
2. If 'mwl-calendar-month-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.Angular

App.module.ts ;

@NgModule({ imports: [ ..... CommonModule, FormsModule, NgbModalModule, FlatpickrModule.forRoot(), CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory }), DemoUtilsModule ], declarations: [ .... ], schemas :[CUSTOM_ELEMENTS_SCHEMA],

})

[mattlewis92]

@canangok it looks like you're trying to use the component in a different module. So you need to import the calendar module in the same NgModule that has the component you're trying to use it in, rather than the root app module which I think you're doing,

[canangok]

thank you. it was dissolved. I'il ask you something else. I try for a long time. I can't get the start day and end of the day from This.events. I want to save this.events to the Firebase. Startday and endday values ​​are not going to database. Can you help me?

[aryan-zargar]

Hey ! i have done all of the things that you have done in the past of this issue but i still have problems

My component Module:

import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FlatpickrModule } from 'angularx-flatpickr';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { CalendarComponent } from './calendar-st-component/calendar-st-component.component';
import { CalendarMonthModule } from 'angular-calendar';
import { CalendarMonthViewComponent } from 'angular-calendar';

@NgModule({
  imports: [
    CalendarMonthModule,
    CommonModule,
    FormsModule,
    NgbModalModule,
    FlatpickrModule.forRoot(),
    CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory,
    }),

  ],
  providers:[CalendarMonthViewComponent],
  declarations: [CalendarComponent],
  exports: [CalendarComponent],
  schemas:[
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class CalendarStModule { }

my app module :

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { CalendarStModule } from './calendar-st/calendar-st.module';
import { FlatpickrModule } from 'angularx-flatpickr';
@NgModule({
  imports: [
    CalendarStModule,
    BrowserAnimationsModule,
    FlatpickrModule.forRoot(),
    CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory,
    }),
  ],
  bootstrap:[]
})
export class MyModule {}

my component TS file :

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 { EventColor } from 'calendar-utils';
import { CalendarMonthViewComponent } from 'angular-calendar';
const colors: Record<string, EventColor> = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3',
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF',
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA',
  },
};

@Component({
  selector: 'calendar-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styles: [
    `
      h3 {
        margin: 0 0 10px;
      }

      pre {
        background-color: #f5f5f5;
        padding: 15px;
      }
    `,
  ],
  templateUrl: 'calendar-st-component.component.html',

})
export class CalendarComponent {

  view: CalendarView = CalendarView.Month;

  CalendarView = CalendarView;

  viewDate: Date = new Date();

  refresh = new Subject<void>();

  events: CalendarEvent[] = [
    {
      start: subDays(startOfDay(new Date()), 1),
      end: addDays(new Date(), 1),
      title: 'A 3 day event',
      color: { ...colors['red'] },
      allDay: true,
      resizable: {
        beforeStart: true,
        afterEnd: true,
      },
      draggable: true,
    },
    {
      start: startOfDay(new Date()),
      title: 'An event with no end date',
      color: { ...colors['yellow'] },
    },
    {
      start: subDays(endOfMonth(new Date()), 3),
      end: addDays(endOfMonth(new Date()), 3),
      title: 'A long event that spans 2 months',
      color: { ...colors['blue'] },
      allDay: true,
    },
    {
      start: addHours(startOfDay(new Date()), 2),
      end: addHours(new Date(), 2),
      title: 'A draggable and resizable event',
      color: { ...colors['yellow'] },
      resizable: {
        beforeStart: true,
        afterEnd: true,
      },
      draggable: true,
    },
  ];

  activeDayIsOpen: boolean = true;

  constructor(private modal: NgbModal) {}

  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    if (isSameMonth(date, this.viewDate)) {
      if (
        (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
        events.length === 0
      ) {
        this.activeDayIsOpen = false;
      } else {
        this.activeDayIsOpen = true;
      }
      this.viewDate = date;
    }
  }

  eventTimesChanged({
    event,
    newStart,
    newEnd,
  }: CalendarEventTimesChangedEvent): void {
    this.events = this.events.map((iEvent) => {
      if (iEvent === event) {
        return {
          ...event,
          start: newStart,
          end: newEnd,
        };
      }
      return iEvent;
    });

  }

  addEvent(): void {
    this.events = [
      ...this.events,
      {
        title: 'New event',
        start: startOfDay(new Date()),
        end: endOfDay(new Date()),
        color: colors['red'],
        draggable: true,
        resizable: {
          beforeStart: true,
          afterEnd: true,
        },
      },
    ];
  }

  deleteEvent(eventToDelete: CalendarEvent) {
    this.events = this.events.filter((event) => event !== eventToDelete);
  }

  setView(view: CalendarView) {
    this.view = view;
  }

  closeOpenMonthViewDay() {
    this.activeDayIsOpen = false;
  }
}