I added 2 fullCalenders ( https://fullcalendar.io/ ) (with different views) in the same component, and I get a jquery error.
I get this error even if I separate calendars in two different components and add to the third component like this.
<div>
<app-day-calender></app-day-calender>
<app-calender></app-calender>
</div>
If I had one component with one calendar, everything works fine (errors and boot modal works not working). This made me believe that the problem is loading jquery twice for each calendar or smtn, and I don’t know how to sort this stuff yet.
This is what my import looks like for my components.
import {
OnInit,
Component,
Input,
Output,
ElementRef,
EventEmitter,
AfterViewInit,
} from '@angular/core';
import * as $ from 'jquery';
import 'fullcalendar';
import { Options } from "fullcalendar";
. eventClick, bootstrap modal. .
eventClick: function (event, jsEvent, view) {
var stime = '';
var etime = '';
if (event.start) {
stime = event.start.format('MM/DD/YYYY, h:mm a');
}
if (event.end) {
etime = event.end.format('MM/DD/YYYY, h:mm a');
}
$('.titleSection').append('<h5>' + event.title + '</h5>');
$('.modal-body').append('<b>Starts : </b>' + stime);
$('.modal-body').append('<br/><b>Ends : </b>' + etime);
$('#myModal').modal();
return false;
},
script index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
github ripo, , .
https://github.com/nekken/ng2-fullcalendar
4 .
, , .
fullcalendar.js:15 Uncaught ReferenceError: jQuery is not defined
at fullcalendar.js:15
at fullcalendar.js:17
(anonymous) @ fullcalendar.js:15
(anonymous) @ fullcalendar.js:17
vendor.bundle.js:104209 ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).modal is not a function
at HTMLAnchorElement.eventClick (main.bundle.js:505)
at constructor.publiclyTrigger (vendor.bundle.js:12330)
at members.constructor.publiclyTrigger (vendor.bundle.js:10290)
at members.constructor.handleSegClick (vendor.bundle.js:6263)
at HTMLAnchorElement.<anonymous> (vendor.bundle.js:6256)
at HTMLDivElement.dispatch (vendor.bundle.js:22357)
at HTMLDivElement.elemData.handle (vendor.bundle.js:22165)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2838)
at Object.onInvokeTask (vendor.bundle.js:107070)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2837)
.
Update1
moment.js cdnjs index.html. 2 "jQuery not defined".
, cal, , " funciton" .... modal() debuger, . calender.component.ts 83 -
$('#myModal').modal();
