Я стараюсь выполнять в моем проекте календарь событий в bootstrap 4, только, что в момент выполнения моего языка сценариев JavaScript усыновляет мне следующую ошибку:
Uncaught TypeError: jQuery (...) .datepicker is not в function
Где мой код язык сценариев JavaScript - следующий:
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<link rel="stylesheet" type="text/css" href="../../Assets/css/CDOCalendar.css">
<script type="text/javascript">
jQuery(document).ready(function ($) {
$.noConflict();
jQuery('.datetimepicker').datepicker({ //error
timepicker: true,
language: 'en',
range: true,
multipleDates: true,
multipleDatesSeparator: " - "
});
jQuery("#add-event").submit(function () {
alert("Submitted");
var values = {};
$.each($('#add-event').serializeArray(), function (i, field) {
values[field.name] = field.value;
});
console.log(
values
);
});
});
(function () {
'use strict';
// ------------------------------------------------------- //
// Calendar
// ------------------------------------------------------ //
jQuery(function () {
// page is ready
jQuery('#calendar').fullCalendar({
themeSystem: 'bootstrap4',
// emphasizes business hours
businessHours: false,
defaultView: 'month',
// event dragging & resizing
editable: true,
// header
header: {
left: 'title',
center: 'month,agendaWeek,agendaDay',
right: 'today prev,next'
},
events: [
{
title: 'Barber',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2019-07-07',
end: '2019-07-07',
className: 'fc-bg-default',
icon: "circle"
},
],
eventRender: function (event, element) {
if (event.icon) {
element.find(".fc-title").prepend("<i class='fa fa-" + event.icon + "'></i>");
}
},
dayClick: function () {
jQuery('#modal-view-event-add').modal();
},
eventClick: function (event, jsEvent, view) {
jQuery('.event-icon').html("<i class='fa fa-" + event.icon + "'></i>");
jQuery('.event-title').html(event.title);
jQuery('.event-body').html(event.description);
jQuery('.eventUrl').attr('href', event.url);
jQuery('#modal-view-event').modal();
},
})
});
})(jQuery);
</script>
и мой код HTML - следующий
<div class="p-5">
<h2 class="mb-4">Calendario CDO</h2>
<div class="card">
<div class="card-body p-0">
<div id="calendar"></div>
</div>
</div>
</div>
<!-- calendar modal -->
<div id="modal-view-event" class="modal modal-top fade calendar-modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<h4 class="modal-title"><span class="event-icon"></span><span class="event-title"></span></h4>
<div class="event-body"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="modal-view-event-add" @*class="modal modal-top fade calendar-modal"*@>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form id="add-event">
<div class="modal-body">
<h4>Add Event Detail</h4>
<div class="form-group">
<label>Event name</label>
<input type="text" class="form-control" name="ename">
</div>
<div class="form-group">
<label>Event Date</label>
<input type='text' class="datetimepicker form-control" name="edate">
</div>
<div class="form-group">
<label>Event Description</label>
<textarea class="form-control" name="edesc"></textarea>
</div>
<div class="form-group">
<label>Event Color</label>
<select class="form-control" name="ecolor">
<option value="fc-bg-default">fc-bg-default</option>
<option value="fc-bg-blue">fc-bg-blue</option>
<option value="fc-bg-lightgreen">fc-bg-lightgreen</option>
<option value="fc-bg-pinkred">fc-bg-pinkred</option>
<option value="fc-bg-deepskyblue">fc-bg-deepskyblue</option>
</select>
</div>
<div class="form-group">
<label>Event Icon</label>
<select class="form-control" name="eicon">
<option value="circle">circle</option>
<option value="cog">cog</option>
<option value="group">group</option>
<option value="suitcase">suitcase</option>
<option value="calendar">calendar</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Где я хочу показать модального, где он смог добавлять событие в дне, который я выбрал, но выполнив код, меня усыновляет ошибка не, где будет проблема, Я Буду в серьгу, если они потребуют большей информации
Чтобы мочь использовать в функциональность datepicker
из Bootstrap 4, ты нуждаешься в том, чтобы сослаться в plugin bootstrap-datepicker в тебе cГіdigo HTML.
Для файла классов css:
<head>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
</head>
И для файла JS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
Конечно, ты должен иметь tambiГ©n снабженные ссылками librerГ-схвати их и css jQuery и Bootstrap4 личных деталей.