Our powerful JS Calendar component


Post by lanpeng »

Hi bryntum team,
If there are multiple event cards at the same time, I expect them to appear on the calendar like the pic's [1] . But sometimes them overlap, it looks like pic' [2] . I hope the event cards don't overlap . Any solution for me?

Attachments
屏幕截图 2022-04-29 100103.png
屏幕截图 2022-04-29 100103.png (136.53 KiB) Viewed 1033 times

Post by alex.l »

Hi lanpeng,

In case 1, all events starts in the same time, as you mentioned. But it's not true for case 2. Layout tries to show as much text as possible, so in case there is some gap between start dates, it's possible to show full sized titles and something else. But not always, only if gap is big enough to see the text. So, it's pretty complex algorithm under the hood.
Why do you need to hide that text with no reason? How will it looks like in case of 4 or 6 events with overlaps?

All the best,
Alex


Post by lanpeng »

In fact, I also think your design logic is correct. Show as much text and other content as possible. It is our product manager's idea to expect that all event cards do not overlap, and in our project, at most two or three events may start at the same time.


Post by lanpeng »

Hi bryntum team
It is possible to configure the display mode of overlapping event cards so that developers can choose the display mode, such as your current display mode, or all event cards on the same day do not overlap and are arranged vertically and in parallel.

Our team still felt that it would look cleaner if all the event cards didn't overlap. As you said, multiple cards in the same time period will make the width of each card very small. Hover over the card so that its width is equal to the width of the cell


Post by alex.l »

It's not supported as you described.
Try to display internal methods in our docs (top right "Show" button) and check properties of https://bryntum.com/docs/calendar/api/Calendar/layout/day/FluidDayLayout class.
As example
https://bryntum.com/docs/calendar/api/Calendar/layout/day/FluidDayLayout#config-clearanceMinutes
https://bryntum.com/docs/calendar/api/Calendar/layout/day/FluidDayLayout#config-escapeMinutes
It won't be fully working as you described here, but you might try to override our algorithm with the behaviour you want.
Example:

const calendar = new Calendar({

eventLayout : {
    clearanceMinutes : 10000
},

All the best,
Alex


Post by lanpeng »

Is eventlayout a class attribute of calendar?
I tried

this.calendar.eventLayout.clearanceMinutes = 100 

.
It dose not work. I'm through

this calendar = this. calendarComponent. instance

to create calendar.


Post by alex.l »

Is eventlayout a class attribute of calendar?

It is.

Please use as initial config, clearanceMinutes is a config and cannot be changed at runtime.

All the best,
Alex


Post by lanpeng »

Hi alex
That's what I did
..html

	<bryntum-calendar style="flex:1;" #calendar [features]='calendarConfig.features' [date]='calendarConfig.date'
    [sidebar]="calendarConfig.sidebar" [modes]='calendarConfig.modes' [tbar]='calendarConfig.tbar'
    [eventLayout]="calendarConfig.eventLayout" (onCatchAll)="onCalendarEvents($event)"></bryntum-calendar>

..ts

const calendarConfig = {
    date: new Date(),
    eventLayout : {
      clearanceMinutes : 100
    },    
... }

Other properties have been set successfully ,except eventLayout


Post by alex.l »

Sorry, that's my mistake. This should definitely be applied to a view and not to full calendar.

export const calendarConfig = {
    // Features named by the properties are included.
    // An object is used to configure the feature.
    features : {
        eventTooltip : {
            align : 'l-r'
        }
    },

date : new Date(2020, 9, 11),

// Modes are the views available in the Calendar.
// An object is used to configure the view.
modes : {
    week : {
        eventLayout : {
            clearanceMinutes : 10000
        }
    },
    year : false
}
};

All the best,
Alex


Post Reply