使用Sql Server和PHP在jQuery完整日历中添加和加载问题的事件

Question

I used jQuery Full Calendar in my project.My events are stored in MS SQL Server table(events), I got the data in "json" format, but it is not render into Full calendar and events are not added into table.... Please can any body help me....

CREATE TABLE events (
  id  NUMERIC IDENTITY(1,1) NOT NULL,
  title varchar(255) NOT NULL,
  start_event datetime NOT NULL,
  end_event datetime NOT NULL,
  CONSTRAINT [PK_events] PRIMARY KEY CLUSTERED
  ( 
 id ASC 
 )
)

INSERT INTO events(title,start_event,end_event) VALUES
('meeting1', '2019-07-31 00:00:00', '2019-07-31 00:00:00'),
('meeting2', '2019-08-09 00:00:00', '2019-08-09 00:00:00');

application/views/index.php:

$(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events: {
      url : '<?php echo site_url('Home/load');?>',
      error: function() 
            {
                alert("error");
            },
      success: function()
            {
                console.log("successfully loaded");
            }
    },
    selectable:true,
    selectHelper:true,
    select: function(start, end, allDay)
    {
     var title = prompt("Enter Event Title");
     if(title)
     {
      var start = $.fullCalendar.formatDate(start,"Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
      $.ajax({
       url:"<?php echo site_url('Home/valid_calendar');?>",
       type:"POST",
       data:{title:title, start:start, end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Added Successfully");
       }
      })
     }
    },

application/views/load.php:

$timezone = new DateTimeZone("UTC");

$sql = "select * from events";

$stmt = sqlsrv_query($conn,$sql);

if($stmt == false)
{
    die(print_r(sqlsrv_errors(),true));
}

while($row = sqlsrv_fetch_array($stmt,SQLSRV_FETCH_ASSOC))
{
      $data[] = array(

                  'title' => $row['title'],
                  'start_event' => $row['start_event']->format("Y-m-d H:i:s"),
                  'end_event' => $row['end_event']->format("Y-m-d H:i:s")
             );
}

echo json.parse($data);

My Error:

Uncaught TypeError: Cannot read property 'hasTime' of undefined

I thought PHP datetime and Sql Server datetime are mismatched... So I added following code in events load.php

$timezone = new DateTimeZone("UTC");

$data[] = array(

              'title' => $row['title'],
              'start_event' => $row['start_event']->format("Y-m-d H:i:s"),
              'end_event' => $row['end_event']->format("Y-m-d H:i:s")
         );



$(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events:" <?php echo site_url('Home/load');?>",
    selectable:true,
    selectHelper:true,
    select: function(start, end, allDay)
    {
     var title = prompt("Enter Event Title");
     if(title)
     {
      var start = $.fullCalendar.formatDate(start,"Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
      $.ajax({
       url:"<?php echo site_url('Home/valid_calendar');?>",
       type:"POST",
       data:{title:title, start:start, end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Added Successfully");
       }

It gives me output as:

[
  {"title":"hi","start_event":"2019-07-31 00:00:00","end_event":"2019-07-31 00:00:00"},
  {"title":"dsfdfdfd","start_event":"2019-08-09 00:00:00","end_event":"2019-08-09 00:00:00"}
]

But in my url: http://localhost/calendar_sql/index.php/Home/load?start=2019-06-30&end=2019-08-11&_=1564490059946

In my url I don't passed this data anywhere start=2019-06-30&end=2019-08-11

Answer 1

The property names you're giving to your events are incorrect.

Study the event object documentation more closely. You have given your events start_event and end_event properties, but fullCalendar expects the date fields to be start and end. You can't just invent the property names and expect fullCalendar to guess what you called them; they must match the names given in the documentation so that it knows where to look.

The error message is because fullCalendar/momentJS cannot find a defined start property to check whether it has a time component or not.

I expect that changing your PHP to

$data[] = array(
  'title' => $row['title'],
  'start' => $row['start_event']->format("Y-m-d H:i:s"),
  'end' => $row['end_event']->format("Y-m-d H:i:s")
);

should fix your issue.

---

P.S. As a separate point, you mentioned that when you call to the /Home/load URL to get the events, the URL ends up as http://localhost/calendar_sql/index.php/Home/load?start=2019-06-30&end=2019-08-11&_=1564490059946 with start=2019-06-30&end=2019-08-11 added to it. This is expected. As per the events as a JSON feed documentation fullCalendar will automatically append these parameters to the URL whenever it contacts your server to fetch event data. The idea is that your server should read these GET values and use them to filter the list of events returned to only those which occur within those dates. This will make the AJAX call more efficient, so that you don't return lots of events for other dates which the user is not viewing.

---

P.P.S.

echo json.parse($data);

I assume this is a typo in your code above? Unless you wrote or imported some custom code, then there is no such function as json.parse in PHP (and parsing would make no sense here, you would be encoding (i.e. creating) JSON, not parsing (i.e. reading) it. I would expect this line should read

echo json_encode($data);

Is that your real code?