2013-04-02 3 views
1

Привет,,
Мне нужен календарь для моего сайта, поэтому я открыл fullcalendar.js, который является потрясающим!Почему мои события, записанные в Fullcalendar, идут на день раньше?

Я создал календарь, где можно установить события и сохранить события в файле 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> 

СПАСИБО!

ответ

0

Я нашел решение

Дата часы установлены в 00:00 так пытался изменить дату, делая date.setHours(15); и теперь работает.

+0

У меня есть исключение в javascript: setHours - неопределенный метод. У вас такая же проблема? – Walloud

Смежные вопросы