$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
unselectAuto: false,
selectable: true,
allDaySlot: false,
selectHelper: false,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {},
eventRender: function(event, element) {
element.find(".fc-content").append("<span class='close' data-id='" + event._id + "'>x</span>");
},
eventResize: function(event, jsEvent, ui, view) {
console.log("event", event);
},
});
});
// remove event on click in calender
$(document).on('click', '.close', function() {
/* ------------------------------ */
// debugger; // I commented out
/* ------------------------------ */
var id = $(this).data('id');
$('#calendar').fullCalendar('removeEvents', id);
$(this).parent().remove();
});
$("#btnReset").click(function() {
$('#calendar').fullCalendar('removeEvents');
});
$(document).ready(function() {
$("#client-list").on("change", function() {
var selectedValue = $(this).val();
/* ------------------------------ */
// location.reload(); // I commented out
/* ------------------------------ */
// IF #client-list value is not 'Choose Client' then all are draggable. ELSE none are draggable.
/* ------------------------------ */
$('#external-events .fc-event').each(function() {
if (selectedValue !== "Choose Client") {
$(this).draggable('enable');
} else {
$(this).draggable('disable');
}
});
/* ------------------------------ */
});
// Trigger change on load, to check the current #client-list value and 'enable'/'disable' draggable to items.
/* ------------------------------ */
$('#client-list').trigger('change');
/* ------------------------------ */
});
button.remove {
font-size: .85em;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: 400;
color: #fff;
margin: 3px 0;
}
calender-body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
.fc-content span.close {
color: #fff;
opacity: 1;
text-shadow: none;
font-size: 16px;
}
#wrap {
width: 1500px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
#external-events .fc-event {
margin: 10px 0;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: left;
width: 1150px;
}
.mb-20 {
margin-bottom: 20px;
}
.as-console-wrapper {
z-index: 32;
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--scripts-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='https://code.jquery.com/ui/1.11.2/jquery-ui.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js'></script>
<div id='wrap'>
<img src="" alt="client logo" id='client-logo' height=80 width=80 style="float: left;margin-left:45px;">
<div class="clients" style="float:left;clear:left;">
<select id="client-list" onchange="/* changeImage(this) */" style="width:150px; height:40px; margin-left:18px;margin-top:2px;">
<option value="Choose Client">---Choose Client---</option>
<option value="Client 1">Client 1</option>
<option value="Client 2">Client 2</option>
<option value="Client 3">Client 3</option>
<option value="Client 4">Client 4</option>
<option value="Client 5">Client 5</option>
</select>
<div id='external-events'>
<div id='external-events-listing'>
<h4>Channel List</h4>
<div class='fc-event'>My Event 1</div>
<div class='fc-event'>My Event 2</div>
<div class='fc-event'>My Event 3</div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
</div>
</div>
<div class="container">
<span type="reset" id="btnReset" class="btn btn-default" style="margin
top: 10px;">Reset Calender</span>
<ul id="daysEvent"></ul>
<div id='calendar'></div>
</div>
</div>
和压延机的顶部，我想删除“全天”选项，并在压光 – Suma
仅显示时间字段仅启用所选项目拖动？ –
我的意思是我想拖动项目只有当我选择了一些选项，而不是选择客户端下拉，否则应该禁用（拖动项目） – Suma