Scheduler issues: events shortened by a day and few more...

AdamV · May 16, 2012, 1:53pm

Hi,

I am trying to use a custom form for the scheduler project to add new event (actually a holiday). I am using a form attached to dhtmlxWindow since I need to use a calendar input with dates only (no time required) and that is not possible to do with the regular lightbox feature I assume.

I use database to store the events data.

Trying to accomplish all that I experience a few issues here:

When new event is created (for example a holiday starting May 1st, 2012 and ending May 3rd, 2012) it is displayed on the scheduler correctly and saved to the db. After page reload/refresh, when the data is being loaded from db to the scheduler, such events show as shorter of one day (in our example, as a holiday between Mat 1st and May 2nd). Am I doing something wrong here or there is a bug there?
When I double click on the scheduler the window pops up with the new event form. At the same time, in the background, at the date that the double click has been made, a new event header appears as “00:00 New event”. Even if the form is canceled or windows closed without saving a new event, the notification of “00:00 New event” stays on that day in the schedule. It is (in the current shape of my code) not being saved to the database and dissappears when the scheduler is reloaded, but I would prefer not have it at all.
Using of scheduler.startLightbox and schedxuler.endLightbox confuses my code - it causes additional problems with displaying dhtmlxWindow as a modal and errors appearing in the Firefox console. I believe I am doing something wrong here but not sure what.

I am attaching a full demo including database sql file.
demo.rar (1.32 MB)

Ilya · May 18, 2012, 3:52pm

Hello,

Thank you for providing complete sample.

Let’s see.

scheduler.addEvent( vacForm.getItemValue( "timeStart" ) ...

Actually at this point you get not a simple date - it also have hour and minutes set up.
For example you create event and specify 1 May as start date and 2 May as end date. And with the above code you would save something like
1 May 15:45 - 2 May 15:45. And this event would be displayed as taking place on two days. After saving and refresh that extra time information would be cut off and event would be displayed correctly.
So how can we fix it?
var start_date = scheduler.date.date_part( vacForm.getItemValue(“timeStart”) );
Same for end date.

That’s the reason to use startLightbox and endLightbox functions. And the problems you had most likely connected simply to different z-index values. Try lowering it for scheduler’s cover ( .dhx_cal_cover ).

Kind regards,
Ilya

AdamV · May 19, 2012, 2:05pm

Hi Ilya,

Thank you for the tip with z-index, I have modified the dhtmlxscheduler.css file and the class looks now as follows:

.dhx_cal_cover{ width:100%; height:100%; position:absolute; z-index:10; top:0; left:0; background-color: black; opacity:.1; filter:alpha(opacity=10); }
That made the trick and I can use scheduler.startLightbox() and scheduler.endLightbox() calls. That makes the onButtonClick event as follows:

[code] vacForm.attachEvent(“onButtonClick”, function(name, command) {
switch( name ){
case “submit”:
vacForm.validate();
var selectOptions = vacForm.getOptions( “vac_type” );
// I am using the following line instead of the commented code below - what is the difference between the two approaches?
// scheduler.addEvent( vacForm.getItemValue( “timeStart” ), vacForm.getItemValue( “timeEnd” ), selectOptions[vacForm.getItemValue(‘vac_type’)-1].text );

				// the following code does not saves the data into the scheduler nor into the db - what am I doing wrong here?
				var schedulerEvent = scheduler.getEvent( event_id );
				schedulerEvent.text   = selectOptions[vacForm.getItemValue('vac_type')-1].text; // do set this....
				schedulerEvent.name   = "xyz" // set any variable to any value
				schedulerEvent.details = "xyz" // set any variable to any value

// schedulerEvent.value_index = 1;
schedulerEvent.start_date = scheduler.date.date_part( vacForm.getItemValue(“timeStart”) );
schedulerEvent.end_date = scheduler.date.date_part( vacForm.getItemValue(“timeEnd”) );
scheduler.endLightbox( true, win );

				dhxWins.forEachWindow( function( win ){
					win.close();
				});
				break;
			case "cancel":
				scheduler.endLightbox( false, win );
				dhxWins.forEachWindow( function( win ){
					win.close();
				});
				break;
				
			case "save":
				scheduler.endLightbox( false, win );
				dhxWins.forEachWindow( function( win ){
					win.close();
				});
				break;
		}
	});

[/code]

It works perfectly ok with one exception: it does not save the new event data into the database nor it does not display the event bar on the scheduler.

I have checked and the suggested function
scheduler.date.date_part()
does not return only date part of the date - maybe this is the root cause of the event not being saved?

On the other hand I would be happy to use the standard lightbox editor if it is possible to pick a date from minicalendar like in my demo without time pick. Is that doable?

Again, many thanks Ilya!

Adam

Ilya · May 19, 2012, 4:20pm

Hello,

It does return correct value:

var temp_date = new Date(); // right now it would be 2012 05 19 19:18 and seconds var temp_date = scheduler.date.date_part(temp_date); // 2012 05 19 00:00:00

Don’t have your sample set up here but indeed you can use scheduler’s minicalendar to select dates for the time section. Check /scheduler/05_calendar/03_in_form.html sample.

Kind regards,
Ilya

AdamV · May 19, 2012, 5:51pm

Hi Ilya,

Thank you for the prompt response.

Let’s forget about minical for a while - the sample does not work for me (well it works, but there is no popup calendar in the lighbox).

I would rather stick to the dhtmlxWindow + dhtmlxForm version.

Would you help me to make it working as it is supposed to? What I want to achieve here is:

Fill the form (select the vacation type and pick the dates) then click the most right button to schedule the vacation period - as a result the data from the form (at least the dates) should be placed into the database
Double click on the exisiting event of the scheduler should bring the same form but initially filled with the event data (dates at least) - that might be a tricky thing since I am not sure if there is any way to access form’s input of “calendar” type via lib’s api.

Sounds really basic as for the functionality - but I’m clueless how to achieve those.

Many thanks!

Adam

AdamV · May 22, 2012, 5:10pm

help please?

Ilya · May 23, 2012, 11:52am

Hello,

Then the user clicks the ‘Save’ button you should read values from the form and save to event object. That includes ev.start_date and ev.end_date and then you are ready you should call endLightbox function with ‘true’ as parameter.

Then you double click on the event your showLightbox function is called. There using event properties you should set values to form input and then start lightbox.
To set item value I believe you should use setItemValue function.

Kind regards,
Ilya

AdamV · May 25, 2012, 5:47pm

Thanks Ilya

I must admit I am still a bit confused about the end dates being different.

I need to have a simple vacation planning calendar. So the user who needs to take a holiday break let’s say for two full weeks, will fill the dates as follows:

Start date July 5th, 2012 (first day of vacation)
End date July 18th, 2012 (last day off from work)
After the dates are saved, the scheduler shows a new event starting 05.07.2012 and ending 18.07.2012. The same dates are stored in the database.

However after reloading the scheduler (refreshing the page) the event on the scheduler shows the bar excluding the date of July 18th. Double clicking the event shows the end date correctly as 18.07.2012 but the grahical representation of the event is still one day shorter.

When creating a new event by dragging over the certain days, the lightbox shows an ending date + 1 day comparing to the dragged number of days.

I do not now how to fix It is not really WYSIWYG behaviour.

Is there a way to simply state start date and end date (no hours) and have the event with both dates included?

Ilya · May 29, 2012, 9:44am

Hello,

What you are describing right now is pretty much the same issue in your first post and my answer would be the same as well
If you’ve updated you sample - please attach it.

If you event takes place from 2 May till 5 May it means it is happening (people can participate) on 2, 3, 4. It takes 0 (zero) seconds on 5 May. So it happens till 5 May (not including).
As I understand that’s not expected behavior in your case. You should add another day then saving new event.

Now back to your application. Then you save event you most likely don’t remove hour/minutes information.
So your event appears as 2 May 15:35 - 5 May 15:35. In such case it would be rendered on 5 May including. But then you refresh page time information will be disregarded and event would be displayed correctly. Solution: remove time information before saving event.

Kind regards,
Ilya

AdamV · June 18, 2012, 6:50am

Hi Ilya,

I have managed to successfully get what I needed here. The few lines of settings did the trick:

scheduler.config.event_duration = 1439; scheduler.config.first_hour = 0; scheduler.config.time_step = 1;

Now when user double-clicks the calendar, lighbox shows up with the event starting at 00:00 and ending at 23:59.

The three lines of code do no affect the case when an event is created by click-and-drag - in such case the event always starts at 00:00 on start day and ends at 00:00 on end day + 1.

What I want to achieve is to be able to use event_duration for both cases of creating event or at least be able to recognize an event created by click-and-drag and modify the default ending date and time before the lighbox shows up.

Is that possible?

Thank you very much for your help so far!

Adam