Full Calendar : Adding time to the calendar's json

Question

I've been using fullCalendar for a while and getting data via json. there is a sample listed below.

[{"id":2,"name":"1","title":"takvim","start":"2009-11-04","end":"2009-11-04"}]

it works fine but I upgraded the new version of the calendar and it has agenda-week view. I need to use grid area(hours there) on agenda-week so my json must be like this.

[{"id":2,"name":"1","title":"takvim","start":"2009-11-04 12:30:00","end":"2009-11-04 13:30:00"}]

In addition if I used the data as static I could use it like this

{ title: 'Meeting', start: new Date(y, m, d, 10, 30), allDay: false }

Unfortunately there is no data to appear when i add time. How do i solve it?

Thank you.

Answer 1

Actually i have the same problem as you. I found that when i use time like 2009-11-04 12:30:00, it doesn't display in the calendar.

While i think there are some useful information here: in http://arshaw.com/fullcalendar/docs/date-utils.php.

I will try to get to it, and if i get the solution. I'll post here.

Answer 2

I solved the problem, Firstly i've taken some code from here and changed. I'm showing it below...

  events: function(start, end, callback) {

   // do some asynchronous ajax
   $.getJSON("aj_calendar_json.asp?rndtime="+new Date().getTime()+"&baseID=<%=baseId%>&depId=<%=depId%>",
     {
       start: start.getTime(),
       end: end.getTime()
     },
     function(result) {

       if(result != null){

        for (i in result) {

         var calEvent = result[i];

         var $startNew = calEvent.start.split("-")
          $sNewYear = parseInt($startNew[0])
          $sNewMonth = (parseInt($startNew[1])-1)
          $sNewDay = parseInt($startNew[2])
          $sNewTime = $.trim($startNew[3])

          if ( $sNewTime != "" ){
           $splitNewTime  = $sNewTime.split(":")
           $sNewTimeHour = $splitNewTime[0]
           $sNewTimeMin = $splitNewTime[1]
          }
          else{
           $sNewTimeHour = 0
           $sNewTimeMin = 0
          }                      

         var $endNew  = calEvent.end.split("-")
          $eNewYear = parseInt($endNew[0])
          $eNewMonth = (parseInt($endNew[1])-1)
          $eNewDay = parseInt($endNew[2])
          $eNewTime = $.trim($endNew[3])

          if ( $eNewTime != "" ){
           $splitNewTime  = $eNewTime.split(":")
           $eNewTimeHour = $splitNewTime[0]
           $eNewTimeMin = $splitNewTime[1]
          }
          else{
           $eNewTimeHour = 0
           $eNewTimeMin = 0
          }                                            

         calEvent.start = new Date( $sNewYear , $sNewMonth , $sNewDay , $sNewTimeHour , $sNewTimeMin )
         calEvent.end  = new Date( $eNewYear , $eNewMonth , $eNewDay , $eNewTimeHour , $eNewTimeMin )

         sNewGetTime  = new Date( $sNewYear , $sNewMonth , $sNewDay)
         eNewGetTime  = new Date( $eNewYear , $eNewMonth , $eNewDay)

         if ( sNewGetTime.getTime() == eNewGetTime.getTime() ){ 
          calEvent.allDay = false
         }

        }
       }

       var calevents = result;

       // then, pass the CalEvent array to the callback
       callback(calevents);

     });

  }

It may look complicated for you, but it works fine, if you've any problem please ask me...

Thank you

Answer 3

Can your figure where is wrong in my code? Thanks.

  events: function(start, end, callback){
   $.getJSON("json_events.php", 
    {
     start = start.getTime(),
     end = end.getTime()
    },
    function(result){
      for(var i=0;i<result.length;i++){
                        var row = result[i];
      //var calevents=result[i];
                        $('#calendar').fullCalendar({id: row[0],title: row[1],start: row[2],end:row[3]});
      //format the result into an array of calevents
      //$('#calendar').fullCalendar('addEvent', {id:row[0], title:row[1], start:row[2], end:row[3]} );
      //then pass the calevent array to the callback
      callback(calevents);
    }
   );
  },

here is how the json displayed.

[{"id":"1","title":"piman","start":"2009-11-04 00:00:00","end":"2009-11-04 16:00:00"},{"id":"2","title":"event2","start":"2009-11-05 00:00:00","end":"2009-11-06 00:20:00"}]

It will be great if you can help me out.

Answer 4

Your code is okey but I should point out that there is no way to reach the json's code to hour:min values. At least i couldn't handle it. Basicly how javascript Date object works?

var $date = new Date(Year,months,day,hour,min,sec) and  in calendar works like this

{
    title: 'Lunch',
    start: new Date(y, m, d, 12, 0),
    end: new Date(y, m, d, 14, 0),
    allDay: false
   },

so you should split your values then can obtain every date object. Also you should change your json code like this.

[{"id":"1","title":"piman","start":"2009-11-04-00:00:00","end":"2009-11-04-16:00:00"}]

There may be easier way but as you know documentation is so poor. But it works fine that style you may want to use it...

Cheers

Answer 5

Thanks a lot, I follow your method and it displays the date. but the date is not right. Whatever the day it is, the hour is always 12:00 am.

Answer 6

im also having this problem but i found an easier solution in php json try the following code

$startdate='Nov 11 2009 10:10:00';

$enddate='Nov 11 2009 12:10:00';

then in your array

'start' => "$startdate", 'end' => "$enddate",

and that's it