3

So I started to use the PrimeNG and I was following the website documentation where it says everything that one should do in order to make it work. I followed everything to the point on the website, but my UI appears somewhat strange, just like the image bellow, does someone knows why it happens?

Important code parts:

TS

import {CalendarModule} from 'primeng/primeng';

imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
CalendarModule],

HTML

<p-calendar [(ngModel)]="startDate" [showIcon]="true" name="startDate"></p-calendar> <span style="margin-left:35px"></span>

Also, on a side note, does anyone knows how to use one of the themes that the website presents? I tried to find the code for the free ones and could not find it. Thank you for all your help.

Calendar ui image:

calendar

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
Filipe Tabosa
  • 183
  • 1
  • 3
  • 15

1 Answers1

1

Check out the accepted answer in this SO post. The PrimeNG team is often using their latest snapshot for their online documentation and the actual release might still be a little behind.

JavaScript library dependencies

They're currently reimplementing the calendar component to be purely native. Starting with PrimeNG 1.0.0-beta.19 this will probably work. Until then, you'll have to add a bunch of dependencies:

<!-- Datetimepicker, Slider, Schedule -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.js"></script>

or:

<script src="node_modules/primeui/primeui-ng-all.min.js"></script>

CSS dependencies

Also make sure that you have all the relevent CSS dependencies correctly set up. The respective page of the PrimeNG documentation lists the following files to be included:

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />
Community
  • 1
  • 1
Jens Habegger
  • 5,266
  • 41
  • 57
  • Thanks for your help; however, I tried both ways and the problem is still the same. It works as it is, but the ui that it shows is far from the one that the website demonstrates. – Filipe Tabosa Nov 03 '16 at 14:36
  • Have you made sure that all necessary css files are available? – Jens Habegger Nov 03 '16 at 15:19
  • I am kinda new on the front end part so I am not sure if I did so. I thought that the primefaces' css were already included at the moment that I installed primeng and primeui, is there anything else that should be done? I was following the tutorial that was mentioned on my first post. – Filipe Tabosa Nov 03 '16 at 16:13
  • The setup instructions at the PrimeNG documentation list all the relevant css dependencies, I have updated my answer to reflect this additional information. – Jens Habegger Nov 03 '16 at 19:59
  • Oh thanks. I was already doing that on "styleUrls: ['./task-report.component.css', '../../../node_modules/primeng/resources/primeng.min.css', '../../../node_modules/primeui/themes/omega/theme.css'] " I tried to use the primeui instead of primeng to see if it worked, but it still didn't. I guess that I'll try to find another way to use datepicker, but thank you very much for all your help. – Filipe Tabosa Nov 03 '16 at 20:37
  • Also, font-awesome is already being called on another part as I use it on a lot of pages of this project – Filipe Tabosa Nov 03 '16 at 20:38
  • Are you sure all necessary css classes are actually loaded ? – Jens Habegger Nov 04 '16 at 06:11
  • Yep, I was pretty sure that I was importing them; However, I managed to use another datepicker library and it worked. – Filipe Tabosa Nov 16 '16 at 21:57