search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

<daypilot-scheduler> is not a known element

Asked by Lara
1 month ago.

Hello,
I am trying to use the scheduler component like this in my angular project:
<daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>

This is my error message:

'daypilot-scheduler' is not a known element:
1. If 'daypilot-scheduler' is an Angular component, then verify that it is part of this module.
2. If 'daypilot-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I have installed daypilot using the following command:

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/2024.1.5874.tar.gz --save

and I am able to import the following into my .ts file:
import { DayPilotSchedulerComponent, DayPilot } from "daypilot-pro-angular";
With no errors. I am able to use these imports throughout my .ts file but when i use the component in my .html file it does not work.

I have also tried to write the HTML right in the Angular Component Type Decorator like so:
@Component({
  selector: 'scheduler-component',
  template: `
    <daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>
  `,
  styles: [`
  `]
})

But I still get the same error. How do I use the scheduler component without getting this error?

Answer posted by Dan Letecky [DayPilot]
1 month ago.

It is necessary to add DayPilotModule to the imports section of the module where you want to use <daypilot-scheduler>.

Example from the Angular Scheduler Quick Start tutorial:

import {DataService} from './data.service';
import {FormsModule} from '@angular/forms';
import {NgModule} from '@angular/core';
import {SchedulerComponent} from './scheduler.component';
import {DayPilotModule} from 'daypilot-pro-angular';
import {HttpClientModule} from '@angular/common/http';
import {CommonModule} from "@angular/common";

@NgModule({
  imports:      [
    CommonModule,
    FormsModule,
    HttpClientModule,
    DayPilotModule
  ],
  declarations: [
    SchedulerComponent
  ],
  exports:      [ SchedulerComponent ],
  providers:    [ DataService ]
})
export class SchedulerModule { }
This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.