Howto open the lightbox with a textlink?

Scheduler Javascript
#1

I will create a link (New Event) like:



New event



How can I open the lightbox with a textlink?



#2


The showLightBox(event_id) open details form for a certain event:


Open lightbox

#3

Hi Alex,

When I copy-paste your link, it doesn’t work. Maybe because I have no event_id value?

What did I wrong?

John

#4

Hello John, 

the provided link opens details form for a certain event. You should pass the necessary event id into showLightbox method.

If you want to add event manually, th method addEvent allows to do that. Please, see details about this method in the documentation:

dhtmlx.com/dhxdocs/doku.php? … r_addevent


#5

Hi Alex,

Thanks. I understand your API AddEvent code, but this doen’t open a empty lightbox.

But I’m searching for code that opens a empty lightbox, with default the current date (like the text-hyperlink ‘Create event’ in Google Calendar)…

John

#6

So… you need to make changes in the Description block of the lightbox, don’t you ?

Lightbox can be customized. Please, have a look at the dhtmlx.com/dhxdocs/doku.php? … tails_form article. Here this functionality is described in detail.

#7

I’m afraid you don’t understand me.

1. I’m only searching for the (api) code for a textlink with the sample name “New event”.
2. when anybody clicks on this link, the schedular opens a empty lightbox with default the current date.

#8

But I’m searching for code that opens a empty lightbox, with default the current date (like the text-hyperlink ‘Create event’ in Google Calendar)…
If I understood correctly you need to show lightbox for new event, right?

In such case you can use

var id = scheduler.uid();
scheduler.addEvent({
id:id,
text:“new event”,
start_date: new Date(),
end_date:new Date()
});
scheduler.showLightbox(id);

It will create a new event and will show the details form for it.

#9

Thanks, it works!

#10

uhm, sorry…

It works not correctly.

He inserts a new event in de schedular BEFORE I get the ligtbox.
And then when I type any text in the lightbox and choose a date, he doesn’t save my data when I press Save: nothing happens.


#11

And then when I type any text in the lightbox and choose a date, he doesn’t save my data when I press Save: nothing happens.

what functionality do you use for saving ?

#12

When I paste your code in a function in a default schedular-sample (05_custum_editor.html), I get this “error”:


New event

#13

The “save” functions works, but the event is placed in the schedular, when I press my New Event button and see the ligtbox.

#14


>> The “save” functions works, but the event is placed in the schedular, when I press my New Event button and see the ligtbox.


It seems that everything is correct. So, what’s wrong with it ?

#15

The problem is: When i press on my button New Event, I see the Ligtbox. But when I press Cancel: the event is placed…

Thats the problem: the event is placed, before I can do anything…

#16

Please try to use attached version of js file instead of the original one, it has an extra js command

scheduler.addEventNow();
or
scheduler.addEventNow(new Date(), new Date());

It will create a new event in the same way as it can be done by double-clicking ( it is not saved until form is not closed, and pressing the cancel button in the form will remove it )

dhtmlxscheduler.zip (19.7 KB)

#17

Hi,
I am attempting to achieve this, but am struggling.

I have implemented the code within the following link successfully (Thank you Ilya, greatly appreciated):
viewtopic.php?f=6&t=17603

It appears as follows

[code]
{ name: “ApprovedFields”, height: 20, type:“approved_fields”, map_to:“auto”, ctrlId: “approvedFields”, button:“duplicate” }
];

    scheduler.xy.scale_height = 35;
    
    scheduler.locale.labels.button_duplicate="Duplicate Event";
    
    scheduler.form_blocks["approved_fields"].button_click=function(index, src, sec, data){
             //called on button click
             // index - index of section
             // sec - html element of section header
             // sec - html element of section editor
             
             var event = scheduler.getEvent(scheduler._drag_id);
             
             scheduler.cancel_lightbox();

             var id = scheduler.uid();
             
             scheduler.addEventNow(new Date(), new Date());
             
             var newEvent = scheduler.getEvent(id);
             
             //newEvent.start_date = event.start_date;
             //newEvent.end_date = event.end_Date;
             //newEvent.text = event.text;
             //newEvent.EventName = event.EventName;
             //newEvent.UserId = event.UserId;
            
             scheduler.showLightbox(id);        
    }[/code]

The lightbox is then created just as I wanted it, and seems to appear perfectly, however when it attempts too save the event, it crashes within the collisions script

scheduler.attachEvent("onBeforeLightbox",function(id){
	var ev = scheduler.getEvent(id);
	var start_date = new Date(ev.start_date);

As ev.start_date is null (Unless I set it within the lightbox form). As newEvent is undefined therefore I cannot set any variables for that specific event. any advice would be greatly appreciated.

Kind regards
Greg Goldberg

#18

Hello, Greg.

I believe you wanted to do the following:

var id = scheduler.uid(); scheduler.addEventNow({ start_date: new Date(), end_date: new Date(), text: event.text, eventName: EventName, UserId: UserId, id: id }); scheduler.showLightbox(id);
Best regards,
Ilya

#19

Hi Ilya,

I tried implementing the code as you suggested, which is demonstrated below:

        scheduler.form_blocks["approved_fields"].button_click=function(index, src, sec, data){
            //called on button click
            // index - index of section
            // sec - html element of section header
            // sec - html element of section editor

            var event = scheduler.getEvent(scheduler._drag_id);

            scheduler.cancel_lightbox();
      
            var id = scheduler.uid();
  
            scheduler.addEventNow({
               start_date: event.start_date,
               end_date: event.end_date,
               text: event.text,
               EventName: event.EventName,
               UserId: event.UserId,
               id: id
            });
            
            scheduler.showLightbox(id);

        }

it then failed within dhtmlxscheduler_collision.js on the second line of code within the method shown below (var start_date = new Date(ev.start_date), var ev = scheduler.getEvent(id); resulted in an undefined ev variable)

scheduler.attachEvent("onBeforeLightbox",function(id){
	var ev = scheduler.getEvent(id);
	var start_date = new Date(ev.start_date);
	var end_date = new Date(ev.end_date);
	before = [start_date, end_date];
	return true;
});

Too attempt to resolve this, I changed the code to appear as follows:

        scheduler.form_blocks["approved_fields"].button_click=function(index, src, sec, data){
            //called on button click
            // index - index of section
            // sec - html element of section header
            // sec - html element of section editor

            var event = scheduler.getEvent(scheduler._drag_id);

            scheduler.cancel_lightbox();
      
            var id = scheduler.uid();
  
            scheduler.addEventNow(event.start_date, event.end_date, {
               start_date: event.start_date,
               end_date: event.end_date,
               text: event.text,
               EventName: event.EventName,
               UserId: event.UserId,
               id: id
            });
        }

I do not call scheduler.showLightbox as the lightbox seems to open automatically after addEventNow, and pressing cancel on the ligthbox will still leave the screen grayed out after the lightbox has closed if call showLightbox.

It does not seem to fail within the collision script when using scheduler.addEventNow() with the above syntax, however the data (such as UserId, and the other variables I am attempting too pass in) are not received by the new event (I tested this by placing a breakpoint on this line of code and analysing what data was already in it), with the exception of the start_date and end_date etc. It also seems the event is being added with a new id, not the one being passed in, and no event is created with that id in the scheduler._events array for scheduler.getEvent() to operate against, so the collision script has no way of receiving the event.

Any advice with this would be greatly appreciated.

Kind regards
Greg Goldberg

#20

Hello, Greg.

Try the following:

scheduler.form_blocks.textarea.button_click=function(index, src, sec, data){ var event_data = scheduler._lightbox_out({}); // now event_data is an object with all information entered in the lightbox's fields scheduler.cancel_lightbox(); // closing current lightbox scheduler.addEventNow({ // adding event + opening new lightbox with the the defined values start_date: event_data.start_date, end_date: event_data.end_date, text: event_data.text, EventName: event_data.EventName, UserId: event_data.UserId }); var new_event = scheduler.getEvent(scheduler._lightbox_id); // scheduler._lighbox_id (or scheduler.getState().lightbox_id holds id of an event displayed in the lightbox) // your own logic here };

Indeed showLightbox was not needed there as it opened second lightbox form and this is incorrect.

That’s correct as we were assigning values of the event itself (and it had some default values after it was created) and not the current values entered in the lightbox form. In the example above I show one of the options how to get current values and use them in creation of a new event.

Indeed, we can’t pass id value in the addEventNow function but we can get id of the new event by using scheduler.getState().lightbox_id property.

Hope this helps.

Best regards,
Ilya