Calendar on Angular 2 typescript using PrimeNG

angular typescript primeng primeng-calendar
Filipe Tabosa picture Filipe Tabosa · Nov 1, 2016 · Viewed 11.2k times · Source

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

Answer

Jens Habegger picture Jens Habegger · Nov 1, 2016

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

Related questions

Detect [(ngmodel) change to selected date with PrimeNG calendar

I have an input element with an attached datepicker created using PrimeNG calendar. HTML Part <p-calendar showAnim="slideDown" id="calendar" [showIcon]="true [(ngModel)]="myDate" (blur)="onBlurMethod($event)"> </p-calendar> Here I have used PrimeNG calendar tag. I …

Read More
PrimeNG Form Validation

I am using a mix of primeNG controls and html controls. The issue is the primeNG controls don't work properly for the phone mask and for he auto-complete the style is different . for example: html (phone is never showing as …

Read More
PrimeNG calendar form group validation issue

I'm trying to add validation to my form. discount field cannot be empty and value range needs to be within 0 to 100, time_from and time_to cannot be empty. I cannot fire validation proccess on time_from and time_to. …

Read More