如何使用星状ngx-admin在angular 5.2项目中呈现3.10.0版的全日历?

时间:2019-03-27 11:18:14

标签: jquery fullcalendar angular5 fullcalendar-3

在我的有角项目版本为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版本呈现。

0 个答案:

没有答案