朋友您好，我真的很想知道如何更改此页面上加载的日历，非常感谢大家！
manage_holiday.php
<!DOCTYPE html>
<html>
<?php $this->load->view("common/common_head"); ?>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Left side column. contains the logo and sidebar -->
<?php $this->load->view("admin/common/common_header"); ?>
<!-- Left side column. contains the logo and sidebar -->
<?php $this->load->view("admin/common/common_sidebar"); ?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Holiday
<small>Holiday panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Holiday</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-3">
<div class="box box-solid">
<div class="box-header with-border">
<h4 class="box-title">Upcomming Holiday</h4>
</div>
<div class="box-body">
<!-- the events -->
<div id="external-events">
<?php foreach($up_holiday as $holiday){ ?>
<div class="external-event bg-light-blue"><?php echo $holiday->holiday_title."(".$holiday->holiday_date.")"; ?></div>
<?php } ?>
</div>
</div><!-- /.box-body -->
</div><!-- /. box -->
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Create Holiday</h3>
</div>
<div class="box-body">
<form method="post">
<?php
echo $this->session->flashdata("message");
?>
<? if(isset($error)){
echo $error;
} ?>
<div class="input-group">
<input type="text" class="form-control" id="start_date" name="start_date" placeholder="Show Date" data-inputmask="'alias': 'yyyy/mm/dd'" data-mask>
</div><!-- /input-group -->
<div class="input-group">
<input id="holiday_title" type="text" class="form-control" name="holiday_title" placeholder="Holiday Title" />
<div class="input-group-btn">
<input id="" type="submit" class="btn btn-primary btn-flat" name="addholiday" value="Add" />
</div><!-- /btn-group -->
</div><!-- /input-group -->
</form>
</div>
</div>
</div><!-- /.col -->
<div class="col-md-9">
<div class="box box-primary">
<div class="box-body no-padding">
<!-- THE CALENDAR -->
<div id="calendar"></div>
</div><!-- /.box-body -->
</div><!-- /. box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<?php $this->load->view("admin/common/common_footer"); ?>
<!-- Control Sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/jQuery/jQuery-2.1.4.min.js"); ?>"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.5 -->
<script src="<?php echo base_url($this->config->item("theme_admin")."/bootstrap/js/bootstrap.min.js"); ?>"></script>
<!-- Select2 -->
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/select2/select2.full.min.js"); ?>"></script>
<!-- InputMask -->
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/input-mask/jquery.inputmask.js"); ?>"></script>
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/input-mask/jquery.inputmask.date.extensions.js"); ?>"></script>
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/input-mask/jquery.inputmask.extensions.js"); ?>"></script>
<!-- bootstrap time picker -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>-->
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/daterangepicker/daterangepicker.js"); ?>"></script>
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/timepicker/bootstrap-timepicker.min.js"); ?>"></script>
<!-- DataTables -->
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/datatables/jquery.dataTables.min.js"); ?>"></script>
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/datatables/dataTables.bootstrap.min.js"); ?>"></script>
<!-- AdminLTE App -->
<script src="<?php echo base_url($this->config->item("theme_admin")."/dist/js/app.min.js"); ?>"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?php echo base_url($this->config->item("theme_admin")."/dist/js/demo.js"); ?>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="<?php echo base_url($this->config->item("theme_admin")."/plugins/fullcalendar/fullcalendar.min.js"); ?>"></script>
<!-- Page specific script -->
<?php
$holiday_data_json = array();
foreach($holiday_json as $hj){
//$holiday_data_json[$hj->holiday_title] = $hj->holiday_title;
$holiday_data_json[] = array(
"title" => $hj->holiday_title,
"start"=> date("Y-m-d", strtotime($hj->holiday_date)),
"end" => date("Y-m-d", strtotime($hj->holiday_date)),
"allDay" => false,
"backgroundColor" => "#3c8dbc",
"borderColor" => "#00a65a"
);
}
?>
<script>
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1070,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
}
ini_events($('#external-events div.external-event'));
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//Random default events
events: <?php echo json_encode($holiday_data_json); ?>,
editable: false,
droppable: false, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
/* ADDING EVENTS */
var currColor = "#3c8dbc"; //Red by default
//Color chooser button
var colorChooser = $("#color-chooser-btn");
$("#color-chooser > li > a").click(function (e) {
e.preventDefault();
//Save color
currColor = $(this).css("color");
//Add color effect to button
$('#add-new-event').css({"background-color": currColor, "border-color": currColor});
});
$("#add-new-event").click(function (e) {
e.preventDefault();
//Get value and make sure it is not null
var val = $("#new-event").val();
if (val.length == 0) {
return;
}
//Create events
var event = $("<div />");
event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
event.html(val);
$('#external-events').prepend(event);
//Add draggable funtionality
ini_events(event);
//Remove event from text input
$("#new-event").val("");
});
});
</script>
<script>
$(function () {
$("[data-mask]").inputmask("yyyy-mm-dd", {"placeholder": "yyyy-mm-dd"});
$(".timepicker").timepicker({
showInputs: false
});
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false
});
});
</script>
</body>
</html>
谢谢大家！