Mini calendar - created lightbox events - change to read only modus

Scheduler Javascript
#1

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.

thank you for all your comments and support.

dhtmlx
dhtmlx3408×1160 121 KB

https://docs.dhtmlx.com/scheduler/samples/05_calendar/03_in_form.html

#2

Hello @jamesmatters ,

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;
});

Here is a demo:
https://snippet.dhtmlx.com/5/7b3dfb656

1 Like
#3

Thank you for the support!

#4

@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

#5

Hello @jamesmatters ,

Maybe I don’t fully understand the question, but the following demo does exact the requirement:
https://snippet.dhtmlx.com/5/7b3dfb656

As the event is readonly for users who have no access to modify the event and vice versa?

Could you please clarify the required logic of usage, with some examples, screenshots, more details?

#6

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)

mini_calendar_editbutton
mini_calendar_editbutton2080×1372 172 KB

Of course, the inactive user always has read-only access.

thank you for your support

#7

Hello @jamesmatters ,

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");
  }
});

Here is a demo(open the readonly event, and click the Edit button):
https://snippet.dhtmlx.com/5/bc4cff3b4

Kind regards,