完整日历事件计时显示为allDay,即使时间已保存在数据库中

时间:2016-05-12 12:35:17

标签: javascript php jquery calendar

我正在尝试根据所选的时间段在正确的位置显示事件。因此,一旦创建了事件,它就会以正确的时间段保存在数据库中,但是当它显示它们时,它们都显示在顶部作为全天事件而不是作为常规事件在数据库中显示它们的时间

这是来自events.php的var_dump

  [{"id":"1","title":"Umar","start":"2016-03-15 00:00:00","end":"2016-03-18 00:00:00","url":"www.ua.com","allDay":"false"},{"id":"2","title":"Abdullah","start":"2016-04-04 00:00:00","end":"2016-04-04 00:00:00","url":"www.abdullah.com","allDay":"false"},{"id":"7","title":"Abou AbdurRahman","start":"2016-05-09 00:00:00","end":"2016-05-13 00:00:00","url":null,"allDay":"false"},{"id":"12","title":"Abdullah","start":"2016-05-17 03:00:00","end":"2016-05-17 11:30:00","url":null,"allDay":"false"},{"id":"13","title":"Ahmad","start":"2016-05-18 01:00:00","end":"2016-05-18 06:00:00","url":null,"allDay":"false"},{"id":"14","title":"Abdullah Break","start":"2016-05-19 10:00:00","end":"2016-05-19 16:00:00","url":null,"allDay":"false"},{"id":"15","title":"asd","start":"2016-05-20 07:00:00","end":"2016-05-20 12:30:00","url":null,"allDay":"false"}]

以下是日历的事件呈现:

    var calendar = $('#calendar').fullCalendar({
      editable: true,
      header: {
       left: 'prev,next today',
       center: 'title',
       right: 'month,agendaWeek,agendaDay'
      },
     defaultView:'agendaWeek',
     events: "events.php",
     timeFormat: 'h:mm',
     displayEventEnd :true,


    // Convert the allDay from string to boolean
     eventRender: function(event, element, view) {

        event.allDay = false;

     },
     selectable: true,
     selectHelper: true,
     select: function(start, end, allDay) {
           var title = prompt('Event Title:');


      if (title) {
          var start = $.fullCalendar.moment(start).format('YYYY-MM-DD, h:mm:ss a');
          var end = $.fullCalendar.moment(end).format('YYYY-MM-DD, h:mm:ss a');
         console.log("Event Triggered");
         $.ajax({
                 url: "add_events.php",
         data: 'title='+ encodeURIComponent(title)+
            '&start='+encodeURIComponent(start)+
            '&end='+encodeURIComponent(end),
      //    +  '&url='+ encodeURIComponent(url),
                 type: 'POST',
         dataType:'text',
                success: function(json) {
                                         alert('Added Successfully');
                 },
                error: function(xhr, textStatus, errorThrown) {
                                         alert(xhr.responseText);
                }
         });
        calendar.fullCalendar('renderEvent',
        {
             title: title,
             start: start,
             end: end,
        //   url:url,
             allDay: allDay
        },
            true // make the event "stick"
        );
    }
    calendar.fullCalendar('unselect');
 }

任何有助于深入了解此问题的人都将不胜感激。

此致 欧麦尔

1 个答案:

答案 0 :(得分:0)

$('#txtStartDate').datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'MM yy',
                showButtonPanel: true,
                yearRange: "-3:+1",

                onClose: function () {
                    var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $('#hdnStartMonth').val(parseInt(iMonth) + 1);
                    $('#hdnStartYear').val(iYear);
                    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));

                    if (parseInt($('#hdnEndYear').val()) < parseInt($('#hdnStartYear').val())) {
                        $('#txtStartDate').val('');
                    } else if (parseInt($('#hdnEndYear').val()) == parseInt($('#hdnStartYear').val())) {
                        if (parseInt($('#hdnEndMonth').val()) < parseInt($('#hdnStartMonth').val())) {
                            $('#txtStartDate').val('');
                        }
                    }
                },

                beforeShow: function () {
                    if ((selDate = $(this).val()).length > 0) {
                        iYear = selDate.substring(selDate.length - 4, selDate.length);
                        iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
                        $(this).datepicker('option', 'monthNames'));
                        $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                        $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
                    }
                }
            });

            $('#txtEndDate').datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'MM yy',
                showButtonPanel: true,
                yearRange: "-3:+1",

                onClose: function () {
                    var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $('#hdnEndMonth').val(parseInt(iMonth) + 1);
                    $('#hdnEndYear').val(iYear);
                    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
                    if (parseInt($('#hdnEndYear').val()) < parseInt($('#hdnStartYear').val())) {
                        $('#txtEndDate').val('');
                    } else if (parseInt($('#hdnEndYear').val()) == parseInt($('#hdnStartYear').val())) {
                        if (parseInt($('#hdnEndMonth').val()) < parseInt($('#hdnStartMonth').val())) {
                            $('#txtEndDate').val('');
                        }
                    }
                },

                beforeShow: function () {
                    if ((selDate = $(this).val()).length > 0) {
                        iYear = selDate.substring(selDate.length - 4, selDate.length);
                        iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
                                 $(this).datepicker('option', 'monthNames'));
                        $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                        $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
                    }
                }
            });