这段时间在我的Angular项目中需要用到日历这一控件：

打开你的项目中的package.json，在“dependencies”中加入：

"primeng": "^4.1.0",
"font-awesome": "^4.7.0"

打开你的项目中的.angular-cli.json，在“styles”中加入：

"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css"

如果你没有安装animations，还是安装一下。…有没有animations你心里就没点A数吗？

npm install @angular/animations --save

最后，安装node_module：

npm install

慢也没办法，自己约的……代码，总得负责到底。
现在解释一下为什么要有以上操作：
第一步清空node_module是因为防止之前的部分资源缺失，造成npm安装时产生异常，毕竟npm和cnpm是同父异母生的。 第二步添加依赖，是让npm知道，到底要给你安装些什么资源，这里安装了primeng的相关组件和一些样式 第三步让你的项目引用primeng里面的样式文件，这样就能保证你从primeng里面使用的控件有他的“出厂”样式 第四步是因为不少控件都有或多或少的动画在里面，如果你不安装而使用了primeng，控制台会报错的，可以先试着不安装 第五步，让npm安装好你需要的所有类库文件。在你的模块中引入你要用的控件模块，在这里我要用的是calendar，所以我引入：

import {CalendarModule} from 'primeng/primeng';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({ 
imports: [ 
    *其他模块*,
    CalendarModule,
    BrowserAnimationsModule
    ],
    ***
})

在目标html中引入：

<p-calendar [(ngModel)]="date" [inline]="true"></p-calendar>

接下来可以看看效果：

emmmm，很棒，定好了默认宽高，让我无法改变。我能怎么办，我也很无奈啊，自己写类名，甚至修改源码，也无法让他变宽居中半步，果然老哥稳！纠结半天，最后只能在全局样式，styles.css里面动刀：

p-calendar{
    width: 100%;
    display: block;
    margin-top: 8%;
}

body .ui-calendar{
    width: 90%;
    margin: 0 auto;
    display: block;
}

body .ui-datepicker{
  width: 100%;
}

别嫌弃我，毕竟不是专业的前端人员，有点丑。

让你跳，还不是被我改变成功了。然后呢，我想要这个日历是显示中文，英文太不亲切了，这时候可以翻翻API。

从上可知，加个locale属性就好了：

html code

<p-calendar [(ngModel)]="date" [inline]="true" [locale]="ch"></p-calendar>

typescript code

ch = {
    /** 每周第一天，0代表周日 */
    firstDayOfWeek: 0,
    /** 每周天数正常样式 */
    dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
    /** 每周天数短样式（位置较小时显示） */
    dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    /** 每周天数最小样式 */
    dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
    /** 每月月份正常样式 */
    monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    /**每月月份短样式 */
    monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
};

自己再美化一下就好~
相信到这里，你已经知道如何使用primeng了。有错误或不足之处请留言，我将尽快更正，谢谢！