Calendar on Angular 2 typescript using PrimeNG

Question

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:

Community · Accepted Answer · 2017-05-23 12:26:03Z

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" />

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Nov 1, 2016 at 21:58

Jens Habegger

5,46644 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Filipe Tabosa Over a year ago

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.

Jens Habegger Over a year ago

Have you made sure that all necessary css files are available?

Filipe Tabosa Over a year ago

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.

Jens Habegger Over a year ago

The setup instructions at the PrimeNG documentation list all the relevant css dependencies, I have updated my answer to reflect this additional information.

Filipe Tabosa Over a year ago

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.

|

Collectives™ on Stack Overflow

Calendar on Angular 2 typescript using PrimeNG

1 Answer 1

JavaScript library dependencies

CSS dependencies

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

JavaScript library dependencies

CSS dependencies

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related