Our pure JavaScript Scheduler component


Post by tjmeal »

Hello,

I would like ti implement the following feature in React using const schedulerConfig ={} object > but i have the following problems:

  1. I am not using crudManager
  2. How can i access the scheduler within the onSelect method ?
  tbar: [
    {
      type         : 'combo',
      width        : 300,
      label        : 'Scroll to resource',
      store        : crudManager.resourceStore,
      valueField   : 'id',
      displayField : 'name',
      onSelect({ record }) {
        scheduler.scrollRowIntoView(record, { animate : true, highlight : true });
      }
    },
  ],

Post by ghulam.ghous »

In that case, you can just simply create a resourceStore instance and pass it on both places - to scheduler and to combo. Something like this that I have tried at our online example https://bryntum.com/products/scheduler/examples/basic/:

import { Scheduler, ResourceStore } from '../../build/scheduler.module.js?480175';
import shared from '../_shared/shared.module.js?480175';

//region Data

const
    resources = [
        { id : 'r1', name : 'Mike' },
        { id : 'r2', name : 'Linda' },
        { id : 'r3', name : 'Don' },
        { id : 'r4', name : 'Karen' },
        { id : 'r5', name : 'Doug' },
        { id : 'r6', name : 'Peter' },
        { id : 'r7', name : 'Sam' },
        { id : 'r8', name : 'Melissa' },
        { id : 'r9', name : 'John' },
        { id : 'r10', name : 'Ellen' }
    ],
    events    = [
        {
            id         : 1,
            resourceId : 'r1',
            startDate  : new Date(2017, 0, 1, 10),
            endDate    : new Date(2017, 0, 1, 12),
            name       : 'Click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 2,
            resourceId : 'r2',
            startDate  : new Date(2017, 0, 1, 12),
            endDate    : new Date(2017, 0, 1, 13, 30),
            name       : 'Drag me',
            iconCls    : 'b-fa b-fa-arrows-alt'
        },
        {
            id           : 3,
            resourceId   : 'r3',
            startDate    : new Date(2017, 0, 1, 14),
            duration     : 2,
            durationUnit : 'h',
            name         : 'Double click me',
            eventColor   : 'purple',
            iconCls      : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 4,
            resourceId : 'r4',
            startDate  : new Date(2017, 0, 1, 8),
            endDate    : new Date(2017, 0, 1, 11),
            name       : 'Right click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 5,
            resourceId : 'r5',
            startDate  : new Date(2017, 0, 1, 15),
            endDate    : new Date(2017, 0, 1, 17),
            name       : 'Resize me',
            iconCls    : 'b-fa b-fa-arrows-alt-h'
        },
        {
            id         : 6,
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 16),
            endDate    : new Date(2017, 0, 1, 19),
            name       : 'Important meeting (read-only)',
            iconCls    : 'b-fa b-fa-exclamation-triangle',
            eventColor : 'red',
            readOnly   : true
        },
        {
            id         : 7,
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 6),
            endDate    : new Date(2017, 0, 1, 8),
            name       : 'Sports event',
            iconCls    : 'b-fa b-fa-basketball-ball'
        },
        {
            id         : 8,
            resourceId : 'r7',
            startDate  : new Date(2017, 0, 1, 9),
            endDate    : new Date(2017, 0, 1, 11, 30),
            name       : 'Dad\'s birthday!',
            iconCls    : 'b-fa b-fa-birthday-cake',
            // Custom styling from data
            style      : 'background-color : teal; font-size: 18px',
            // Prevent default styling
            eventStyle : 'none'
        }
    ];

//endregion

const store = new ResourceStore({
    data: resources
})
const scheduler = new Scheduler({
    appendTo         : 'container',
    resourceStore: store,
    // resources,
    events,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    viewPreset       : 'hourAndDay',
    multiEventSelect : true,
      tbar: [
    {
      type         : 'combo',
      width        : 300,
      label        : 'Scroll to resource',
      store        : store,
      valueField   : 'id',
      displayField : 'name',
      onSelect({ record }) {
        scheduler.scrollRowIntoView(record, { animate : true, highlight : true });
      }
    },
  ],
    columns          : [
        { text : 'Name', field : 'name', width : 130 }
    ]
});

https://bryntum.com/products/scheduler/docs/api/Scheduler/data/ResourceStore


Post by tjmeal »

What you send me is an example in pure JS, i asked how to do that in React please.


Post by ghulam.ghous »

Please check the below attached sample app is in react.

react-events.zip
(3.77 MiB) Downloaded 4 times

Post by tjmeal »

Perfect,

Thank you so much.

In case that my schedulerConfig and store is in different files > how can i perform the same actions ?


Post by tjmeal »

Disregard my last question.


Post by tasnim »

Hey tjmeal,

Is your problem solved then?


Post by tjmeal »

Yes i found a solution for that. Is it bad practise to use the following code ?

window.bryntum.query('schedulerpro')

Post by tjmeal »

Yes please close it, we are talking about it in a different thread.

Is there a way for me to mark a solved a ticket i have created ? Or only you can do that ?


Post Reply