Our powerful JS Calendar component


Post by ashokkumar.b »

How to configure settings for adding additional fields to the list view of the calendar, by default which is showing only name, date


Post by Animal »

It's a Grid, so you can use https://www.bryntum.com/docs/calendar/api/Calendar/widget/EventList#config-columns

Note though, that there's a bug in the 4.x version where your columns definitions replace those default columns that you see.

This is fixed in the 5.x line that we are working on, and when that is released, your columns will be merged with the default column set.

For now, you should configure your columns with all the event fields that you wish to see in your grid.


Post by alex.l »

Hi ashokkumar.b,

The content on every view may be customized using custom renderers. We have an example here for every view:
https://bryntum.com/examples/calendar/custom-rendering/

If you meant AgendaView here, it has https://bryntum.com/docs/calendar/api/Calendar/widget/AgendaView#config-eventRenderer

    calendar  = new Calendar({
        crudManager,
        // ...
        
modes : { agenda : { eventRenderer : ({ eventRecord, renderData }) => { // your code here }

All the best,
Alex


Post by Animal »

Yes, that's a point. When you say "list view", do you mean the EventList which is a Grid with columns, or do you mean the AgendaView which is still a Grid, but with only a single column predefined and its column headers hidden?

If you are talking about the AgendaView, then an eventRenderer will only change the contents of the event bar.

AgendaView may also be configured with columns, but as mentioned, the columns configured will replace the column set, so it would need to be something like:

    modes : {
        agenda : {
            columns : [{
                type : 'agendacolumn' // <- we only need to include this in 4.x
            }, {
                text : 'Do you want a column header?',
                field : 'dataFieldName'
            }]
        }
    },

And if you wanted a column header to be visible (which they are not by default in AgendaView), you's also have to configure it with hideHeaders : false

See grid API docs for a columns: https://www.bryntum.com/docs/calendar/api/Grid/column/Column#configs


Post by ashokkumar.b »

I mean EventList , I got it , this is similar to the way mentioned for agenda. Thanks!


Post Reply