Our powerful JS Calendar component


Post by zveljkovic »

Hello,
Can we get a small tutorial on how to create, register and use custom widget. For example I would like to change viewDescription tbar widget to include the number of shown events next to dates

In weekly view example, i would like to have it display "1. jan 2020 - 7. Jan 2020: 7 total events".

Thanks,
Zed


Post by zveljkovic »

Also if we can get a small tutorial on how to create custom CalendarView that would be awesome!


Post by mats »

Also if we can get a small tutorial on how to create custom CalendarView that would be awesome!

Please describe with a bit more detail, what you mean by a "custom CalendarView". What are you looking to customize?


Post by zveljkovic »

I would like to create a view like this Image but to keep monthly and daily views like they are.

I figured that if I call

Calendar.Modes.register('shiftview', ZeroCalendarShiftView);

I can use custom

export class ZeroCalendarShiftView extends CalendarPanel {

to get new view in addition to existing Day, Week, Month, Agenda views when I supply modes parameter of Calendar with 'shiftview' property.
This is all undocumented and given that trial version is encrypted, not easiest to figure out how can I render the days/events in a format that suites required designs.


Post by mats »

Ok to get that type of view, you should use our Scheduler. The Calendar is more of an Outlook / Google calendar style component for few resources. Whereas multiple resources are better managed using our Scheduler product: https://bryntum.com/examples/scheduler


Post by zveljkovic »

We will consider using Scheduler, but we also have other views like Image or Image which are more suited for the Calendar component.

Anyway, can you explain what is the process to create custom views in Calendar component?


Post by mats »

Sounds like you'd need both Scheduler + Calendar then to get both type of views.

To customize the calendar event bar rendering, you can have a look at our example: https://www.bryntum.com/examples/calendar/custom-rendering/

Other than that your screenshots look very close to our out of the box week / day views. Just some CSS polishing to get the colors you need.


Post by zveljkovic »

Thank you for informing me about the Scheduler, but I would like to continue with custom Calendar view.

I have succeeded in getting a new view created and assigned as above, I have connected with listener to 'change' event on eventStore with

export class ZeroCalendarShiftView extends Grid {
  ...
  constructor(arg: {
    allowOverlap: boolean;
    autoCreate: { newName: string };
    beforeConfigure: Function;
    date: Date;
    dateFormat: string;
    project: ProjectModel & ProjectModelMixin;
    readOnly: boolean;
  }) {
  ...
  arg.project.eventStore.on({
      change: function (a: any) {
        self.data = a.data;
      },
    });
  

and I am able to populate the Grid component with data.
Image

  1. When I select this custom view, back and forward buttons are disabled. What I need to implement on the component to allow it to change dates?
  2. How can I react to date change?

Post by Animal »

The next and prev buttons are disabled if the active view does not have a property stepUnit.

It looks like in your case that should yield "week".

When clicked, these buttons call methods called "previous" and "next" on the active view. The view's implementation MUST include these methods.

A view MUST also implement startDate and endDate properties. These may be read-only to indicate the range that the view is looking at.

It MUST implement a read-write property called date. When that is set, the view should move to encompass that date.

So in your case, your view should move to the week that contains that date. From then, the startDate and endDate properties should yield new values.

The Calendar container will set the active view's date property when the sidebar date picker is used.

I will add some documentation for this to allow power users to do things like you are doing and add custom views.


Post by zveljkovic »

This works, thank you for the help!


Post Reply