280 lines
8.1 KiB
PHP
280 lines
8.1 KiB
PHP
|
<style type="text/css">
|
|||
|
|
.main-wrap {
|
|||
|
|
width: 75%;
|
|||
|
|
margin-left: 40px;
|
|||
|
|
}
|
|||
|
|
.calender-heading {
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
font-size: 23px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
.calender-show {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-content h3 {
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin: 12px 15px;
|
|||
|
|
}
|
|||
|
|
.modal-content .close {
|
|||
|
|
position: absolute;
|
|||
|
|
right: -41px;
|
|||
|
|
top: 0;
|
|||
|
|
color: #131212;
|
|||
|
|
opacity: 1;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
padding: 2px 10px;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
.modal-content .close {
|
|||
|
|
right: 9px;
|
|||
|
|
top: 9px;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
padding: 1px 5px;
|
|||
|
|
border: 2px solid black;
|
|||
|
|
z-index: 99;
|
|||
|
|
}
|
|||
|
|
.modal-content .close {
|
|||
|
|
color: #fff;
|
|||
|
|
opacity: 1;
|
|||
|
|
background: #FF0000;
|
|||
|
|
outline: 0;
|
|||
|
|
border: none;
|
|||
|
|
padding: 2px 7px;
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.close:not(:disabled):not(.disabled) {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.calender-model {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
.calender-model input {
|
|||
|
|
width: 100%;
|
|||
|
|
margin: auto;
|
|||
|
|
border: 1px solid #707070;
|
|||
|
|
color: #707070;
|
|||
|
|
}
|
|||
|
|
.calender-model textarea {
|
|||
|
|
height: 100px;
|
|||
|
|
width: 100%;
|
|||
|
|
color: #707070;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
.event-color-block {
|
|||
|
|
margin: 0 6px;
|
|||
|
|
padding: 3px;
|
|||
|
|
}
|
|||
|
|
.event-color-sec1 {
|
|||
|
|
background: #032DA1;
|
|||
|
|
width: 23px;
|
|||
|
|
height: 23px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.event-color-sec2 {
|
|||
|
|
background: #55D3D2;
|
|||
|
|
width: 23px;
|
|||
|
|
height: 23px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.event-color-sec3 {
|
|||
|
|
background: #FF0000;
|
|||
|
|
width: 23px;
|
|||
|
|
height: 23px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.event-color-sec4 {
|
|||
|
|
background: #FFB653;
|
|||
|
|
width: 23px;
|
|||
|
|
height: 23px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.calender-model select {
|
|||
|
|
width: 100%;
|
|||
|
|
margin: auto;
|
|||
|
|
margin-top: auto;
|
|||
|
|
margin-bottom: auto;
|
|||
|
|
padding: 5px;
|
|||
|
|
color: #707070;
|
|||
|
|
}
|
|||
|
|
.addevent-form {
|
|||
|
|
background: #032da1;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding: 5px 20px;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<main class="wraper responsive-width" id="main">
|
|||
|
|
<!----admin template Exam---->
|
|||
|
|
<div class="main-wrap">
|
|||
|
|
<h2 class="calender-heading">
|
|||
|
|
<?php echo $title; ?>
|
|||
|
|
</h2>
|
|||
|
|
<div class="calender-show">
|
|||
|
|
<div id="calendar"></div>
|
|||
|
|
<button data-toggle="modal" data-target="#createAssignment" type="button" class="addevent">Add Event</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!----admin template Exam end---->
|
|||
|
|
</main>
|
|||
|
|
<!--End right-top side-->
|
|||
|
|
|
|||
|
|
<div class="">
|
|||
|
|
<div class="modal fade show" id="createAssignment" role="dialog" style="padding-right: 16px; ">
|
|||
|
|
<div class="modal-dialog modal-dialog-centered">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<h3>Add New Event</h3>
|
|||
|
|
<button type="button" class="close" data-dismiss="modal"> ×</button>
|
|||
|
|
<div class="calender-model">
|
|||
|
|
<div class="my-3">
|
|||
|
|
<input type="text" name="startDate" value="" class="form-control datetimepicker " autocomplete="off" placeholder="DD MM YYYY, 00:00:00">
|
|||
|
|
</div>
|
|||
|
|
<div class="my-3">
|
|||
|
|
<input type="text" name="startDate" value="" class="form-control " placeholder="Event Title">
|
|||
|
|
</div>
|
|||
|
|
<div class="my-3">
|
|||
|
|
<textarea placeholder="Discription"></textarea>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-flex my-3">
|
|||
|
|
<div>
|
|||
|
|
<p>Event Colour: </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="mx-3" >
|
|||
|
|
<!-- <input type="color" /> -->
|
|||
|
|
<div class="select-event-color d-flex">
|
|||
|
|
<div class="event-color-block">
|
|||
|
|
<div class="event-color-sec1"> </div>
|
|||
|
|
</div>
|
|||
|
|
<div class="event-color-block">
|
|||
|
|
<div class="event-color-sec2"> </div>
|
|||
|
|
</div>
|
|||
|
|
<div class="event-color-block">
|
|||
|
|
<div class="event-color-sec3"> </div>
|
|||
|
|
</div>
|
|||
|
|
<div class="event-color-block">
|
|||
|
|
<div class="event-color-sec4"> </div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<select class="form-select my-2" >
|
|||
|
|
<option value="" disabled="" selected="" hidden=""> Select Teacher</option>
|
|||
|
|
<option value="1">One</option>
|
|||
|
|
<option value="2">Two</option>
|
|||
|
|
<option value="3">Three</option>
|
|||
|
|
</select>
|
|||
|
|
<select class="form-select my-2 " >
|
|||
|
|
<option value="" disabled="" selected="" hidden=""> Select Class</option>
|
|||
|
|
<option value="1">One</option>
|
|||
|
|
<option value="2">Two</option>
|
|||
|
|
<option value="3">Three</option>
|
|||
|
|
</select>
|
|||
|
|
<div class="text-center my-3">
|
|||
|
|
<button type="button" class="addevent-form m-auto">Add Event</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<link rel="stylesheet" href="<?php echo base_url(); ?>assets_admin/css/fullCalender.css">
|
|||
|
|
<script src="<?php echo base_url(); ?>assets_admin/js/jquery-3.4.1.min.js"></script>
|
|||
|
|
<script src="<?php echo base_url(); ?>assets_admin/js/popper.min.js"></script>
|
|||
|
|
<script src="<?php echo base_url(); ?>assets_admin/js/moment.min.js"></script>
|
|||
|
|
<script src="<?php echo base_url(); ?>assets_admin/js/bootstrap.min.js"></script>
|
|||
|
|
<script defer src="<?php echo base_url(); ?>assets_admin/js/fullCalendar.js"></script>
|
|||
|
|
<script defer src="<?php echo base_url(); ?>assets_admin/js/all.js"></script>
|
|||
|
|
<script defer src="<?php echo base_url(); ?>assets_admin/js/main.js"></script>
|
|||
|
|
<script defer src="<?php echo base_url(); ?>assets_admin/js/calendar.js"></script>
|
|||
|
|
<script src="<?php echo base_url(); ?>assets_admin/owl-carousel/js/owl.carousel.min.js"></script>
|
|||
|
|
<script src="<?php echo base_url(); ?>assets_admin/js/datepicker.js"></script>
|
|||
|
|
<script src="<?php echo base_url(); ?>assets_admin/js/datetimepicker.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
$(document).ready(function() {
|
|||
|
|
$('.user-drpdown').click(function() {
|
|||
|
|
$('.drpdown-items').toggle();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(function() {
|
|||
|
|
$('[data-toggle="tooltip"]').tooltip()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(document).ready(function () {
|
|||
|
|
$("#calendar").fullCalendar({
|
|||
|
|
editable: true,
|
|||
|
|
events: "test",
|
|||
|
|
displayEventTime: false,
|
|||
|
|
editable: true,
|
|||
|
|
header: {
|
|||
|
|
left: "title, gotoDate",
|
|||
|
|
right: "",
|
|||
|
|
},
|
|||
|
|
customButtons: {
|
|||
|
|
gotoDate: {
|
|||
|
|
text: "Go to Date",
|
|||
|
|
click: function () {
|
|||
|
|
$(this).datepicker({
|
|||
|
|
autoclose: true,
|
|||
|
|
dateFormat: "yyyy-mm-dd",
|
|||
|
|
});
|
|||
|
|
$(this)
|
|||
|
|
.datepicker()
|
|||
|
|
.on("changeDate", function (e) {
|
|||
|
|
$("#calendar").fullCalendar("gotoDate", e.date);
|
|||
|
|
});
|
|||
|
|
$(this).datepicker("show");
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
navLinks: true,
|
|||
|
|
editable: true,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
$(".event-btn").click(function () {
|
|||
|
|
$(this).hide();
|
|||
|
|
$(".notification-right").addClass("notif_show").css("overflow", "auto");;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$("#main, #mySidebar , header").click(function () {
|
|||
|
|
$(".event-btn").show();
|
|||
|
|
$(".notification-right").removeClass("notif_show").css({ 'overflow' : '' });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
$(document).ready(function () {
|
|||
|
|
$(".event-color-block").on("click", function () {
|
|||
|
|
$(".event-color-block").removeClass("activecolor");
|
|||
|
|
$(this).addClass("activecolor");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
$('.datetimepicker').datetimepicker({
|
|||
|
|
format:'MM/DD/YYYY hh:mm A',
|
|||
|
|
defaultDate: new Date()
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|