Hi, I need to change the created lightbox events to read-only mode.
i’m using the following version: 5.3.13
Scope: Behind there are user groups that can create, modify and cancel the events, and the other user groups just read it without modifying, adjusting or canceling.
Unfortunately, i have not found the code behind or the option to change it to read-only.
You can make the lightbox readonly for some users using the dhtmlxscheduler_readonly extension, the onBeforeLightbox/onAfterLightbox events, and the readonly_form = true config.
The thing that you have to do, is to check the active user in the onBeforeLightbox event and make the lightbox readonly/changeable based on the result. The code may look like follows:
scheduler.attachEvent("onBeforeLightbox", function (id){
if(activeUser == 222){
scheduler.config.readonly_form = true;
}
return true;
});
scheduler.attachEvent("onAfterLightbox", function (){
scheduler.config.readonly_form = false;
});
@Siarhei, on top of this, is there also a way to have first read-only access and only for the users who has access to modify it add a edit button ? do you have an example ? thank yo ufor the support
Hello @Siarhei of course I’m so sorry. The example you provided is great! I just wanted to understand if there is the following option available:
Is there any way to have an edit button so that the active user sees in read mode first and then can decide if they want to edit by clicking the edit button.
In the example you gave, I go directly to edit mode as active user. in the documentation, i could not find such an edit/modify button. (see example)
In this case it’s better not to use the readonly extension(as it disables buttons functionality), but the approach with manually hiding/showing buttons through CSS.
In this case, you should add/remove classes(with the display:none or similar) rules for buttons you want to show to hide, like follows:
scheduler.attachEvent("onLightbox", function (id){
if(scheduler.getEvent(id).readonly_event){ // just example of condition
var deleteBtn = scheduler.getLightbox().querySelector('.dhx_delete_btn_set');
deleteBtn.classList.add("lightbox-button-disabled");
}
return true;
});
scheduler.attachEvent("onAfterLightbox", function(){
scheduler.resetLightbox();
});
In case with Edit button, that will allow/forbid editing event it may look like follows:
scheduler.attachEvent("onLightboxButton", function(button_id, node, e){
if(button_id == "edit_button"){
var deleteBtn = scheduler.getLightbox().querySelector('.dhx_delete_btn_set');
var saveBtn = scheduler.getLightbox().querySelector('.dhx_save_btn_set');
deleteBtn.classList.remove("lightbox-button-disabled");
saveBtn.classList.remove("lightbox-button-disabled");
}
});