Our powerful JS Calendar component


Post by GabiNucci95 »

Hello!

I'm trying to create new fields on my event creator from Calendar. However, i'm keep getting a deprecated notice from navigator. In the image is the notice.

Configs that i'm using today:

eventEditFeature: {
    // Add extra widgets to the event editor
    extraItems: [
        {
            type: 'text',
            name: 'comments',
            label: 'Comments',
            index: 1
        },
        {
            type: 'text',
            name: 'organizationName',
            label: 'Organization',
            index: 2
        }
    ]
}

How is the new way of creating new fields on calendar?

Attachments
calendar.png
calendar.png (92.21 KiB) Viewed 1916 times

Post by fabio.mazza »

Hi Gabriela,

You can change on https://www.bryntum.com/docs/calendar/#Calendar/feature/EventEdit feature:

const calendar = new Calendar({
    ...
    features : {
        eventEdit  : {
            items : {
                comments : {
                    type: 'text',
                    name: 'comments',
                    label: 'Comments',
                    weight: 0 // move to top as first field
                },
                organizationName : {
                    type: 'text',
                    name: 'organizationName',
                    label: 'Organization',
                    weight: 1 // move to top as second field
                }
            }
        }
    }
});

For Angular, you can try this on calendarConfig.ts:

features: {
    eventEdit: {
      items: {
        comments : {
          type: 'text',
          name: 'comments',
          label: 'Comments',
          weight: 0 // move to top as first field
        },
        organizationName : {
            type: 'text',
            name: 'organizationName',
            label: 'Organization',
            weight: 1 // move to top as second field
        }
      }
    }
  }
  

Best regards,
Fabio


Post by GabiNucci95 »

I tried both ways on calendar-config, however i't didn't work. :(


Post by fabio.mazza »

Hi Gabriela,

Sorry, on my last answer I wrote some code about React integration, I have edited and fixed it.

But is basically is same thing. You can try on Calendar filtering demo. You have just to change the file Calendar/examples/frameworks/angular/filtering/src/app/calendarConfig.ts line 19 to this:

...
features: {
  eventEdit: {
    items: {
      location: {
        type: 'text',
        name: 'location',
        label: 'Location',
        dataset: { eventType: 'Meeting' }
      },
      comments : {
        type: 'text',
        name: 'comments',
        label: 'Comments',
        weight: 0 // move to top as first field
      },
      organizationName : {
          type: 'text',
          name: 'organizationName',
          label: 'Organization',
          weight: 1 // move to top as second field
      }
    }
  }
}
...

To learn more about Angular integration, here you have a guide in case you didn't read it already: https://www.bryntum.com/docs/calendar/#guides/integration/angular.md

If still doesn't work on your project, please create a basic case test with your problem and post here.

Thank you.

Best regards,
Fabio


Post by GabiNucci95 »

Great, now is not giving me any errors, but I want to know how I call this features on HTML? In the print that i'm sending I don't know what to put to call the features.

Attachments
calendar3.png
calendar3.png (49.52 KiB) Viewed 1891 times

Post by fabio.mazza »

Hi Gabriela, I am not sure what is your request, but to get the feature object with all informations you can use calendar.features.eventEdit.

Best regards,
Fabio


Post by GabiNucci95 »

I'm need to make the fields that I created show on calendar, and I need to insert on HTML the right tag to show this new fields. In the print, you can see the error because I didn't find on the site which tag I need to call on HTML. And the second print I show that the field comments that I created does not show.

Attachments
The print indicating that the field Comments is not implemented.
The print indicating that the field Comments is not implemented.
calendar5.png (25.6 KiB) Viewed 1882 times
The print indicating my code ts, html and the error on HTML.
The print indicating my code ts, html and the error on HTML.
calendar4.png (83.26 KiB) Viewed 1882 times

Post by fabio.mazza »

Hi Gabriela,

To change the content on event you can use renderers. Please take a look on this demo: https://www.bryntum.com/examples/calendar/custom-rendering/

Best regards,
Fabio


Post by GabiNucci95 »

These examples only show how the config.ts is configurated. My problem is how do I enable my config features on the tag <bry-calendar>.

Example:

<bry-calendar>
[features]='calendarConfig.features'
</bry-calendar>

I've tryed this way however the Calendar doesn't know this [features]='calendarConfig.features', I think the way of calling is wrong. The config is right already. But the changes on config.ts file are not showing on the screen.


Post by fabio.mazza »

Please take a look on Angular guide integration, make sure you configure the feature correctly to refer it: https://www.bryntum.com/docs/calendar/#guides/integration/angular.md

Best regards,
Fabio


Post Reply