Как сделать полный календарь версии 3.10.0 в проекте angular 5.2 с помощью nebular ngx-admin? - PullRequest
Новая
       19

Как сделать полный календарь версии 3.10.0 в проекте angular 5.2 с помощью nebular ngx-admin?

0 голосов
/ 27 марта 2019

Необходимо отобразить / отобразить полный календарь версии-3 в моем угловом проекте версии 5.2

Итак, сначала я попытался установить FullCalender, выполнив эту команду: «npm install jquery moment fullcalendar», и после внедрения этого пакета в мой исходный файл я получил ошибку JQueryPromise. Но как-то я решил эту ошибку с помощью пакета - @ types / jquery. Итак, теперь я не вижу больше ошибок на экране. Но я также не получаю желаемый результат (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());
  }
  });
});

}

Мне нужно отобразить полный календарь в угловой версии 5.2, но, к сожалению, я не могу этого сделать. И то же самое (fullCalendar) отображается в угловой версии 7.

...