Time marker

Hi:

Does the mobile scheduler support time marker for the day calendar?

I see it does in your other non mobile calendar.

Also, is there a way to position the day calendar so that the calendar current time slot appears in the center of the calendar?

Thanks Jim

Hi,

could you provide the picture that describes what you meant?

Hi:

The functionality I’m looking for is similar to what iphone day calendar does.

For day calendar it would scroll to the current time and mark the current time with a thin red line.

I’ve attached other posting that discuss similar functionality.

I’ve also attached a pic, that shows the idea.

These setting don’t work, but they seem like they fit what I’m looking for…

    //        scheduler.config.mark_now = true; 
    //        scheduler.config.first_hour = 10;
    scheduler.config.scroll_hour = 10
    scheduler.config.first_hour_view = 10;

viewtopic.php?f=6&t=21211

viewtopic.php?f=6&t=13066

Hope that answers your question…
Jim


Hi,

there is not such a built-in feature. Possibly we’ll add it in the next version. With the existent version you may try appl the approach similar to one I provided to working hours:

viewtopic.php?f=24&t=20324#p70696

You may append the div (marker to the necessary hour item):

var marker; $$("scheduler").$$("dayList").attachEvent("onAfterRender",function(){ var cDate = new Date(); var selectedDate = $$("scheduler").coreData.getValue(); if(dhx.Date.datePart(cDate).valueOf()==dhx.Date.datePart(selectedDate).valueOf()){ showTimeMarker(cDate) } }); function showTimeMarker(date){ var hours, minutes, hourHeight, i,j, nodes, pos; if(!marker){ marker = document.createElement("div"); marker.className = "dhx_today_time"; } hours = date.getHours(); minutes = date.getMinutes(); nodes = $$("scheduler").$$("dayList").$view.firstChild.childNodes; for(i=0; i< nodes.length; i++){ if(nodes[i].className == "dhx_dayevents_scale_item"){ if(!j){ j = i; } if((i-j)==hours){ nodes[i].childNodes[2].appendChild(marker); hourHeight = 30; marker.style.top = nodes[i].offsetTop+hourHeight/60*minutes+"px"; } } } }

The possible css rule (dhx_today_time) for the marker:

div.dhx_today_time { border-bottom: 2px ridge red; position: absolute; width: 100%; }

Hi again:

This is really good stuff. It works just as I would hope.

I’d like to take it one more step.

Now that I’ve marked the current time, I’d like to position the calendar to that time.

So if the current time is 2:00 then 2:00 should show centered in the view. Currently the user is always presented with the day calendar starting a midnight and then must scroll to the current time. I nice usability change.

Any ideas on this?

I have a similar question with positioning on the list view, but I will open another post for that.

Thanks again, really coming along.

Jim

Hi:

I’ve been trying to logon to your member site for the last three days, but it just hangs.

I had this problem once before but the next day I was able to access the site.

Not sure what the issue is.

Anyway, I was going to open a ticket on the positioning of the day calendar to the current time as I described on this post.

I’ve tried getting it to work using the scrollTo(x, y) function, but just haven’t been successful.

Any ideas or example on this. I would think that other would find benifit in this type of functionalty.

Thanks for your help, once again

Jim

In the same function that draws the time marker you may call scrollTo method:

var markerY = nodes[i].offsetTop+hourHeight/60*minutes;
marker.style.top = markerY +“px”;
$$(“scheduler”).$$(“dayList”).scrollTo(0,markerY);

I’m trying to do this for the week view? How should I modify the code you’ve provided?

I’m trying to implement this code but it is not working.

Should I be replacing $$(“scheduler”).$$(“dayList”) with my own variables or should it work like that? Why are there two $$, I’ve only used one before for jQuery…so confused :frowning:

My code…

scheduler.init('scheduler_here',new Date(<?=$show_date?>), "<?echo $loadmode;?>");
		scheduler.setLoadMode("<?echo $loadmode;?>");
		scheduler.load("<?=$__path?>js_2/event_loader.php");
		var dp = new dataProcessor("<?=$__path?>js_2/event_loader.php");
		dp.init(scheduler);

var marker;
scheduler.$("dayList").attachEvent("onAfterRender",function(){
alert(1);
     var cDate = new Date();
     var selectedDate = $$("scheduler").coreData.getValue();

      if(dhx.Date.datePart(cDate).valueOf()==dhx.Date.datePart(selectedDate).valueOf()){
      alert(1);       
showTimeMarker(cDate);
      }
});

function showTimeMarker(date){
      var hours, minutes, hourHeight, i,j, nodes, pos;
      if(!marker){
            marker = document.createElement("div");
            marker.className = "dhx_today_time";
       }
      hours = date.getHours();
      minutes = date.getMinutes();
      nodes = $$("scheduler").$$("dayList").$view.firstChild.childNodes;
      for(i=0; i< nodes.length; i++){
             if(nodes[i].className == "dhx_dayevents_scale_item"){
                   if(!j){
                        j = i;
                   }
                   if((i-j)==hours){
                          nodes[i].childNodes[2].appendChild(marker);
                          hourHeight = 30;
                          marker.style.top = nodes[i].offsetTop+hourHeight/60*minutes+"px";
                    }
              }
        }
}

This solution relates Mobile version of Scheduler:
dhtmlxScheduler_v30_111025/samples/07_mobile/01_init.html

And it seems that you are using desktop version. Here is the sample for time marker in desktop scheduler:

dhtmlxScheduler_v30_111025/samples/02_customization/23_current_time.html

I’m using version 2.3 and it’s been heavily modified so I cannot upgrade to the newer version. How difficult would to be to add the mark now functionality to it?

I tried adding…

var t = new Date;
var A = this.locate_holder_day(t),
B = t.getHours() * 60 + t.getMinutes(),
y = document.createElement(“DIV”);
y.className = “dhx_now_time”;
y.style.top = Math.round((B * 6E4 - this.config.first_hour * 36E5) * this.config.hour_size_px / 36E5) % (this.config.hour_size_px * 24) + 1 + “px”;
b.childNodes[A].appendChild(y)

…to reset_scale, as well as adding the css class but that didn’t work.

Hello,

How exactly it doesn’t work?
Is there a page I can see it live?

In the upcoming version current time will be displayed differently.

Kind regards,
Ilya