[ANGULAR] Use just Day, Week and Month components

[alexandru_tess]

I integrated the calendar module in the application I'm working on now and I noticed that bryntum imports the entire module that contains the scheduler and many other components that i don't use and it's very large. is there any method by which I can take only the day, week and month components? Or do I need to manually select them from the source code and build only with them?

[marcio]

Hey alexandru_tess,

How are you importing the Calendar package? By day, week, and month components, do you mean DayView, etc? You can have them separately from the angular package

import { DayView } from '@bryntum/calendar';

[alexandru_tess]

Hello marcio,

If i don't import the CalendarModule i receive this error:

1. If 'bryntum-calendar' is an Angular component, then verify that it is included in the '@Component.imports' of this component.

[marcio]

Hey,

Could you please share a runnable example of your project? You could get one of our Angular demos, adapt it to match your configuration, zip it without the node_modules folder, and send it here. It'll be really helpful for us to debug and assist you here.

You can get more info by checking our guidelines here https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

[alexandru_tess]

I use something like this:
HTML:

<bryntum-calendar
  #calendar
  [date]="currentDate"
  [mode]="currentCalendarView"
  [modes]="calendarConfig.modes"
</bryntum-calendar>

TS:

this.calendarConfig = {
   modes: {
     list: false,
     month: {
       animateTimeShift: false,
       autoCreate: false,
       sixWeeks: false,
       showWeekColumn: true,
     },
     week: {
       animateTimeShift: false,
       eventLayout: {
         stretch: true,
       },
       autoCreate: false,
     },
     day: {
       animateTimeShift: false,
       eventLayout: {
         stretch: true,
       },
       autoCreate: false,
     },
   },
   modeDefaults: {
     visibleStartTime: '06:00',
   },
 };

[Animal]

There will be other components in the mix.

Calendar and it's views are all based on the Panel class which extends Container which extends Widget which mixes in the Events mixin so that events can be fired etc.

Panels use Toolbars and Tools and Buttons. The EventEditing obviously uses Popup and the various form fields, and DatePicker. Combo uses the List class as its dropdown.

AgendaView isa Grid, so you will get the Grid and its necessaries in.

The data package is inherited from Scheduler, so there will be a lot of Scheduler.data.* and Scheduler.model.* classes in there.

[alexandru_tess]

Thank you Animal for response. I have the source code of the library and i try to remove all unnecessary code. How i build the lib/Calendar after i finish?

[Maxim Gorkovsky]

If you don't use the bundle and instead import classes from individual source file, only required classes will be included into the app bundle. However, that means you cannot use react component we provide and instead wrap it yourself (which is not complex at all).

[alexandru_tess]

Do you have any example in Angular that creater a simple DayView View withowt importing entire CalendarModule?

[marcio]

Hey,

You can use the wrapper as it's described here https://bryntum.com/products/calendar/docs/guide/Calendar/integration/angular/guide#wrappers

import { BryntumDayViewComponent } from '@bryntum/calendar-angular';

export class AppComponent implements AfterViewInit {
    @ViewChild(BryntumDayViewComponent) dayViewComponent: BryntumDayViewComponent;