我在我的项目中使用full calendar。它运行正常,但我想将特定日期设置为活动状态。此外,我想删除拖动选项。
如何做到这一点?
$(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
$task = mysql_query("SELECT * FROM task");
while($tsk = mysql_fetch_assoc($task)){
$start_date = $tsk['t_started_on'];
$d_t=explode(" ",$start_date);
$ex_d = $d_t[0];//2016-05-10
$date=explode("-",$ex_d);
$y=$date[0];
$mon=$date[1];
$d=$date[2];
$ex_t = $d_t[1];//2016-05-10
$time=explode(":",$ex_t);
$h = $time[0];
$min = $time[1];
?>
{
title: "<?php echo $tsk['t_title']?>",
start: new Date(<?= $y ?>, <?= $mon-1 ?>, <?= $d ?>, <?= $h ?>, <?= $min ?>),
allDay: false,
backgroundColor: "#0073b7", //Blue
borderColor: "#0073b7" //Blue
},
<?php } ?>
],
editable: true,
droppable: true, // 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("");
});
});
&#13;
<div class="box-body table-responsive no-padding">
<div class="col-md-12">
<div class="box box-solid">
<!-- /.box-header -->
<div class="box-body">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
&#13;