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