Я пытался создать календарь событий. Я должен создать модал для добавления события в календарь не показывает загрузчик modal.but, когда я использую окно подсказки js, я могу добавить событие. Но мне нужно добавить дополнительную информацию, используя загрузчик модальный.
<?php
//index.php
include('header.php');
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"> </script>
<div class="container" style="margin-top:30px">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-9">Holiday List</div>
<div class="col-md-3" align="right">
<a href="index.php" class="btn btn-info" role="button">Back To Home</a>
</div>
</div>
</div>
<div class="card-body">
<div id="calendar">
</div>
</div>
</div>
</div>
<div class="modal" id="formModal">
<div class="modal-dialog model-center">
<form id="add_event">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Make New holiday</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<select name="event_action" id="event_action" class="form-control">
<option value="1">Holiday</option>
<option value="2">Absant Day As Present</option>
</select>
</div>
<div class="form-group">
<input type="text" name="event_name" id="event_name" class="form-control" placeholder="Event Name" />
<span id="error_event_name" class="text-danger"></span>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" name="create_report" id="add_event" class="btn btn-success btn-sm">Create Report</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events: 'timetable/load.php',
selectable:true,
selectHelper:true,
select: function(start, end, allDay) {
//$('#formModal').modal('show');//this not show the bootstrap model
var title = prompt("Enter Holiday Event Title");
var type = prompt("Enter Holiday type");
if (title && type) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url:"timetable/insert.php",
type:"POST",
data:{title:title,type:type, start:start, end:end},
success:function () {
calendar.fullCalendar('refetchEvents');
alert("Added Successfully");
}
})
}
},
editable:true,
eventResize:function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"timetable/update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function() {
calendar.fullCalendar('refetchEvents');
alert('Event Update');
}
})
},
eventDrop:function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"timetable/update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function() {
calendar.fullCalendar('refetchEvents');
alert("Event Updated");
}
});
},
eventClick:function(event) {
if ( confirm("Are you sure you want to remove it?") ) {
var id = event.id;
$.ajax({
url:"timetable/delete.php",
type:"POST",
data:{id:id},
success:function() {
calendar.fullCalendar('refetchEvents');
alert("Event Removed");
}
})
}
},
});
});
</script>
title = prompt("Enter Holiday Event Title");
окно подсказки и текстовое поле типа работают отлично. Но это не хороший способ добавить событие. Вот почему я думаю о переходе к модалу начальной загрузки. так как мне исправить эту ошибку?