PrimeNG styling issues in Angular 2

218 views Asked by At

I'm trying to use PrimeNG's Calendar component, but the styles aren't working. These are all the steps I took:

I installed PrimeNG using the command: npm i primeng

I imported the CalendarModule in my app.module.ts:

import {CalendarModule} from 'primeng/calendar';

and put it in my imports[]:

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    NgbModule,
    SocketIoModule.forRoot(config),
    BrowserAnimationsModule,
    CalendarModule,
  ],

I added the stylesheets to my angular.json:

        "styles": [
          "src/styles.css",
          "../node_modules/primeng/resources/themes/bootstrap/theme.css" ,
          "../node_modules/primeng/resources/primeng.css",
        ],

And I inserted a p-calendar into one of my components like so:

<label for="publishedAt">Published At:</label>
<p-calendar
    [(ngModel)]="news.publishedAt"
    name="publishedAt"
    id="publishedAt"
    required
    #publishedAt="ngModel"
    showTime="true"
    hourFormat="12"
>
</p-calendar>

But my calendar looks like this:

broken calendar

Is there something I missed?

0

There are 0 answers