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>
|