在fullcalendar.js

时间:2015-10-15 09:01:31

标签: javascript php fullcalendar

我使用fullcalendar.js在项目中添加了一个日历。我的数据库条目正在显示,但它们提前一个月。

如果我为16.octobre.2015输入内容,则会将其作为16.octobre.2015保存在数据库中,但会显示为16.novembre.2015。我的每一个条目都会发生这种情况。

我在Stack Overflow上搜索了很多,发现了一些类似的主题。其中一个人解释说,这与月份的编入方式有关。

  • PHP从1到12计数。
  • JavaScript从0到11计数。

我猜这可能是我的问题?

有人可以告诉我需要更改的内容,以便我的输入显示正确吗?这是我的代码:

        <!-- inline scripts related to this page -->
        <script type="text/javascript">
            jQuery(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
        -----------------------------------------------------------------*/

<?php
        print "var date = new Date();\n";
        print "var d = date.getDate();\n";
        print "var m = date.getMonth();\n";
        print "var y = date.getFullYear();\n";
        print "var unixTimestamp = Date.now(); // in milliseconds;"

?>

        var calendar = $('#calendar').fullCalendar({
            //isRTL: true,
             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'
            },
<?php
            $dates=getPcalInfoOfHour($gl_userid,0,0);

            print "events: [\n";

            for ($x=0;$x<count($dates["id"]);$x++) {
                print "  {\n";
                print " title: '".$dates["title"][$x]."',\n";
                print " start: new Date(".date("Y",$dates["start"][$x]).", ".date("n",$dates["start"][$x]).", ".date("j",$dates["start"][$x]).", ".date("G",$dates["start"][$x]).", ".date("i",$dates["start"][$x]).",0,0),\n";
                print " end: new Date(".date("Y",$dates["end"][$x]+1).", ".date("n",$dates["end"][$x]+1).", ".date("j",$dates["end"][$x]+1).", ".date("G",$dates["end"][$x]+1).", ".date("i",($dates["end"][$x]+1)).",0,0),\n";
                print " allDay: false,\n";
                print " className: 'label-info'\n";
                if ($x<(count($dates["id"])-1)) {
                    print "  },\n";
                } else {
                    print "  }\n";
                }
            }

            print "]\n";
?>
            ,
            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');
                var $extraEventClass = $(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);

                // 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);

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }

            }
            ,
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {



                calendar.fullCalendar('unselect');
            }
            ,
            eventClick: function(calEvent, jsEvent, view) {

                //display a modal
                var modal =
                '<div class="modal fade">\
                  <div class="modal-dialog">\
                   <div class="modal-content">\
                     <div class="modal-body">\
                       <button type="button" class="close" data-dismiss="modal" style="margin-top:-10px;">&times;</button>\
                       <form class="no-margin">\
                          <label>Title &nbsp;</label>\
                          <label>$dates["title"][0]</label>\
                         <button type="submit" class="btn btn-sm btn-success"><i class="ace-icon fa fa-check"></i> Save</button>\
                       </form>\
                     </div>\
                     <div class="modal-footer">\
                        <button type="button" class="btn btn-sm btn-danger" data-action="delete"><i class="ace-icon fa fa-trash-o"></i> Delete Event</button>\
                        <button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> Cancel</button>\
                     </div>\
                  </div>\
                 </div>\
                </div>';

                var modal = $(modal).appendTo('body');
                modal.find('form').on('submit', function(ev){
                    ev.preventDefault();

                    calEvent.title = $(this).find("input[type=text]").val();
                    calendar.fullCalendar('updateEvent', calEvent);
                    modal.modal("hide");
                });
                modal.find('button[data-action=delete]').on('click', function() {
                    calendar.fullCalendar('removeEvents' , function(ev){
                        return (ev._id == calEvent._id);
                    })
                    modal.modal("hide");
                });

                modal.modal('show').on('hidden', function(){
                    modal.remove();
                });

                console.log(calEvent.id);
                console.log(jsEvent);
                console.log(view);

                // change the border color just for fun
                //$(this).css('border-color', 'red');

            }

            });

        })
        </script>

1 个答案:

答案 0 :(得分:2)

答案实际上就是问题所在。我只想引用你的话:

  

我在Stack Overflow上搜索了很多,发现了一些类似的主题。其中一个人解释说,这与月份的编入方式有关。

     
      
  • PHP从1到12计数。
  •   
  • JavaScript从0到11计数。
  •   
     

我猜这可能是我的问题?

是。如果你需要一个指向正确方向的手指,那么让我们来看看这部分代码:

print " start: new Date(".date("Y",$dates["start"][$x]).", ".date("n",$dates["start"][$x]).", ".date("j",$dates["start"][$x]).", ".date("G",$dates["start"][$x]).", ".date("i",$dates["start"][$x]).",0,0),\n";
print " end: new Date(".date("Y",$dates["end"][$x]+1).", ".date("n",$dates["end"][$x]+1).", ".date("j",$dates["end"][$x]+1).", ".date("G",$dates["end"][$x]+1).", ".date("i",($dates["end"][$x]+1)).",0,0),\n";

更准确地说:

date("n", $dates["start"][$x])
date("n", $dates["end"][$x]+1)

只需从月份值中减去一个:

(date("n", $dates["start"][$x]) - 1)
(date("n", $dates["end"][$x]+1) - 1)

每次在JavaScript源代码中输出PHP月份值时都这样做。

更好的是,您可以直接使用时间戳(请记住,JavaScript使用毫秒):

print " start: new Date(".($dates["start"][$x] * 1000)."),\n";
print " end: new Date(".(($dates["end"][$x]+1) * 1000)."),\n";