Our powerful JS Calendar component


Post by mjeffords1 »

Hello,

I'm trying to accomplish this: (https://bryntum.com/examples/calendar/dragfromgrid) using the Angular framework. Is there a full example somewhere of how to achieve this? The example above is using plain JavaScript. I'm looking for the same example but using Angular components. In the mean time, I'll try and post the relevant code below and wait for a response.

Package.json:

"@angular/core": "~13.1.1",
"@bryntum/calendar": "npm:@bryntum/calendar-trial@^5.0.0",
"@bryntum/calendar-angular": "^5.0.0",
"@bryntum/grid": "npm:@bryntum/grid-trial@5.0.3",
"@bryntum/grid-angular": "5.0.3",

HTML:

<div class="calendar-container" id="bryntum-container" *ngIf="calendarModel && calendarConfig">
  <bryntum-calendar
    #calendar
    [project]     = "calendarModel"
    [config]      = "calendarConfig"
    [crudManager] = "calendarModel.crudManager!"
    (onBeforeEventEditShow)="beforeEventEditShow($event)"
    (onCatchAll)  ="logChanges($event)"
</bryntum-calendar>

  <bryntum-grid
    #grid
    [data]="unplannedEvents"
    [config]="gridConfig"
</bryntum-grid>
</div>

unplanned-events.ts

export const unplannedEvents = [
  {
    id           : 1,
    name         : 'Maintenance',
    //type         : 'Misc',
    duration     : 1,
    durationUnit : 'day',
    iconCls      : 'b-fa b-fa-fw b-fa-cog',
    eventStyle   : 'colored',
    cls          : '',
    exceptionDates: [],
    allDay: false,
    siteId: null,
    resourceId: null,
    startDate: null
  },
  {
    id           : 2,
    name         : 'Cleaning',
    //type         : 'Misc',
    duration     : 1,
    durationUnit : 'day',
    iconCls      : 'b-fa b-fa-fw b-fa-broom',
    eventStyle   : 'colored',
    cls: '',
    exceptionDates: [],
    allDay: false,
    siteId: null,
    resourceId: null,
    startDate: null
  },
  {
    id           : 3,
    name         : 'Receiving',
    //type         : 'Misc',
    duration     : 1,
    durationUnit : 'day',
    iconCls      : 'b-fa b-fa-fw b-fa-book',
    eventStyle   : 'colored',
    cls: '',
    exceptionDates: [],
    allDay: false,
    siteId: null,
    resourceId: null,
    startDate: null
  },
  {
    id           : 4,
    name         : 'Scheduled Downtime',
    //type         : 'Misc',
    duration     : 1,
    durationUnit : 'day',
    iconCls      : 'b-fa b-fa-fw b-fa-calendar-days',
    eventStyle   : 'colored',
    cls: '',
    exceptionDates: [],
    allDay: false,
    siteId: null,
    resourceId: null,
    startDate: null
  },
  {
    id           : 5,
    name         : 'Repairs',
    //type         : 'Misc',
    duration     : 1,
    durationUnit : 'day',
    iconCls      : 'b-fa b-fa-fw b-fa-tools',
    eventStyle   : 'colored',
    cls: '',
    exceptionDates: [],
    allDay: false,
    siteId: null,
    resourceId: null,
    startDate: null
  },
  {
    id           : 6,
    name         : 'Inspection',
    //type         : 'Misc',
    duration     : 1,
    durationUnit : 'day',
    iconCls      : 'b-fa b-fa-fw b-fa-magnifying-glass',
    eventStyle   : 'colored',
    cls: '',
    exceptionDates: [],
    allDay: false,
    siteId: null,
    resourceId: null,
    startDate: null
  }
];

Grid Config:

this._gridConfig = {
      id : 'unscheduled',
      title       : 'Unscheduled Events',
      collapsible : true,
      flex        : '0 0 300px',
      ui          : 'calendar-banner',
      store : {
        //readUrl      : 'assets/data/unplanned.json',
        autoLoad     : true,
        modelClass   : EventModel,
        durationUnit : 'h'
      },

  //stripeFeature : true,
  //sortFeature   : 'name',

  features : {
    sort  : 'name',
    group : {
      field : 'type'
    },
    stripe   : true,
    cellEdit : false
  },

  columns : [
    {
      text       : 'Unassigned tasks',
      flex       : 1,
      field      : 'name',
      htmlEncode : false,
      renderer   : (data: { record: { iconCls: any; name: any; }; }): string => `<i class="${data.record.iconCls}"></i>${data.record.name}`
    },
    {
      text     : 'Duration',
      width    : 100,
      align    : 'right',
      editor   : false,
      field    : 'duration',
      renderer : (data: { record: { duration: any; durationUnit: any; }; }): string => `${data.record.duration} ${data.record.durationUnit}`
    }
  ],

  rowHeight : 50
};

Here is a screenshot of what I have so far, the issue is that clicking on, dragging, and dropping, does nothing as of yet. If you need to see any additional code, please let me know.

Thank you

Screen Shot 2022-05-09 at 6.13.07 PM.png
Screen Shot 2022-05-09 at 6.13.07 PM.png (542.68 KiB) Viewed 1238 times

Post by Animal »

How's the Calendar configured?

It needs

    features : {
        externalEventSource : {
            grid : 'unscheduled'
        }
    }

Post by saki »

There is currently no "Drag from Grid to Calendar" Angular demo but we have drag from grid to scheduler demo: https://bryntum.com/examples/scheduler/frameworks/angular/drag-from-grid/dist/drag-from-grid/

Together with the vanilla code and the above advise, it should be possible to implement it.


Post by Animal »

The drag from Grid into Scheduler is very very different. It uses an older and more complicated drag/drop facility in te framework.


Post by mjeffords1 »

Hello,

The features in my Calendar config already have the externalEventSource property set

this._calendarFeaturesConfig = {
      eventTooltip : this.initEventTooltipConfig(),
      eventEdit    : this.initEventEditConfig(),
      externalEventSource : {
        grid : 'unscheduled'
      }
    };

Post by Animal »

That should work. It should be as simple as that. We need to now somehow get a reproducible case.


Post by mjeffords1 »

This isn't working though. No errors in the console. The drag just simply will not initiate. Any ideas?


Post by alex.l »

Hi mjeffords1,

Please attach a runnable test case of your application. All parts you posted look correct at a first glance, we need to reproduce the problem to get the cause. Just remove "node_modules" folder and zip your application.

Thank you!

All the best,
Alex


Post by saki »

Hello, I have created new Angular demo "Drag from Grid to Calendar" that will be published as a part of next release. If you do not want to wait, download calendar-yyy-mm-dd-release from nightlies of https://customerzone.bryntum.com. Unzip the bundle and in examples/frameworks/angular/drag-from-grid execute npm i followed by npm start.


Post by mjeffords1 »

Saki, thank you so much for doing that! I have a question. I don't see any place where you are importing:

import {BryntumGridModule} from '@bryntum/grid-angular';

Post Reply