最初我在文档中声明了完整的日历。准备函数，我有一个下拉列表。当我更改值时，我的日历控件不会根据下拉值更改。我在mvc中做，在jquery中做日历。
my HTML page content
<div id="calendar"></div>
我的文档。Ready函数
function calender(stayIdP)
{
stayid = stayIdP;
alert(stayid);
//------------------------------------------------------------------------
// to find the start and end date
$.ajax({
url: '@Url.Action("LoadStayEvents", "Vendor")',
contentType: "application/json; charset=utf-8",
datatype: "json",
data: "{'stayid':'" + stayid + "'}",
type: "POST", // 'GET' or 'POST' ('GET' is the default)
success: function (data) {
//Data1 = data.split('&');
data = JSON.parse(data);
//Othercharges = JSON.parse(Data1[1]);
var events = [];
$.each(data, function (i, item) {
BeginDate = moment(item.STARTDATE);
EndingDate = moment(item.ENDDATE);
});
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
$('#calendar').fullCalendar({
//header: {
// left: 'prev,next',
// center: 'title',
//},
buttonHtml: {
prev: '<i class="ace-icon fa fa-chevron-left"></i>',
next: '<i class="ace-icon fa fa-chevron-right"></i>'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: 600,
defaultDate: defaultdate,
selectable: false,
selectHelper: true,
//select: function (start, end, jsEvent, view) {
// showUserDetails(start, end, jsEvent, view);
//},
editable: true,
eventLimit: true,
droppable: true,
drop: function (date, allDay) { // this function is called when something is dropped
if (moment(date).format("YYYYMMDD") >= BeginDate.format("YYYYMMDD") && moment(date).format("YYYYMMDD") <= EndingDate.format("YYYYMMDD")) {
$('#alert').hide();
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
var $extraEventClass = $(this).attr('data-class');
alert($(this).attr('data-class'));
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
groupid = $(this).attr('id');
alert($(this).data('eventObject').title);
$('#txtGroupName').html($(this).data('eventObject').title);
// copiedEventObject.id = $(this).attr('id');
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
if ($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
// 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);
$('#ChangeType').modal();
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
else {
$('#Alert').modal();
}
}
,
dayRender: function (date, cell) {
$.ajax({
url: '@Url.Action("LoadStayEvents", "Vendor")',
contentType: "application/json; charset=utf-8",
datatype: "json",
data: "{'stayid':'" + stayid + "'}",
type: "POST", // 'GET' or 'POST' ('GET' is the default)
success: function (data) {
//Data1 = data.split('&');
data = JSON.parse(data);
//Othercharges = JSON.parse(Data1[1]);
var events = [];
$.each(data, function (i, item) {
var startDate = moment(item.STARTDATE);
var endDate = moment(item.ENDDATE);
//just compare the YYYYMMDD so don't run into problems with hour/minute/second, etc. if we used valueOf() or similar
if (moment(date).format("YYYYMMDD") >= startDate.format("YYYYMMDD") && moment(date).format("YYYYMMDD") <= endDate.format("YYYYMMDD")) {
// cell.addClass("pjpDay");
}
else {
cell.addClass("pjpDay");
};
});
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
},
eventClick: function (calEvent, jsEvent, view) {
var dateClicked;
$(this).css('border-color', 'red');
var caseNumber = Math.floor((Math.abs(jsEvent.offsetX + jsEvent.currentTarget.offsetLeft) / $(this).parent().parent().width() * 100) / (100 / 7));
// Get the table
var table = $(this).parent().parent().parent().parent().children();
$(table).each(function () {
// Get the thead
if ($(this).is('thead')) {
var tds = $(this).children().children();
dateClicked = $(tds[caseNumber]).attr("data-date");
}
});
$("#dtoccid").val(calEvent.id);
groupid = calEvent.id;
Loadcharges(calEvent.id);
$('#txtEventname').html(calEvent.title);
//$('#EventDeatils').modal();
},
events: function (start, end, timezone, callback) {
$.ajax({
url: '@Url.Action("LoadserviceEvents", "Vendor")',
contentType: "application/json; charset=utf-8",
datatype: "json",
data: "{'stayid':'" + stayid + "'}",
type: "POST", // 'GET' or 'POST' ('GET' is the default)
success: function (data) {
// Data1 = data.split('&');
data = JSON.parse(data);
var events = [];
$.each(data, function (i, item) {
if (item.SERVICEGRP == 1) {
events.push({
id: item.UTID,
title: item.TITLE,
start: moment(item.USGDATE).format("YYYY-MM-DD"),
end: moment(item.USGDATE).format("YYYY-MM-DD"),
className: 'label-grey',
editable: false
});
}
if (item.SERVICEGRP == 2) {
events.push({
id: item.UTID,
title: item.TITLE,
start: moment(item.USGDATE).format("YYYY-MM-DD"),
end: moment(item.USGDATE).format("YYYY-MM-DD"),
className: 'label-success',
editable: false
});
}
if (item.SERVICEGRP == 3) {
events.push({
id: item.UTID,
title: item.TITLE,
start: moment(item.USGDATE).format("YYYY-MM-DD"),
end: moment(item.USGDATE).format("YYYY-MM-DD"),
className: 'label-danger',
editable: false
});
}
if (item.SERVICEGRP == 4) {
alert(moment(item.USGDATE).format("YYYY-MM-DD"));
events.push({
id: item.UTID,
title: item.TITLE,
start: moment(item.USGDATE).format("YYYY-MM-DD"),
end: moment(item.USGDATE).format("YYYY-MM-DD"),
className: 'label-yellow',
editable: false
});
}
if (item.SERVICEGRP == 5) {
events.push({
id: item.UTID,
title: item.TITLE,
start: moment(item.USGDATE).format("YYYY-MM-DD"),
end: moment(item.USGDATE).format("YYYY-MM-DD"),
className: 'label-purple',
editable: false
});
}
});
callback(events);
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
},
//eventRender: function (event, element) {
// event.disableDragging();
// event.disableResizing();
//}
});
my下拉列表
function loadstaytype() {
var stayi = $('#ddl option:selected').val();
$.ajax({
url: '@Url.Action("Loadguestinfo", "Vendor")',
contentType: "application/json; charset=utf-8",
datatype: "json",
data: "{'stayi':'" + stayi + "'}",
type: "POST", // 'GET' or 'POST' ('GET' is the default)
success: function (data) {
data = JSON.parse(data);
console.log(data);
stayid = data.STAYID;
defaultdate = moment(data.CHECKEDINDATE).format("YYYY-MM-DD");
$('#calendar').fullCalendar('refresh');
//calender(data.STAYID);
$.ajax({
url: '@Url.Action("LoadStayEvents", "Vendor")',
contentType: "application/json; charset=utf-8",
datatype: "json",
data: "{'stayid':'" + stayid + "'}",
type: "POST", // 'GET' or 'POST' ('GET' is the default)
success: function (data) {
//Data1 = data.split('&');
data = JSON.parse(data);
//Othercharges = JSON.parse(Data1[1]);
var events = [];
$.each(data, function (i, item) {
BeginDate = moment(item.STARTDATE);
EndingDate = moment(item.ENDDATE);
});
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
calendar(stayid);
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
}
在完整日历中不改变值。提前谢谢
function bindCal(id) {
var ddlStudio1Value = $("#ddlStudio1 option:selected").val();
$('#calendar').fullCalendar('addEventSource', function (start, end, timezone, callback) {
$.ajax({
url: '@Url.Action("GetEvents", "FacultySchedule")',
data: "{'status':'','StudioId':'" + ddlStudio1Value + "','FacultyId':0,'start':'" + start + "', 'end':'" + end + "'}",
dataType: "json",
type: "POST",
async: false,
contentType: "application/json; charset=utf-8",
success: function (doc) {
var events = [];
$(doc).each(function () {
$('#calendar').fullCalendar('removeEvents', $(this).attr('id'));
events.push({
id: $(this).attr('id'),
title: $(this).attr('title'),
start: $(this).attr('start'),
end: $(this).attr('end'),
color: $(this).attr('color'),
textColor: $(this).attr('textColor'),
someKey: $(this).attr('someKey'),
allDay: $(this).attr('allDay'),
CreatedBy: $(this).attr('CreatedBy'),
StatusRemark: $(this).attr('StatusRemark'),
DurationMnt: $(this).attr('DurationMnt'),
Studio: $(this).attr('Studio')
});
});
callback(events);
},
error: function (response) {
alert(response.responseText);
}
});
});
}