Xataface Forums

The calendar view shows event items in the date box of the calendar just fine. However, when the day number itself is clicked, a time line for the day is presented at the right of the calendar from 9AM to 9PM in quarter hour intervals.

The time line shows no entries.

Is there a document somewhere that describes how to populate this timeline with information; adjust the begin and end times and the intervals?

Thanks, Steve

Is it possible that the event falls outside of the 9am to 9pm timeline? This is a bit of a shortcoming currently of the calendar view that the day view only shows events in the timeline. If no time is assigned to an event (i.e. it is only a date) that usually defaults to 12am..

I do have events that start within the time line.

The event date and event time shows in the panel to the right properly when the event itself is selected.

Code: Select all

;; calendar/tables/reservation/fields.ini
[event_date]
        event.date = 1
[event_time]
        event.start = 1


I've narrowed the problem down to the following function in /xataface/js/dfCalendar.js
Unfortunately I'm not very well versed in javascript.

The line in the loop that begins with out += '<div class="jsCalendar-event" ... is where the timeline event text is displayed.

There are two versions of the statement var events = ...
I tried the one that has been commented out and got no timeline display at all.

Is there a glaring error here that I can fix to make this work, or should I just comment out the function and pursue other avenues?

Any \ all help greatly appreciated.

Code: Select all


Dataface.Calendar.prototype.drawDay = function(startHour, endHour, precision){
   if ( !startHour ) startHour = 8;
   if ( !endHour ) endHour = 20;
   if ( !precision ) precision = 1.0;

   var thisDayOfWeek = this.selectedDate.getDay();
   var thisWeeksFirstDay = this.selectedDate.getDate()-this.selectedDate.getDay();
   
   var headings = [];
   
   for ( var i=0; i<Date.daysOfWeek.length; i++){
      var date = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), thisWeeksFirstDay+i);
      headings[headings.length] = Date.daysOfWeek[i]+' '+Date.monthsOfYear[ date.getMonth() ]+' '+date.getDate()+', '+date.getFullYear();
   }
   var out = '<table class="jsCalendar-week"><thead><tr><th></th><th>'+headings[this.selectedDate.getDay()]+'</th></thead>';
   out += '<tbody>';
   var startTimems = this.selectedDate.clone();
   startTimems.setHours(startHour);
   startTimems.setMinutes(0);
   startTimems.setSeconds(0);
   
   var endTimems = this.selectedDate.clone();
   endTimems.setHours(endHour);
   endTimems.setMinutes(0);
   endTimems.setSeconds(0);
   
   //for ( var hour=startHour; hour<=endHour; hour++ ){
   for ( var time=startTimems.getTime(); time <= endTimems; time += (precision*60*60*1000) ){
      
      var startTime = this.selectedDate.clone();
      startTime.setTime(time);
      var minutes = startTime.getMinutes() + "";
      if ( minutes.length == 1 ) minutes = '0'+minutes;
      out += '<tr><th>'+(startTime.getHours())+':'+minutes+'</th>';
      //startTime.setHours(hour);
      //startTime.setMinutes(0);
      //startTime.setSeconds(0);
      
      var endTime = this.selectedDate.clone();
      endTime.setTime(time + (precision*60*60*1000) );
      //endTime.setHours(hour+1);
      //endTime.setMinutes(0);
      //endTime.setSeconds(0);
      
      //var events = Date.events.range(startTime, endTime);
      var events = this.events.range(startTime, endTime);
      out += '<td>';
      for ( var j=0; j<events.length; j++){
         out += '<div class="jsCalendar-event"><a href="javascript:Dataface.Calendar.getInstance(\''+this.id+'\').handleSelectEvent(\''+events[j].id+'\');">'+events[j].title+'</a></div>';
      }
      out += '</td></tr>';
   }
   out += '</tbody></table>';
   
   return out;
};



..Steve

What is the data type of your start and date fields? (E.g. can you post the sql definition of the table)?

Just a simple date and time

Code: Select all


+--------------------------+--------------+------+-----+----------+----------------+
| Field                    | Type         | Null | Key | Default  | Extra          |
+--------------------------+--------------+------+-----+----------+----------------+
| id                       | int(11)      | NO   | PRI | NULL     | auto_increment |
| title                    | varchar(50)  | NO   | MUL | NULL     |                |
| presenter                | varchar(50)  | NO   |     | NULL     |                |
|  :                       |  :           |  :   |  :  |  :       |   :            |
| event_date               | date         | NO   | MUL | NULL     |                |
| event_time               | time         | NO   |     | 10:00:00 |                |
|  :                       |  :           |  :   |  :  |  :       |   :            |


;; calendar/tables/reservation/fields.ini
[event_date]
        event.date = 1
[event_time]
        event.start = 1



Can you set up a minimal test case (SQL table def and field.ini) so I can try to reproduce on my system.

Perhaps tomorrow evening during our snowstorm I can throw something together to test and share.

Thanks for the assisstance.

..Steve

I've stripped my app to the bare minimum and attached a copy. The database file is in the root of the app.

However, now I've noticed what appears to be the issue, but I'm not sure why it's happening. As shown above, I have set the
event.start in the appropriate fields.ini file. When I click a scheduled item on the calendar, it displays the correct event time. Below
the title of the event it says from <date> at 0:0 as shown in the picture below. So it looks like it's not getting the event time properly.
As mentioned earlier, it appears to be set at 12AM.



Xataface 1.2.2

Thanks, Steve S.

I believe I have fixed the problem. Here is the diff. Or you can just replace your files with relevant replacements from SVN (http://weblite.ca/svn/dataface/core/trunk)

Code: Select all

Index: js/dfCalendar-src.js
===================================================================
--- js/dfCalendar-src.js   (revision 1727)
+++ js/dfCalendar-src.js   (revision 1729)
@@ -69,10 +69,10 @@

Dataface.Calendar.Event = function(id, data){
   this.id = 'event-'+Math.random();
-   for ( key in data){
+   for ( var key in data){
      if ( (key == 'date' || key == 'endTime') && typeof data[key] != 'Date' ){
         var d = new Date();
-         d.setTime(data[key]);
+         d.setTime(data[key]+d.getTimezoneOffset()*60*1000);
         data[key] = d;
         
      }
@@ -354,12 +354,23 @@

Date.prototype.asString = function (format){
   var out = format.replace(/%Y/, this.getFullYear());
-   out = out.replace(/%m/, this.getMonth()+1);
-   out = out.replace(/%d/, this.getDate());
-   out = out.replace(/%H/, this.getHours());
-   out = out.replace(/%i/, this.getMinutes());
+   out = out.replace(/%m/, pad(this.getMonth()+1,2));
+   out = out.replace(/%d/, pad(this.getDate(),2));
+   out = out.replace(/%H/, pad(this.getHours(),2));
+   out = out.replace(/%i/, pad(this.getMinutes(),2));
   return out;
};

+function pad(number, length) {
+   
+    var str = '' + number;
+    while (str.length < length) {
+        str = '0' + str;
+    }

+    return str;

+}
+
+
+
Index: js/dfCalendar.js
===================================================================
--- js/dfCalendar.js   (revision 1727)
+++ js/dfCalendar.js   (revision 1729)
@@ -1,9 +1,8 @@
-
if(typeof Dataface=='undefined')Dataface={};Dataface.Calendar=function(id,date){if(!id)id='df-calendar-'+Math.random();if(!date)date=new Date();if(typeof date!='Date'){var d=new Date();d.setTime(date);date=d;}
this.selectedDate=date;this.id=id;Dataface.Calendar.addInstance(this);};Dataface.Calendar.instances={};Dataface.Calendar.addInstance=function(calendar){this.instances[calendar.id]=calendar;};Dataface.Calendar.getInstance=function(id){return this.instances[id];};Dataface.Calendar.prototype={'selectedEvent':null,'selectedDate':new Date(),'defaultStartTime':8,'defaultEndTime':22,'monthPanel':null,'weekPanel':null,'dayPanel':null,'detailsPanel':null,'handleSelectDay':function(date){if(typeof date!='Date'){date=new Date(date);}
this.selectedDate=date;if(this.dayPanel){document.getElementById(this.dayPanel).innerHTML=this.drawDay(9,21,0.25);}},'handleSelectEvent':function(event){if(this.selectedEvent){var eventDiv=document.getElementById('event-preview-'+this.selectedEvent.id);var cls=eventDiv.className;if(!cls)cls='';eventDiv.className=cls.replace(/Dataface-Calendar-selected-event/,'');}
this.selectedEvent=Dataface.Calendar.Event.getInstance(event);if(this.detailsPanel){document.getElementById(this.detailsPanel).innerHTML=this.selectedEvent.showDetails();}
-var div=document.getElementById('event-preview-'+this.selectedEvent.id);var cls2=div.className;if(!cls2)cls2='';if(div)div.className=cls2+' Dataface-Calendar-selected-event';}};Dataface.Calendar.Event=function(id,data){this.id='event-'+Math.random();for(key in data){if((key=='date'||key=='endTime')&&typeof data[key]!='Date'){var d=new Date();d.setTime(data[key]);data[key]=d;}
+var div=document.getElementById('event-preview-'+this.selectedEvent.id);var cls2=div.className;if(!cls2)cls2='';if(div)div.className=cls2+' Dataface-Calendar-selected-event';}};Dataface.Calendar.Event=function(id,data){this.id='event-'+Math.random();for(var key in data){if((key=='date'||key=='endTime')&&typeof data[key]!='Date'){var d=new Date();d.setTime(data[key]+d.getTimezoneOffset()*60*1000);data[key]=d;}
this[key]=data[key];}
Dataface.Calendar.Event.addInstance(this);};Dataface.Calendar.Event.instances={};Dataface.Calendar.Event.addInstance=function(event){this.instances[event.id]=event;};Dataface.Calendar.Event.getInstance=function(id){return this.instances[id];};Dataface.Calendar.Event.prototype={'title':null,'date':null,'endTime':null,'description':null,'url':null,'showDetails':function(){var out='<div "Dataface-Calendar-details">';out+='<h3 class="Dataface-Calendar-details-title">'+this.title+'</h3>';out+='<table class="Dataface-Calendar-details-data"><tbody>';out+='<tr><th>from</th><td>'+this.date.asString('%Y-%m-%d')+' at '+this.date.asString('%H:%i')+'</td></tr>';if(this.endTime){out+='<tr><th>to</th><td>'+this.endTime.asString('%Y-%m-%d')+' at '+this.endTime.asString('%H:%i')+'</td></tr>';}
out+='</table>';out+='<div class="Dataface-Calendar-details-description">'+this.getDescription()+'</div>';out+=' </div>';return out;},'getDescription':function(){return this.description;}};Dataface.Calendar.prototype.events={'list':[],'sorted':false,'add':function(e){this.list[this.list.length]=e;this.sorted=false;},'compare':function(a,b){return(a.date.getTime()<a.date.getTime());},'sort':function(){if(!this.sorted){this.list.sort(this.compare);}},'month':function(date){this.sort();var out=[];for(var i=0;i<this.list.length;i++){var e=this.list[i];if((e.date.getFullYear()==date.getFullYear())&&(e.date.getMonth()==date.getMonth())){out[out.length]=this.list[i];}}
@@ -23,4 +22,5 @@
out+='</tbody></table>';return out;};Dataface.Calendar.prototype.drawDay=function(startHour,endHour,precision){if(!startHour)startHour=8;if(!endHour)endHour=20;if(!precision)precision=1.0;var thisDayOfWeek=this.selectedDate.getDay();var thisWeeksFirstDay=this.selectedDate.getDate()-this.selectedDate.getDay();var headings=[];for(var i=0;i<Date.daysOfWeek.length;i++){var date=new Date(this.selectedDate.getFullYear(),this.selectedDate.getMonth(),thisWeeksFirstDay+i);headings[headings.length]=Date.daysOfWeek[i]+' '+Date.monthsOfYear[date.getMonth()]+' '+date.getDate()+', '+date.getFullYear();}
var out='<table class="jsCalendar-week"><thead><tr><th></th><th>'+headings[this.selectedDate.getDay()]+'</th></thead>';out+='<tbody>';var startTimems=this.selectedDate.clone();startTimems.setHours(startHour);startTimems.setMinutes(0);startTimems.setSeconds(0);var endTimems=this.selectedDate.clone();endTimems.setHours(endHour);endTimems.setMinutes(0);endTimems.setSeconds(0);for(var time=startTimems.getTime();time<=endTimems;time+=(precision*60*60*1000)){var startTime=this.selectedDate.clone();startTime.setTime(time);var minutes=startTime.getMinutes()+"";if(minutes.length==1)minutes='0'+minutes;out+='<tr><th>'+(startTime.getHours())+':'+minutes+'</th>';var endTime=this.selectedDate.clone();endTime.setTime(time+(precision*60*60*1000));var events=this.events.range(startTime,endTime);out+='<td>';for(var j=0;j<events.length;j++){out+='<div class="jsCalendar-event"><a href="javascript:Dataface.Calendar.getInstance(\''+this.id+'\').handleSelectEvent(\''+events[j].id+'\');">'+events[j].title+'</a></div>';}
out+='</td></tr>';}
-out+='</tbody></table>';return out;};Date.prototype.clone=function(){return new Date(this.getFullYear(),this.getMonth(),this.getDate(),this.getHours(),this.getMinutes(),this.getSeconds());};Date.prototype.asString=function(format){var out=format.replace(/%Y/,this.getFullYear());out=out.replace(/%m/,this.getMonth()+1);out=out.replace(/%d/,this.getDate());out=out.replace(/%H/,this.getHours());out=out.replace(/%i/,this.getMinutes());return out;};
\ No newline at end of file
+out+='</tbody></table>';return out;};Date.prototype.clone=function(){return new Date(this.getFullYear(),this.getMonth(),this.getDate(),this.getHours(),this.getMinutes(),this.getSeconds());};Date.prototype.asString=function(format){var out=format.replace(/%Y/,this.getFullYear());out=out.replace(/%m/,pad(this.getMonth()+1,2));out=out.replace(/%d/,pad(this.getDate(),2));out=out.replace(/%H/,pad(this.getHours(),2));out=out.replace(/%i/,pad(this.getMinutes(),2));return out;};function pad(number,length){var str=''+number;while(str.length<length){str='0'+str;}
+return str;}
\ No newline at end of file
Index: Dataface/templates/Dataface_Calendar.html
===================================================================
--- Dataface/templates/Dataface_Calendar.html   (revision 1727)
+++ Dataface/templates/Dataface_Calendar.html   (revision 1729)
@@ -30,7 +30,7 @@
         return '<div id="'+this.record_id+'-description"><img src="'+DATAFACE_URL+'/images/progress.gif" alt="Please wait"></div>';
         
      };
-      var df_calendar = new Dataface.Calendar(null, new Date({/literal}{$currentTime}{literal}*1000+10000000));
+      var df_calendar = new Dataface.Calendar(null, new Date({/literal}{$currentTime}{literal}*1000+90000000));
      {/literal}{$event_data}{literal}
      for ( var i=0; i<events.length; i++){
         df_calendar.events.add(new Dataface.Calendar.Event(null, events[i]));
Index: actions/calendar.php
===================================================================
--- actions/calendar.php   (revision 1727)
+++ actions/calendar.php   (revision 1729)
@@ -45,8 +45,11 @@
      $events = array();
      foreach ( $records as $record){
         $event = $ontology->newIndividual($record);
-         $events[] = array('title'=>$record->getTitle(), 'description'=>$record->getDescription(), 'date'=>strtotime($event->strval('date'))*1000, 'startTime'=>strtotime($event->strval('date'))*1000, 'record_id'=>$record->getId());
+         $datems = strtotime(date('Y-m-d', strtotime($event->strval('date'))))*1000;
+         $timems = (strtotime(date('H:i:s', strtotime($event->strval('start')))) - strtotime(date('Y-m-d')))*1000;
         
+         $events[] = array('title'=>$record->getTitle(), 'description'=>$record->getDescription(), 'date'=>$datems+$timems, 'startTime'=>strtotime($event->strval('date'))*1000, 'record_id'=>$record->getId());
+         
         unset($event);
         unset($record);
      }
@@ -58,6 +61,7 @@
      import('Dataface/ResultList.php');
      $rs = new Dataface_ResultList($query['-table']);
      
+      
      df_display(array('event_data'=>$event_data,'nav'=>&$nav, 'currentTime'=>$startTime, 'filters'=>$rs->getResultFilters()), 'Dataface_Calendar.html');
   }



Thanks for the update!

I applied the patches and now I do see a time listed in the calendar event heading, and the event shows up in day details,
however it is offset by 5 hours. Incidentally, I am 5 hours behind UTC. Is there a timezone setting I need to define somewhere?




I get this response:
The local time zone is: GMT -5
when I execute this code:

Code: Select all

<html><body>

<script type="text/javascript">
var d=new Date()
var gmtHours = -d.getTimezoneOffset()/60;
document.write("The local time zone is: GMT " + gmtHours);
</script>

</body></html>


..Steve

That's interesting... on my local dev version I actually had to put in the timezone offset adjustment or I'd be off in the other direction.... I'll look into this later this week and get back to you.

I went ahead and removed the getTimezoneOffset method call from the following function in dfCalendar.js and
now it works for me.

Code: Select all


Dataface.Calendar.Event = function(id, data){
   this.id = 'event-'+Math.random();
   for ( var key in data){
      if ( (key == 'date' || key == 'endTime') && typeof data[key] != 'Date' ){
         var d = new Date();
         // d.setTime(data[key]+d.getTimezoneOffset()*60*1000);
         d.setTime(data[key]);
         data[key] = d;
         
      }
      this[key] = data[key];
   }
   Dataface.Calendar.Event.addInstance(this);
};



strast wrote:I went ahead and removed the getTimezoneOffset method call from the following function in dfCalendar.js and
now it works for me.

Thanks for posting this solution, strast. I had the same problem as well, and this solved it for me.

I am trying to determine why it was necessary to remove the offset for me and strast, yet having the offset is necessary for shannah. I have checked all the various time zone settings on my system (OS, MySQL, PHP), and they all appear to be correct. The OS is set to EDT, MySQL is set to EDT/SYSTEM, and PHP is set to America/New_York. I have been using Xataface on this system for a long time without experiencing any time zone-related issues, but I only recently started using the calendar action.

Did either of you have a chance to look into this issue further, and did you find an explanation? I would prefer to use the released code rather than keeping track of a modified dfCalendar.js file with each new update.

Thanks,
Alan

The timezone offset likely has some problems.... There reason for it was if the client computer is in a different timezone than the server then javascript will interpret the date differently.

It's been a long time since I've looked at the calendar action, so don't have the details off the top of my head.