Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by mahesh on Nov 17, 2009 22:13
open dhtmlx forum
dhtml scheduler access based on user

Is there a way to make the schedular not display the following months events until 1-2 weeks prior to the end of the month. This way folks can edit the following month in a prelimary fashion until it is actually ready to "publish".
Answer posted by Stanislav (support) on Nov 18, 2009 01:44
scheduler.attacEvent("onEventLoading",function(ev){
   if (ev.start_date.valueOf() - (new Date()).valueOf() > 60000*60*24*30) return false;
   return true;
})

with above code, scheduler will ignore any events, during loading, which starts after 30 days after current date
Answer posted by mahesh on Nov 18, 2009 09:11

Thanks Stan but:

The provided solution is close, but Is there a way to not display events aside from the current month (and prior to this is ok) till say 14 days before the next month starts?  We do our calendars on a monthly basis, so a 30 day window from the current date is not so ideal.

Answer posted by Stanislav (support on Nov 19, 2009 05:59
If I understood correctly, it can be resolved with a bit of math

var mode = (new Date()).getDate() > 18; //less than 2 week until month end
var max_date = scheduler.date.add( scheduler.date.month_start(new Date()), (mode?2:1), "month");

scheduler.attacEvent("onEventLoading",function(ev){
    if (ev.start_date.valueOf() > max_date.valueOf()) return false;
        return true;
})
Answer posted by mahesh on Nov 19, 2009 16:36

Stan,

1. I think there is a typo where

scheduler.attacEvent("onEventLoading",function(ev{  should have 'attacEvent' as 'attachEvent'

2.  My goal to to basically not allowing viewing of future events into the next month untill 2 weeks prior to the end of the current  month.

I get a very bizarre looking rendering to the calendar, without months visible.  Here is my script:

function init() {
       
        //scheduler.config.readonly=1;
                //scheduler.config.show_loading=true;


                scheduler.config.time_step = 60;
                     scheduler.config.multi_day=0;
                scheduler.config.xml_date="%Y-%m-%d %H:%i";
                scheduler.config.hour_size_px=75;

                    //change event header for double click -- buggy, ends on disablng day scheduling
                    // event_header_old = scheduler.templates.event_header;
                    //scheduler.templates.event_header = function(start_date,end_date,ev){
                    //if(scheduler._new_event&&scheduler._mode=="month")
                    //return "8:00AM - 9:00AM";
                    // else return event_header_old.apply(this,arguments);
                    //}

           scheduler.config.lightbox.sections=[ 
   {name:"description", height:80, map_to:"text", type:"textarea" , focus:true},
   {name:"location", height:60, type:"textarea", map_to:"details" },
   {name:"time", height:72, type:"time", map_to:"auto"}
  ]
  
                scheduler.config.first_hour=7;
                scheduler.config.last_hour=19;
                scheduler.config.hour_date="%h:%i%A";

             
  scheduler.locale.labels.section_location="Notes";

    //Set time on month view on double click
              var setter = scheduler.form_blocks.time.set_value;
              scheduler.form_blocks.time.set_value=function(node){
              var sels = node.getElementsByTagName("SELECT");
              setter.apply(this,arguments);
              if(scheduler._new_event&&scheduler._mode=="month"){
              sels[0].value =480;
              sels[4].value =540;
                 }
              }
             //Only only 1 month to be seen
           var mode = (new Date()).getDate() > 18; //less than 2 week until month end
var max_date = scheduler.date.add( scheduler.date.month_start(new Date()), (mode?2:1), "month");

scheduler.attachEvent("onEventLoading",function(ev){
    if (ev.start_date.valueOf() > max_date.valueOf()) return false;
        return true;
})

 
  scheduler.init('scheduler_here',null,"month");
  scheduler.load("php/conf_events.php?uid="+scheduler.uid());
  
  var dp = new dataProcessor("php/conf_events.php");
  dp.init(scheduler);

 }
</script>

<body onload="init();">
 <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
  <div class="dhx_cal_navline">
   <div class="dhx_cal_prev_button">&nbsp;</div>
   <div class="dhx_cal_next_button">&nbsp;</div>
   <div class="dhx_cal_today_button"></div>
   <div class="dhx_cal_date"></div>
                        <div style="right:400px;" Conference Schedule</div>
   <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
   <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
   <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
  </div>
  <div class="dhx_cal_header">
  </div>
  <div class="dhx_cal_data">
  </div>  
 </div>
</body>

Answer posted by mahesh on Nov 20, 2009 10:24

I did get the calendar to render, but the suggested revision did not stop events from the following month to be displayed. Script follows:

 

<script type="text/javascript" charset="utf-8">
 function init() {
       
        //scheduler.config.readonly=1;
                //scheduler.config.show_loading=true;


                scheduler.config.time_step = 60;
                     scheduler.config.multi_day=0;
                scheduler.config.xml_date="%Y-%m-%d %H:%i";
                scheduler.config.hour_size_px=75;

                    //change event header for double click -- buggy, ends on disablng day scheduling
                    // event_header_old = scheduler.templates.event_header;
                    //scheduler.templates.event_header = function(start_date,end_date,ev){
                    //if(scheduler._new_event&&scheduler._mode=="month")
                    //return "8:00AM - 9:00AM";
                    // else return event_header_old.apply(this,arguments);
                    //}

           scheduler.config.lightbox.sections=[ 
   {name:"description", height:80, map_to:"text", type:"textarea" , focus:true},
   {name:"location", height:60, type:"textarea", map_to:"details" },
   {name:"time", height:72, type:"time", map_to:"auto"}
  ]
  
                scheduler.config.first_hour=7;
                scheduler.config.last_hour=19;
                scheduler.config.hour_date="%h:%i%A";

             
  scheduler.locale.labels.section_location="Notes";

    //Set time on month view on double click
              var setter = scheduler.form_blocks.time.set_value;
              scheduler.form_blocks.time.set_value=function(node){
              var sels = node.getElementsByTagName("SELECT");
              setter.apply(this,arguments);
              if(scheduler._new_event&&scheduler._mode=="month"){
              sels[0].value =480;
              sels[4].value =540;
                 }
              }
//Restrict calendar to current month until 2 weeks prior to month end

var mode = (new Date()).getDate() > 18; //less than 2 week until month end
var max_date = scheduler.date.add( scheduler.date.month_start(new Date()), (mode?2:1), "month");

scheduler.attachEvent("onEventLoading",function(ev){
    if (ev.start_date.valueOf() > max_date.valueOf()) return false;
        return true;
})

 
  scheduler.init('scheduler_here',null,"month");
  scheduler.load("php/conf_events.php?uid="+scheduler.uid());
  
  var dp = new dataProcessor("php/conf_events.php");
  dp.init(scheduler);

 }
</script>

<body onload="init();">
 <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
  <div class="dhx_cal_navline">
   <div class="dhx_cal_prev_button">&nbsp;</div>
   <div class="dhx_cal_next_button">&nbsp;</div>
   <div class="dhx_cal_today_button"></div>
   <div class="dhx_cal_date"></div>
                        <div style="right:400px;color:red;">ADMIN MODE: Conference Schedule</div>
   <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
   <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
   <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
  </div>
  <div class="dhx_cal_header">
  </div>
  <div class="dhx_cal_data">
  </div>  
 </div>
</body>

Answer posted by mahesh on Nov 23, 2009 08:19
Any additional help would be appreciated.  I cannot figure this problem out at the moment.  Thanks,
Answer posted by Alex (support) on Nov 24, 2009 07:40

Hello,

we have tested the code. The same approach as we recommend before works correctly.

Please check attached sample. 

Attachments (1)
1259076918.zip37.55 Kb
Answer posted by mahesh on Nov 24, 2009 08:24

Alex,  thanks, let me test it out:  Kind of hard to test.

Can you explain what

var mode = (new Date(2009,10,1)).getDate() > 18  and   (mode?2:1) do

 

Answer posted by mahesh on Nov 24, 2009 17:13

Alex,

  Thanks, some major progress.  One error was having your code prior to the scheduler loading of events. After fixing this, the code partially worked.  For Nov, I am now 2 weeks before month end and Dec events are not being displayed.  I guess I need an alorighm that sets max_date to the end of the month, either the current month if it is yet two weeks before the end of the month, or the end of the following month if it is less than two weeks.  Does that make any sense?

   -Mahesh

Answer posted by Alex (support) on Nov 25, 2009 06:33

>> var mode = (new Date(2009,10,1)).getDate() > 18

this is just the example of usage. Mode is true if date is in 2 last weeks on a month.

>> (mode?2:1)

add method is private. Its second parameter is increase according to mode:

scheduler.date.add(some_date,1,"month") returns date increased by one month.

 

Answer posted by mahesh on Nov 28, 2009 13:30

Alex,

I guess I am still somewhat puzzled, although feel much closer to a solution, but it remains elusive. The sample  was quite helpful as it showed one major error, but (now that we are 2 weeks from the end of the month) fails to show december events.  Is the new Date(2009,10,1) meant only for the month of october?

I think the math formula I need is:

1. Get current date.

2. Is current date within last two weeks of current month?  If FALSE, show all past and current events till end of current month:  var_max_date= [last day of current month].

3. If TRUE, show all past and current events till end of next month:  var_max_date=[last day of next month].

So, basically I need to set var_max_date correctly.

Can you possibly help with this?

 

Answer posted by Alex (support) on Nov 30, 2009 05:34

According to your description the approach should be the following:

var mode = (new Date()).getDate() > 18;
var max_date = scheduler.date.add( scheduler.date.month_start(new Date()), (mode?2:1), "month");
  
scheduler.attachEvent("onEventLoading",function(ev){
  if (ev.start_date.valueOf() > max_date.valueOf()) return false;
  return true;
})  

This event handler should be set before xml loading.

Answer posted by mahesh on Nov 30, 2009 09:27

Alex,

  Thanks, I will try it soon.  How did you get the number 18?  What if I want only 1 week instead of 2 weeks would the number then be 9?

 

Answer posted by mahesh on Nov 30, 2009 11:15

Still seems to fail.    I tried moving this block of code before init and load, between, and after.  Events into January are now visible. 

I am doing a mySQL load via php connector and not using an XML database.  Could this be the problem?

Answer posted by Alex (support) on Dec 01, 2009 03:08

>>I am doing a mySQL load via php connector and not using an XML database. Could this be the problem?

No, it couldn't

>>   I tried moving this block of code before init and load, between, and after.

Should be set before scheduler.load(...) method is called.

Answer posted by mahesh on Dec 01, 2009 09:22

Alex,

  Thanks, greatly appreciated.  Putting it before scheduler.init seems to work, although I will need to test.   Once again, if I want to do 1 week before month end should I use 9 instead of 18?  I think the specific  question is how did you select 18 to represent 2 weeks as I think of it as 14 days?

Answer posted by Alex (support) on Dec 01, 2009 09:28

You can use any necessary number instead of 18 (it was just an example):

var mode = (new Date()).getDate() > month_day;

Answer posted by mahesh on Dec 01, 2009 18:07

Alex,

  What does the number 18 mean?  i.e. does this mean 18 days from end of month, or everything past the 18th day of the month?  Specifically, I do not understand how this translate this to last two weeks of month which is 14 days, and how to change this number to be represent say the last week of the month?

Answer posted by Alex (support) on Dec 02, 2009 00:53

18 was an example for october 2009: last 2 weeks of that month started from 19th

>> Specifically, I do not understand how this translate this to last two weeks of month which is 14 days, and how to change this number to be represent say the last week of the month?

Unfortunately we can't provide you a ready solution.

Answer posted by mahesh on Dec 02, 2009 08:08

Alex,

  Thanks, that is the piece of data I was missing.  I should be able to take it from there.