using dynamic loading with agenda extension

I’m using dynamic loading since I set load mode to “week”. So when I click on the agenda button nothing happens since agenda view only display events that have been parsed by scheduler.

For example if I open the scheduler today in week mode it displays “26 May 2014 – 1 Jun 2014”. If the user only has events for the 3th, 4th and 5th after clicking on the agenda button they won’t show up, since they weren’t parsed yet in week/month/day view.

So I used the “onBeforeViewChange” event to catch when the user is entering in agenda view to reload the scheduler.

I want to display in agenda view only events from 1 week ahead of the start date displayed in this mode. The problem is that I can’t find the way to set the from & to parameters.

I have been debugging the scheduler._load method and I found that it receives the “from” parameter correctly, but since I was using the week mode, the following line change the “from” value with the one that is defined in the week view (the scheduler doesn’t support an agenda mode):

from = this.date[this._load_mode + "_start"](new Date(from.valueOf()));

I made it work setting load mode to “month” in onBeforeViewChange event (before reloading the scheduler), but I’m retrieving events for 30 days from the DB only to display the ones that belongs to the week set in agenda view. Besides, I give the ability to navigate in agenda view by increments of one day, for example “1 Jun 2014 – 7 Jun 2014” when I click next “2 Jun 2014 – 8 Jun 2014” and so on. The downside is that on every change I’m retrieving events for 30 days, begining with the current start date in agenda view.

// if the user enter the agenda view reload data to be sure all events are going to be displayed scheduler.attachEvent("onBeforeViewChange", function (old_mode, old_date, mode, date) { if (mode === "agenda") { scheduler.setLoadMode("month"); scheduler.config.agenda_start = date; scheduler.config.agenda_end = scheduler.date.add(date, 7, "day"); reloadScheduler(); } return true; });

I also tried setting the scheduler.config.week_start in “onBeforeViewChange” but it didn’t work (seems to be undefined).

How can I achieve this functionality?

Thanks in advance!

Hi,
please try our latest version of the Scheduler. Is the problem fixed?
dhtmlx_scheduler_20140602.zip (534 KB)

No, it didn’t fixed the problem

Hi,
please try following code with the agenda, using the scheduler from the previous attachment:

scheduler.setLoadMode("week"); scheduler.attachEvent("onTemplatesReady", function(){ scheduler.templates.agenda_date = scheduler.templates.week_date; scheduler.date.agenda_start = scheduler.date.week_start; scheduler.date.add_agenda = function(date, inc){ return scheduler.date.add(date, inc, "week"); }; }); scheduler.attachEvent("onBeforeViewChange", function (old_mode, old_date, mode, date) { if (mode === "agenda") { scheduler.config.agenda_start = date; scheduler.config.agenda_end = scheduler.date.add_agenda(date, 1); } return true; }); Are you sure it does not fixes the issue? Locally it seems working as expected

Thanks for your help. It’s almost working as I want, but since with this code agenda start date seems to be synchronized with week start date I can’t navigate in agenda view day by day.

For example:

  1. I open the scheduler (starts in week mode) and it displays “2 Jun 2014 – 8 Jun 2014”

  2. I click on agenda tab and it displays “4 Jun 2014 – 10 Jun 2014” which is correct since today is
    4 of june and I expect to 6 days ahead of the current date. It also queries the database for events between ‘2014-06-09’ and ‘2014-06-16’ since events for the 9th-10th of june weren’t parsed yet. In this case, I think the exact query to the DB should be only betwen ‘2014-06-09’ and ‘2014-06-11’. Besides, events for the 11th are displayed which I think is not correct. Right now is 01:26pm and one event for the 11th at 10:00am is displayed in agenda view. if I move that event to 02:00pm is no longer displayed.

  3. I click on next button and the agenda displays events between “9 Jun 2014 – 15 Jun 2014”. I would like to see events between “5 Jun 2014 – 11 Jun 2014” (the query to the DB is correct: between ‘2014-06-09’ and ‘2014-06-16’ since it’s consistent with the ranges of dates that agenda view displays).

I tried some modifications to the code you kindly provide me, but if I try to avoid that synchronization with the week start date the scheduler doesn’t respond as I expect (next & previous doesn’t work correctly).

What else can I try?

Hi,
try changing methods as following (use ‘day’ as a base time interval for loading and showing dates)

[code]scheduler.setLoadMode(“day”);
scheduler.attachEvent(“onTemplatesReady”, function(){
scheduler.templates.agenda_date = scheduler.templates.week_date;
scheduler.date.agenda_start = scheduler.date.day_start;

scheduler.date.add_agenda = function(date, inc){
	return scheduler.date.add(date, inc, "day");
};

});
scheduler.attachEvent(“onBeforeViewChange”, function (old_mode, old_date, mode, date) {
if (mode === “agenda”) {
scheduler.config.agenda_start = date;
scheduler.config.agenda_end = scheduler.date.add_agenda(date, 5);
}
return true;
});[/code]

I made a slight change in your code in “onBeforeViewChange” replacing 5 with 7 in the next line:

scheduler.config.agenda_end = scheduler.date.add_agenda(date, 7);

After starting the scheduler (opens in week mode):

  1. Displays events between “2 Jun 2014 – 8 Jun 2014”.

  2. I click on “agenda” and it displays “6 Jun 2014 – 12 Jun 2014”. It also request the DB for events between ‘2014-06-09’ and 2014-06-14’ (I think it should be only between 9 and 13).

  3. I click on next and it displays “7 Jun 2014 – 13 Jun 2014”. It queries the DB for events between ‘2014-06-07’ and ‘2014-06-14’ (I think it should be only between 13 and 14).

  4. I click on next and it displays “8 Jun 2014 – 14 Jun 2014”. It queries the DB for events between ‘2014-06-14’ and ‘2014-06-15’. From this point it starts to query the DB just for one day, which is what I would expect.

Anyway is working correctly, although the exactitud to request events to the DB could be improved in steps 2 and 3.

By the way, when working with the new version of the scheduler you provided me it throws an error when trying to delete an event, after clicking on delete:

TypeError: text is undefined in this function:

function button(text, result){ var button_css = "dhtmlx_"+text.toLowerCase().replace(/ /g, "_")+"_button"; // dhtmlx_ok_button, dhtmlx_click_me_button return "<div class='dhtmlx_popup_button "+button_css+"' result='"+result+"' ><div>"+text+"</div></div>"; }

Hi,
thanks for reporting. Probably the issue happens because you have a custom scheduler.locale object (the latest attached codebase defines a couple of new values there, which does not exist in your version).
Please try the fixed version, it should do necessary checking to prevent such errors
dhtmlxScheduler_140609.zip (520 KB)

With the new version of locale_es.js scheduler is working correctly.

Hi Aliaksandr,

Can you please advise what is the best way to be notified when this dev release will be an officially supported release? Is there a certain forum thread, list or RSS?

Barry

Hi,
if you have a license subscription, you’ll get a email notification as soon as it released.
There will be also announcement in our blog, which has an RSS dhtmlx.com/blog/

If you have a GitHub account, you may also watch a public repository of the component. It is already contains the v4.1, but may be updated of there will be any essential fixes before the release github.com/DHTMLX/scheduler