こんにちは、
私のウェブサイト用のカレンダーが必要だったので、素晴らしい fullcalendar.js を発見しました!
イベントの設定とCookieによるイベントの保存が可能なカレンダーを作成しました。実際には機能しますが、イベントを設定すると、最初に保存してカレンダーを再ロードします => イベントは前日に移動します!!??
理由がわかりません！
多分誰かが私を助けることができますか？
私のコードはそこにあります：
<!DOCTYPE html>
<html>
<head>
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../jquery/jquery-1.9.1.min.js'></script>
<script src='../jquery/jquery-ui-1.10.2.custom.min.js'></script>
<script src='../jquery-cookie/jquery.cookie.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').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: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var savedEvents = $.cookie("DSCalendar");
if(savedEvents)
{
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
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;
// 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);
},
events: JSON.parse(savedEvents)
});
}
else
{
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
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;
alert(copiedEventObject.start);
copiedEventObject.allDay = allDay;
// 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);
}
});
}
$("#save").click(function(){
var eventsFromCalendar = $('#calendar').fullCalendar( 'clientEvents');
var eventsForCookie = [];
$.each(eventsFromCalendar, function(index,value) {
var event = new Object();
event.id = value.id;
event.start = value.start;
alert('event = '+event.start);
event.end = value.end;
event.title = value.title;
eventsForCookie.push(event);
});
console.log(JSON.stringify(eventsForCookie));
$.cookie("DSCalendar", JSON.stringify(eventsForCookie), {expires: 1});
var savedEvents = $.cookie("DSCalendar");
console.log(JSON.parse(savedEvents));
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 1100px;
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-event { /* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366CC;
color: #fff;
font-size: .85em;
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: right;
width: 900px;
}
</style>
</head>
<body>
<div id='wrap'>
<div id='external-events'>
<h4>Draggable Events</h4>
<div class='external-event'>Free on the Morning</div>
<div class='external-event'>Free on the After-noon</div>
<div class='external-event'>Free on the night</div>
<div class='external-event'>Free all the day</div>
<p>
<input type='button' id='save' /> <label for='save'>save</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
</body>
</html>
ありがとう！