BBnepal-Accounts/application/views/admin/calender.php
Sampanna Rimal 9cd05ef3cb commitall
2024-07-10 18:28:19 +05:45

280 lines
8.1 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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