Jump to content

CI + JSON + FullCalendar


Recommended Posts

I'm currently trying to create a JSON feed for FullCalendar using CI. I currently have a working example, but the output doesn't get imported into the calendar. Anyone have any ideas? I've been stuck on this for almost 3 days now..In my controller

	function json()	{  		$data['events'] = $this->events_model->jsonEvents();		header("Content-Type: application/json");		$this->load->view('json', $data);   	}

In my model

function jsonEvents (){	   $this->db->order_by('startDate', 'desc');		$this->db->limit(10);		return $this->db->get('calendar');}   	}

In my view

	 <?php foreach($events->result() as $entry): ?>		  <?php $jsonevents = array(			'id' => $entry->eventID,			'title' => $entry->eventTitle,			'start' => $entry->startDate,			'allDay' => false,			'end' => $entry->endDate		);		echo json_encode($jsonevents);		?>			<?php endforeach; ?>

The corresponding JSON

{"id":"24242","title":"sdfsdfsdfsdf","start":"2011-05-05 13:00:53","allDay":false,"end":"2011-05-06 17:00:19"} {"id":"1234567890","title":"Test","start":"2011-05-05 13:00:53","allDay":false,"end":"2011-05-06 17:00:19"}

The calendar setup

	//Fullcalendar						$('#calendar').fullCalendar({				firstDay:'1',				weekMode:'liquid',				aspectRatio: '1.5',				theme:true,				selectable:true,				editable:true,				draggable:true,				droppable:true,				timeFormat:'H:mm',				axisFormat:'H:mm',				columnFormat:{					month: 'ddd',	// Mon					week: 'ddd dS', // Mon 9/7					day: 'dddd dS MMMM'  // Monday 9/7				},				titleFormat:{					month: 'MMMM yyyy',							 // September 2009					week: "MMM d[ yyyy]{ 'to'[ MMM] d, yyyy}", // Sep 7 - 13 2009					day: 'ddd, MMMM d, yyyy'				  // Tuesday, Sep 8, 2009				},				allDayText:'All Day',				header:{					left:   'prev title next, today',					center: '',					right:  'agendaWeek,agendaDay,month'					},								eventSources: [						// your event source								{						  url: 'http://ravecity.tv/feed/json',						  className:'calendar_magenta'						},						{							url: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',							className: 'calendar_navy'						}													],								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');								// 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;								// 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();				}							}							});				$('ul#calendar_drag_list li a').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				className: 'calendar_black'			};						// 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: 5  //  original position after the drag			});					});

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...