简体   繁体   中英

Trouble saving event in fullcalendar

I can save the event in my database but it saves a different date.

When I click on a date it asks for the event name and saves it. The event is saved on the current date of the day not on the day that I choose/click.

Also the time it saves on the database depends on the current time of the computer.

I am using v2.1

Here's my code:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/moment.min.js'></script>
<script src='js/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>


<script>

$(document).ready(function() {

    var calendar = $('#calendar').fullCalendar({

        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        editable: true,
        events:  "http://localhost/fullcalendar/events.php",
        selectable:true,

        select: function(start,end,title,date){
            var title = prompt('Event Title:');
            //var eventData;
            if(title){
                 var start = $.fullCalendar.moment().format();
                 var end = $.fullCalendar.moment().format();
                 $.ajax({
                        url:'http://localhost/fullcalendar/add_events.php',
                        data: 'title=' + title +'&start='+ start +'&end='+ end,
                        type:"POST",
                        success: function(json){
                            alert('Added Sucessfully');
                        }   

                 });



                 eventData = {
                        title:title,
                        start:start,
                        end:end,

                 };
                 $('#calendar').fullCalendar('renderEvent', eventData, true); //this makes the event stick on the calendar but not save on the database
            }
                $('#calendar').fullCalendar('unselect');
        },

        eventLimit:true,        



    });


});

 </script>
 <style>

body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
}

#calendar {
    width: 900px;
    margin: 40px auto;
}

</style>
</head>
<body>

<div id='calendar'></div>

</body>
</html>

In select function you have the following code:

var start = $.fullCalendar.moment().format();
var end = $.fullCalendar.moment().format();

This means that you are overriding the start and end parameters. As you are using it, start and end will have the current datetime and not the datetime that the user has selected.

If you remove these two lines, it should work as expected.

var start = $.fullCalendar.moment(start).format(YYYY/MM/DD);

var end = $.fullCalendar.moment(end).format(YYYY/MM/DD);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM