Our pure JavaScript Scheduler component


Post by tlapeg07 »

Hello,

I'm trying to display custom events within a scheduler so that :
- when we edit an existing event, we can see its additional attribute displayed within a combo list initialized at its value.
- when we create a new event, it's additional attribute is displayed within a combo list initialized at a specific default value.

For example, this additionnal attribute could be the kind of the event (meeting, phone, mail or default).

I had a look at your example https://www.bryntum.com/examples/scheduler/eventeditor/
But I could not make it work on my project.

Here is what I've done :

Event extending EventModel :
import {EventModel} from 'bryntum-scheduler';

export class Event extends EventModel {

  static get fields() {
    return [
      {
        name: 'id',
        dataSource: 'id',
        type : 'number'
      },
      {
        name: 'type',
        dataSource: 'type',
        type : 'string',
        defaultValue : 'default'
      },
      {
        name: 'resourceId',
        dataSource: 'resourceId',
        type : 'number'
      },
      {
        name: 'name',
        dataSource: 'name',
        type : 'string'
      },
      {
        name: 'startDate',
        dataSource: 'startDate',
        type : 'date'
      },
      {
        name: 'endDate',
        dataSource: 'endDate',
        type : 'date'
      },
      {
        name: 'eventColor',
        dataSource: 'color',
        type : 'string'
      }
    ];
  }
}


Scheduler creation, based on newVal, an instance of my Schedule class :
const scheduler = new Scheduler({
          // Basic GUI
          appendTo: 'container',
          minHeight: window.innerHeight * 0.75, 
          viewPreset       : 'hourAndDay',

          // Data
          startDate        : new Date(newVal.startDate),
          endDate          : new Date(newVal.endDate),
          resources        : newVal.resources,
          events           : newVal.events,

          // GUI configuration
          columns : [
            { type: 'resourceInfo', text : 'Name', field : 'name', width : 150, showEventCount : false, showRole : true }
          ],
          features : {
            eventEdit  : {
              // Add extra widgets to the event editor
              extraItems : [
                {
                  type  : 'combo',
                  name  : 'type',
                  label : 'Type',
                  index : 1,
                  items : newVal.types,
                  value : 'default'
                }
              ]
            }
          }
        });
Schedule class :
import {Event} from './event';
import {Resource} from './resource';

export class Schedule {

  public types: string[];

  constructor(public events: Event[], public resources: Resource[], public startDate: Date, public endDate: Date) {
    this.types = [];
    events.forEach( (event, index) => {
      if ( ! this.types.includes(event.type, 0)) {
        this.types[this.types.length] = event.type;
      }
    });
    this.types[this.types.length] = 'default';
  }

}

Could you please help me fixing this ?
Thank you in advance,
Regards,

Edit : It is a data problem. Actually, if i edit an existing event before creating a new event, then the new event will take the type of the event I've edited before. Even worse, if I go back to the event I've edited to change its type, it will also change the type of the newly created event !! So obviously, data are not saved as I thought. Does it come from the crud manager?

Post by Maxim Gorkovsky »

Hello.
Please provide runnable test case and we will assist you.

Post by tlapeg07 »

Please find attached a simple project to import.
The bryntum library is missing, it was too big to be attached.

Thank you in advance!
Regards
Attachments
example.zip
(108.5 KiB) Downloaded 129 times

Post by pmiklashevich »

I got you sample running and see type field which is TEI/MAIL/AUTRES. What exactly should I check? What doesn't work? Please provide clear instructions.

Pavlo Miklashevych
Sr. Frontend Developer


Post by tlapeg07 »

Hello,

Follow these steps to reproduce the error :

1) Double clic on the first event (let's called it event A) to see its type (let's say it's TEL) and then close the edit window without doing any change.
2) Right clic on the scheduler to create an event.

=> The first problem is that the type is already filled with TEL instead of the default value.

3) Create an event with type TEL (let's say it's event B)
4) Double clic on event A to edit its type from TEL to MAIL.
5) Double clic on event B, you'll see that its type is now MAIL

=> The second problem is that event B was TEL and it should not have changed when we changed event A.

Thank you in advance!!

Regards

Post by pmiklashevich »

Yes, I see both issues in your application.

First I'd like to recommend you to remove "dataSource" when it matches "name" in example/src/app/data/event.ts
import {EventModel} from 'bryntum-scheduler';

export class Event extends EventModel {

  static get fields() {
    return [
      {
        name: 'id',
        type : 'number'
      },
      {
        name: 'type',
        type : 'string',
        defaultValue : 'AUTRES'
      },
      {
        name: 'resourceId',
        type : 'number'
      },
      {
        name: 'name',
        type : 'string'
      },
      {
        name: 'startDate',
        type : 'date'
      },
      {
        name: 'endDate',
        type : 'date'
      },
      {
        name: 'eventColor',
        dataSource: 'color',
        type : 'string'
      }
    ];
  }
}
Second, in example/src/app/views/scheduler/scheduler.component.ts you need to set modelClass to your Event Store. Instead of setting scheduler.events config, please set scheduler.eventStore. And it's not required to create instances of your models, you can use json.events array and pass it to eventStore.data config:
      // events           : myEvents,
      eventStore       : {
        modelClass : Event,
        data : json.events
      },
Best regards,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by tlapeg07 »

Hello,

It works !
Thank you very much :)

Post Reply