Our pure JavaScript Scheduler component


Post by tjmeal »

Hello all,

i am new to your library and i would need some help please.

I am trying to build something similar to this : https://bryntum.com/products/schedulerpro/examples/frameworks/react-vite/drag-unplanned-tasks/dist/

  • As resources i have drivers
  • As appointment i have transportation services
  • On the grid at the right i will have Unassigned services ( which have have 2 types, already booked services and new requests that the user can accept/decline)

To start with i would like you to show me.

  1. How can i categorize at the grid (like Tasks for doctor, tasks for nurse) in my case > Unassigned Booked Services & unassigned Pending requests. On the scheduler i am using websocket connection to fetch data from server ( if you face a problem with the connection, is due to ngrok you have to click on the url presented at the console log, and accept to continue and have access).

The data we fetch from the server on initialisation are the following
a) data.drivers
b) data.transferRequests
c) data.transferDetails

I know that i have to use groupFeature on gridConfig to achieve that. > So what i need is.

a)

data.transferDetails.forEach(transfer => {
        if (transfer.driver) {
          When a transfer has a driver > to add it on the scheduler
        } else if (transfer.operator) {
             we will fix it at a later stage
        } else {
          When a transfer has neither to be added on the grid and create an attribute like : 
             requiredRole=Transfer
        }
      })

b) At the grid we have to add data.transferRequests. > and we have also to create an attribute requiredRole=Request

I tried to create different lists and use those lists at the scheduler but all failed. Can you please help me to get started ?

I am attaching you the project > click login > then go to New Scheduler tab. > I have created some data for you to work but if there are non > please send me an email i will immediately add some.

Also i am attaching a video with the data you suppose to fetch from the servers ( if the lists are empty is does to date time contrains)

Thanks and i am waiting your reply.

Attachments
Screen Recording 2024-10-11 at 00.51.22.mov
(7.53 MiB) Downloaded 5 times
n_travel_web_dash copy.zip
(20.56 MiB) Downloaded 4 times
Screenshot 2024-10-11 at 00.35.22.png
Screenshot 2024-10-11 at 00.35.22.png (118.29 KiB) Viewed 138 times

Post by saki »

Actually, your approach seems to be different from the example you refer to. In the example we use chained store which contains filtered records from the scheduler (project) store – I'd recommend a chained store also in your case.

Otherwise you code looks workable, you bind data to the scheduler correctly so I haven't found any obvious problem with the code. However, I was not able to start your demo app. I tried npm i && npm start which tells me to build the production version but npm run build ends with

npm run build                                                                                                                    1 ↵

> materio-mui-react-nextjs-admin-template@2.0.0 build
> next build

warn  - You have enabled experimental feature (esmExternals) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Linting and checking validity of types ..error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /Users/Shared/data/devel/tmp/n_travel_web_dash copy/.eslintrc.js
info  - Linting and checking validity of types .Failed to compile.

./src/bryntum/configs/Drag.ts:103:55
Type error: Property 'calendar' does not exist on type 'SchedulerResourceModel'.

  101 |             lastAppointmentEndDate          = newStartDate && DateHelper.add(newStartDate, totalDuration, appointments[0].durationUnit),
  102 |             doctor                          = context.target && schedule.resolveResourceRecord(context.target),
> 103 |             calendar                        = doctor?.calendar;
      |                                                       ^
  104 | 
  105 |         if (!calendar) {
  106 |             return;

The general recommendation would be to take the code of the demo and adjust it to your needs. We can also help you to write your application code (which is out of the scope of the forum help). Consult please https://bryntum.com/services/ for all options.


Post by tjmeal »

To run the project, can you please go to src/bryntum and delete all of it, i think i am not using it anywhere. And let me know if it runs or not


Post by saki »

Nope, it did not help; there is other error while running npm run build now. Ideally, the showcase should contain a minimum of code necessary to reproduce the issue and/or exact sequence of steps to reproduce it.

I suppose the issue is you are not getting the (correct) data into scheduler and/or grid, right? This should be easily solvable if I could run the showcase.

A debugging tip could be to run in your browser console:

bryntum.query('schedulerpro').eventStore.toJSON();
bryntum.query('grid').store.toJSON();

You should get arrays of data from the addressed stores. Then you can proceed depending on the content of these arrays.


Post by tjmeal »

Can you please help me how can i access bryntum object pelase ?


Post by tasnim »

Hey tjmeal,

bryntum object is attached to the window object so you should be able to access it on the web.

You can try doing this

window.bryntum.query('grid').store.toJSON();

Post by tjmeal »

Perfect, thank you so much.


Post Reply