我有一个javascript日历，我试图从json对象插入自定义事件。 日历和默认事件的代码是：
/* 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: {//This is to add icons to the visible buttons
prev: "<span class='fa fa-caret-left'></span>",
next: "<span class='fa fa-caret-right'></span>",
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//Random default events
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: "#f56954", //red
borderColor: "#f56954" //red
},
{
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: "#f39c12", //yellow
borderColor: "#f39c12" //yellow
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
backgroundColor: "#0073b7", //Blue
borderColor: "#0073b7" //Blue
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
backgroundColor: "#00c0ef", //Info (aqua)
borderColor: "#00c0ef" //Info (aqua)
},
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/',
backgroundColor: "#3c8dbc", //Primary (light-blue)
borderColor: "#3c8dbc" //Primary (light-blue)
}
],
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 = "#f56954"; //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
colorChooser
.css({"background-color": currColor, "border-color": currColor})
.html($(this).text()+' <span class="caret"></span>');
});
$("#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 event
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 functionality
ini_events(event);
//Remove event from text input
$("#new-event").val("");
});
在下面的代码中，我用我的json对象替换虚拟事件，我正在尝试使用for循环来创建自定义事件。对象正常，但事件未在日历上显示。
/* initialize the calendar
-----------------------------------------------------------------*/
$.ajax({
type: "POST",
url: "../services/myservice.asmx/mylist",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//Date for the calendar events (dummy data)
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {//This is to add icons to the visible buttons
prev: "<span class='fa fa-caret-left'></span>",
next: "<span class='fa fa-caret-right'></span>",
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//There i substitute the dummy events with the real that comes from json
events: [function () {
for (i = 0; i < data.d.length; i++) {
{
title: (data.d[i].thetitle);
start: new Date(data.d[i].y, data.d[i].m, data.d[i].d, 12, 0);
end: new Date(data.d[i].y, data.d[i].m, data.d[i].d, 14, 0);
allDay: false;
backgroundColor: "#00c0ef"; //Info (aqua)
borderColor: "#00c0ef"; //Info (aqua)
}
}
}],
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");
$('#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 = "#f56954"; //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
colorChooser
.css({ "background-color": currColor, "border-color": currColor })
.html($(this).text() + ' <span class="caret"></span>');
});
$("#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 event
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 functionality
ini_events(event);
//Remove event from text input
$("#new-event").val("");
});
}
});
EDIT。我发布了我正在尝试使用的日历的原始模板
<!-- THE CALENDAR -->
<div id="calendar"></div>
</div><!-- /.box-body -->
</div><!-- /. box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
</aside><!-- /.right-side -->
</div><!-- ./wrapper -->
<!-- jQuery 2.0.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- jQuery UI 1.10.3 -->
<script src="../js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="../js/AdminLTE/app.js" type="text/javascript"></script>
<!-- fullCalendar -->
<script src="../js/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<!-- Page specific script -->
<script type="text/javascript">
$(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: {//This is to add icons to the visible buttons
prev: "<span class='fa fa-caret-left'></span>",
next: "<span class='fa fa-caret-right'></span>",
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//Random default events
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: "#f56954", //red
borderColor: "#f56954" //red
},
{
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: "#f39c12", //yellow
borderColor: "#f39c12" //yellow
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
backgroundColor: "#0073b7", //Blue
borderColor: "#0073b7" //Blue
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
backgroundColor: "#00c0ef", //Info (aqua)
borderColor: "#00c0ef" //Info (aqua)
},
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/',
backgroundColor: "#3c8dbc", //Primary (light-blue)
borderColor: "#3c8dbc" //Primary (light-blue)
}
],
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 = "#f56954"; //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
colorChooser
.css({"background-color": currColor, "border-color": currColor})
.html($(this).text()+' <span class="caret"></span>');
});
$("#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 event
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 functionality
ini_events(event);
//Remove event from text input
$("#new-event").val("");
});
});
</script>
答案 0 :(得分：0)
您可以先渲染日历，然后在加载数据后添加事件。您的事件定义中有许多错误。你不能在其中使用分号，必须使用逗号分隔属性。在你的ajax成功函数中。
$('#calendar').fullCalendar({
//your calendar definition here
});
$.ajax({
type: "POST",
url: "../services/myservice.asmx/mylist",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
#remove any events that have been loaded
$('#calendar').fullCalendar('removeEvents');
for (i = 0; i < data.d.length; i++) {
var the_event = {
title: (data.d[i].thetitle),
start: new Date(data.d[i].y, data.d[i].m, data.d[i].d, 12, 0),
end: new Date(data.d[i].y, data.d[i].m, data.d[i].d, 14, 0),
allDay: false,
backgroundColor: "#00c0ef",
borderColor: "#00c0ef",
}
$('#calendar').fullCalendar('renderEvent',the_event,true);
}
}
});
这样做是循环返回的数据并创建一个新的事件对象，然后使用renderEvent方法将其添加到日历中。我仅将removeEvents添加为示例。只有当ajax调用返回一组全新的事件时，才需要这样做。
答案 1 :(得分：0)
如果您使用AJAX请求获取事件，则应使用fullCalendar根据URL自动获取数据的功能：
$('#calendar').fullCalendar({
//...
events: {
url: '../services/myservice.asmx/mylist'
}
});
这样，您的所有数据都会同步，您仍然可以使用.fullCalendar('removeEvents');删除或使用.fullCalendar('refetchEvents');刷新任何更改。
这是一个有效的JSBin，我添加了两个用于删除和刷新示例的按钮：