Loading data with Ajax into Scheduler

Scheduler
#1

Hello,

I seem to have a bit of a problem, I am trying to load data from the api, via ajax. The goal is to get an array of users on wich I can select multiple in the lightbox.

I am using Laravel.
I recently did this with help of a mod here in the forums but it was in gannt. I am going to leave my code and see if any of you can help me.

        scheduler.config.first_hour = 6;
        scheduler.config.last_hour = 23;
        scheduler.config.date_format = "%Y-%m-%d %H:%i:%s";
        scheduler.setLoadMode("day"); 
        scheduler.config.details_on_dblclick=true;
        scheduler.config.details_on_create=true;
        scheduler.config.multi_day = true;
        scheduler.config.full_day = true;
        scheduler.locale.labels.section_subject = "Tipo";
        scheduler.locale.labels.section_users = "Colaboradores";
        // scheduler.attachEvent("onEventLoading", function(ev){
        //     ev.color = "#10a131";
        //     return true;
        // });
        scheduler.templates.event_class=function(start, end, event){
			var css = "";

			if(event.subject) // if event has subject property then special class should be assigned
				css += "event_"+event.subject;

			if(event.id == scheduler.getState().select_id){
				css += " selected";
			}
			return css; // default return

			/*
				Note that it is possible to create more complex checks
				events with the same properties could have different CSS classes depending on the current view:

				var mode = scheduler.getState().mode;
				if(mode == "day"){
					// custom logic here
				}
				else {
					// custom logic here
				}
			*/
		};
        scheduler.serverList("users", []); //server list que cria o array com os users
        // Função que irá fazer loop à procura do nome do user que corresponda à fk_tecnico.
            function getUser(fk_tecnico) {
                var users = scheduler.serverList("users");
                for (var s = 0; s < users.length; s++) {
                    if (users[s].key == fk_tecnico) {
                        return users[s].label;
                    }
                }
                return "";
            }
		var subject = [
			{ key: '1', label: 'Férias' },
			{ key: '2', label: 'Ausência' },
			{ key: '3', label: 'Reunião' },
			{ key: '4', label: 'Viagem' }
		];

		scheduler.config.lightbox.sections=[
            { name: "users", height: 25, map_to: "fk_tecnico", type: "select", options:scheduler.serverList("users") },
			{name:"description", height:25, map_to:"text", type:"textarea" , focus:true},
			{name:"subject", height:25, type:"select", options: subject, map_to:"subject" },
			{name:"time", height:72, type:"time", map_to:"auto" }
		];

        scheduler.attachEvent("onAfterLightbox",function(){
        scheduler.clearAll();
            scheduler.init('scheduler_here');
        scheduler.load("/api/events");
        });
       
        scheduler.init("scheduler_here");
        scheduler.load("/api/events", "json"); 
        scheduler.ajax.get("/api/users").then(function(response){

var users = JSON.parse(response.responseText); 
scheduler.updateCollection("users", users);
scheduler.render();
});
        var dp = new dataProcessor("/api/events"); 
        dp.init(scheduler);
        dp.setTransactionMode("REST");
#2

Hi @rafael22,
Did you read our detailed guide, about connecting the scheduler with laravel?
You can read it by the following link:
https://docs.dhtmlx.com/scheduler/howtostart_php_laravel.html
Also, you can download the ready demo from the GitHub:

This is a completed demo, so after installing it last things you will need to do: create a user’s table in the database and load it. After that, you will be able to create the serverList with users, in a similar way as you did in gantt.

Btw, in the code you sent, I see that you are trying to initialize scheduler and reload data after each closing of the lightbox:

    scheduler.attachEvent("onAfterLightbox",function(){
    scheduler.clearAll();
        scheduler.init('scheduler_here');
    scheduler.load("/api/events");
    });

do you have some reason to do that? If you will clarify it, maybe I will be able to suggest a more productive way to reach your goal.

#3

Hello!

Yesterday I got what I wanted by carefully analyzing one of the official snnippets.

The reason I use that is so that the whole events clear and reappear in order for the colors of each to take effect after saving a new event.

#4

Hi @rafael22,
Nice to hear that you solved the problem with loading data from the server.
Regarding reinitializing the scheduler after the lightbox, did you try the scheduler.render() method? It repaints the whole scheduler when called without arguments, here is a link:
https://docs.dhtmlx.com/scheduler/api__scheduler_render.html

#5

Hey!

Thank you for your great and quick response as always!!

I have and it does not achieve what I want, since I am modifying the text in the controller, and it does not appear in the scheduler.

I found that what works for me is the following:

        scheduler.attachEvent("onAfterLightbox",function(){
            scheduler.clearAll();
            scheduler.load("/api/events");
        });

Thank you again!

1 Like