在我的有角项目版本为5.2中,需要渲染/显示版本3的完整日历
因此,起初我尝试通过运行以下命令来安装FullCalender:“ npm install jquery moment fullcalendar”,在源文件中实现该程序包后,我遇到了JQueryPromise错误。但是,以某种方式我已经借助软件包-@ types / jquery解决了该错误。因此,现在屏幕上不再显示任何错误。但是我也没有得到想要的输出(在Myangular屏幕上为FullCalender)。
// angular-cli.json
"styles": [
"../node_modules/fullcalendar/dist/fullcalendar.css",
"../node_modules/@nebular/theme/styles/prebuilt/default.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/typeface-exo/index.css",
"../node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"../node_modules/ionicons/scss/ionicons.scss",
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/socicon/css/socicon.css",
"../node_modules/nebular-icons/scss/nebular-icons.scss",
"../node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
"../node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
"../node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
"./app/@theme/styles/styles.scss",
"../node_modules/owl.carousel/dist/assets/owl.carousel.css",
"../node_modules/owl.carousel/dist/assets/owl.theme.default.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/fullcalendar/dist/fullcalendar.min.js",
"../node_modules/pace-js/pace.min.js",
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/echarts/dist/echarts.min.js",
"../node_modules/chart.js/dist/Chart.min.js",
"../node_modules/owl.carousel/dist/owl.carousel.js",
"./assets/js/popper.min.js",
"./assets/js/jquery.appear.js",
"./assets/js/isotope.pkgd.min.js",
"./assets/js/jquery.cubeportfolio.min.js",
"./assets/js/morphext.min.js",
"./assets/js/parallaxie.min.js",
"./assets/js/TweenMax.min.js",
"./assets/js/jquery.themepunch.tools.min.js",
"./assets/js/jquery.themepunch.revolution.min.js",
"./assets/js/revolution.extension.actions.min.js",
"./assets/js/revolution.extension.carousel.min.js",
"./assets/js/revolution.extension.kenburn.min.js",
"./assets/js/revolution.extension.layeranimation.min.js",
"./assets/js/revolution.extension.migration.min.js",
"./assets/js/revolution.extension.navigation.min.js",
"./assets/js/revolution.extension.parallax.min.js",
"./assets/js/revolution.extension.slideanims.min.js",
"./assets/js/revolution.extension.video.min.js"
],
// physio.component.html
<div id="calendar">
</div>
// physio.component.ts
import {Component, OnInit, ViewChild, ElementRef, HostListener}
from '@angular/core';
import * as moment from 'moment';
import * as $ from 'jquery';
import 'fullcalendar';
@Component({
selector: 'physio',
templateUrl: './physio.component.html',
styleUrls: ['./physio.component.scss'],
})
export class PhysioComponent implements OnInit {
constructor(private route: ActivatedRoute,
private router: Router) {
}
ngOnInit() {
$(function() {
const calendarEl = $('#calendar');
calendarEl.fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month, week, day'
},
events: [
{
title: 'First Event',
start: '2018-01-07',
end: '2018-01-10'
}
],
dayClick: (date, jsEvent, view) => {
console.log('date is ', date.format());
}
});
});
}
我需要在angular 5.2版本中显示全日历,但是很遗憾,我不能这样做。同样的东西(fullCalendar)以角度7版本呈现。