полный календарь и угловой 5

(Новое новое редактирование)

Рустам помог Аршоу создать потрясающий модуль Angular! Проверьте это. Работает с Ангуляром 7.

https://fullcalendar.io/docs/angular

(Новое редактирование)

Я реализовал Angluar 5 с помощью FullCalendar @Alpha Release.

Раньше у меня были проблемы с внедрением FullCalendar в Angular ниже. Я подумал, что вам, ребята, тоже может понадобиться обновление.


Как я могу правильно реализовать полный календарь с Angular 5 без каких-либо ошибок? Я пытаюсь реализовать его в конкретном компоненте. Я установил следующие пакеты

  • jquery
  • момент
  • полный календарь
  • полный календарь-планировщик

К вашему сведению, сообщение ниже ближе всего к тому, что я нашел решение. Я следовал инструкции, но все равно получаю ошибку JQueryPromise. Пожалуйста, сообщите и спасибо заранее!

Угловая функция обратного вызова из события jquery

пакет.json

 "fullcalendar": "^3.8.0",
 "fullcalendar-scheduler": "^1.9.1",
 "jquery": "^3.2.1",
 "moment": "^2.20.1",

.angular-cli.json

 "styles": [
    "styles.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.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/fullcalendar-scheduler/dist/scheduler.min.js"
  ],

main.ts

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

app.component.html

<div id='calendar'></div>

app.component.ts

import { Component } from '@angular/core';
import 'fullcalendar';
import 'fullcalendar-scheduler';
declare let $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
    $('#calendar').fullCalendar({});
  }
}

Я следовал всем шагам неукоснительно, но я все еще получаю сообщение об ошибке. По иронии судьбы, он может загружаться, когда я обновляю страницу, и я могу обойти эту ошибку, но она все еще сохраняется, особенно когда я впервые запускаю ng serve.

ERROR in node_modules/fullcalendar/dist/fullcalendar.d.ts(695,36): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(696,29): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(697,20): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(759,22): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(775,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(988,23): error TS2304: Cannot find name 'JQueryEventObject'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1401,70): error TS2304: Cannot find name 'JQueryAjaxSettings'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1603,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1623,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(2588,50): error TS2304: Cannot find name 'JQueryPromise'.

Новое развитие в этой кроличьей норе

Только что попробовал создать новый компонент "schedule.component" и переместить туда все, но теперь получаю следующие ошибки

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAAAC4AAAA0ArgC7UdQT1MAAAGwAAAQ6AAALgxKsqRTR1NVQgAAEpgAAAH3AAAELqI5y+RPUy8yAAAUkAAAAE8AAABgaGyBu2NtYXAAABTgAAABlAAAAkQkRATXY3Z0IAAAFnQAAABeAAAAugDsQf1mcGdtAAAW1AAABZcAAAvNb3/BHGdhc3AAABxsAAAACAAAAAgAAAAQZ2x5ZgAAHHQAAEApAAB3CtbiupxoZWFkAABcoAAAADYAAAA2BkubWWhoZWEAAFzYAAAAIAAAACQHFARfaG10eAAAXPgAAAI6AAAEEk4TN4Nsb2NhAABfNAAAAhIAAAISiLhpam1heHAAAGFIAAAAIAAAACACigzgbmFtZQAAYWgAAACUAAABHhQGLdJwb3N0AABh/AAAAq4AAASRk5y6n3ByZ...QxUajCCFt4p9HP4fzdSWs2XhWl5HvJazrIrFUyB0l5dpqcW10lV2wukjMLuAvyMHNiYpgPsrCVXZDKrkpll6UWkh7kABVAFVCDe7UFmxagDegA+hLHRPbqtMo7ZHCpKdT6tPGXybzo0+RXBLoPZt1tELcXxCmAAyZwYTJvdDFZKnDER44X2451rDqCyunIsRWvLSx6wnWqwPj/uX5/KuEy6DL0z6A/Fn79VihxMFJsrlAFy4DpZOcvNlMeNp+BRDLj0r+XFdRxdSNSNxiI/AL3ojKdAAB4AWPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGdictkUwWDAwsDJogTgOPN4c9iz6bMos4iysHFChUDZXJnMWTSZZJrAQt9M+YQYBBh4GTgY2kEZOoJiA0z4GBxiEiDEzuGxUYewIjNjg0BGxkTnFZaMaiLeLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

person Jose    schedule 23.12.2017    source источник


Ответы (4)


Проблема, с которой вы столкнулись, теперь устранена благодаря проблеме GitHub, которую вы подняли.

Я считаю, что запуск npm install --save-dev @types/jquery правильно решит эту проблему, поскольку я столкнулся с той же проблемой, и запуск этого помог (после того, как я нашел этот пост и ссылку на проблему GitHub).

процитировать исправление на GitHub: «теперь это учтено в документах: https://fullcalendar.io/docs/typescript/"

person Andrew Stalker    schedule 12.02.2018
comment
Я использую график полного календаря и сталкиваюсь с проблемой. В режиме просмотра недели, когда я перемещаю любое событие снизу вверх, оно не работает должным образом jimmylogic.github .io/angular-fullcalendar/мой-календарь - person jitendra rajput; 04.06.2018
comment
неправильный способ использования с jquery.... попробуйте это stackblitz.com/edit/ng-fullcalendar- демо - person Mahendra Waykos; 29.08.2018

Таким образом, кажется, что в файлах *.d.ts в папке node_modules что-то не так. Я открыл вопрос в проекте GitHub

https://github.com/fullcalendar/fullcalendar/issues/3991

Я вошел в замену соответствующего типа задач на «любой»:

node_modules/fullcalendar/dist/fullcalendar.d.ts
node_modules/fullcalendar-scheduler/dist/scheduler.d.ts

'JQueryPromise'
'JQueryEventObject'
'JQueryAjaxSettings'

По иронии судьбы, после исправления этого у меня больше не возникает проблема «Отказаться от загрузки шрифта». Не могу прокомментировать это. Все, что я знаю, это то, что он работает так, как должен.

Счастливых праздников!

person Jose    schedule 24.12.2017

Ваш проект не содержит типов jquery. Попробуйте добавить их с помощью этой команды

npm install --save-dev @types/[email protected]

Эта проблема была поднята в средстве отслеживания ошибок полного календаря (https://github.com/fullcalendar/fullcalendar/issues/3991)

person David G.    schedule 30.12.2017

Привет, я знаю, что это старый вопрос, но этот npm install --save-dev @types/jquery у меня не работает. Более быстрое решение было:

  • Откройте «Управление пакетами NuGet для решения» (визуальный вариант диспетчера пакетов) по адресу Tools>NuGet Package Manager> Manage NuGet Packages for Solution.
  • Напишите в поле поиска: jquery.type
  • Найдите пакет jquery.TypeScript.DefinitelyTyped
  • Установите внутри вашего веб-проекта
  • Решено

Надеюсь, это помогло тем, кто был в такой же ситуации, как я.

person T3X    schedule 25.02.2019