Fullcalendar JSON/AJAX

2
votes

Currently I am working on Fullcalendar v3.

https://github.com/fullcalendar/fullcalendar/

https://fullcalendar.io/docs

My events code to set the events required to display items in the calendar:

eventSources: [{

            events: function(start, end, timezone, callback) {
                $.ajax({
                    url     : 'dispatcher.php',
                    type    : 'post',
                    dataType: 'json',
                    data    : {
                        //  requires UNIX timestamps
                        start     : start.unix(),
                        end       : end.unix(),
                        component : 'Rak',
                        controller: 'Read',
                        task      : 'getCalendarEvents'
                    },
                    success : function(doc) {
                        var events = [];
                        $(doc).find('event').each(function() {
                            events.push({
                                title    : $(this).attr('title'),
                                start    : $(this).attr('start'), // will be parsed
                                end      : $(this).attr('end'), // will be parsed
                                className: $(this).attr('className')
                            });
                        });
                        callback(events);
                        console.log(doc);
                    }

                });
            }
        }]

Console.log(doc):

0: {id: "1", title: "Testtesttest", start: "2019-01-15", end: "2019-01-16", className: "event-azure"} length: 1

However... item is NOT displayed in the calendar. What am I doing wrong? Currently I am clueless.

A JSON format is being sent and should have been used in the events.

Thanks a lot for any help!

Hardcoded example which works to show the required format:

events: [
    {
      title  : 'event1',
      start  : '2010-01-01'
    },
    {
      title  : 'event2',
      start  : '2010-01-05',
      end    : '2010-01-07'
    },
    {
      title  : 'event3',
      start  : '2010-01-09T12:30:00',
      allDay : false // will make the time show
    }
  ]
2
javascriptjqueryjsonajaxfullcalendar
if (according to your question text) Console.log(doc): already produces a valid event array then why are you creating a separate events variable? And if doc is indeed a JSON array then it won't have any attributes. Are you getting confused by the example from the fullCalendar docs which shows how to process an XML response (not a JSON response)? You pass events to fullcalendar, so what does console.log(events); output? – ADyson
You may find that simply writing success : function(doc) { callback(doc); } works without needing any further processing. – ADyson
Hi @ADyson , thank you for your contribution! Yes, as your sharply noted I am confused by the example provided by fullCalendar. console.log(events); gives an empty array. – Ronnie Oosting
Ok so have you tried simply success : function(doc) { callback(doc); } as I suggested? I strongly suspect that may be all you need to do. – ADyson
@ADyson, it just working. callback(doc); did it for me. Thank you so much! Please provide the solution (and if possible with explanation and documentation) as an answer. – Ronnie Oosting

2 Answers

1
votes

You can do like below : 

$('#calendar').fullCalendar({
    events: {
               url: "<?php echo Yii::getAlias('@COMPANY_URL') . '/shedule/get_event' ?>",
          }
});

In the dispatcher.php you have to generate json like below format 

   [
    {
      title: 'Event Title1',
      start: '2015-03-17T13:13:55.008',
      end: '2015-03-19T13:13:55.008'
    },
    {
      title: 'Event Title2',
      start: '2015-03-17T13:13:55-0400',
      end: '2015-03-19T13:13:55-0400'
    }
  ]

In my controller did like this : 

public function actionGet_event() {

        $events = Shedule::find()->all();
        $eventsJson = array();
        foreach ($events as $event) {
            $url = "https://www.google.co.in/";
            $eventsJson[] = array(
                'description' => $event->event_desc,
                'title' => $event->event_title,
                'start' => $event->event_date,
                'edit' => $url,
                'className' => ["event", "bg-color-greenLight"],
                'icon' => 'fa-check',
            );
        }
        echo json_encode($eventsJson);
    }
1
votes

According to your question text console.log(doc) already produces a valid event array (with valid values and field names as per the fullCalendar documentation of an event object), so you should not need to create a separate events variable, or indeed process doc in any way at all.

Instead you can simply pass the data directly to fullCalendar without doing anything to it:

success : function(doc) { 
  callback(doc); 
}