Our powerful JS Calendar component


Post by ocratravis »

I have a WeekView. I'm trying to use the eventRenderer() option to override the default positioning of events.

Here's the config that I'm binding to my <bryntum-calendar> component:

const calendarConfig = reactive({
  modes: {
    fourday: {
      title: '4-Day',
      type: 'week',
      range: '4d',
      eventRenderer(foo) {
        foo.renderData.iconCls.add('b-fa-ambulance') // this works
        foo.renderData.eventColor = 'purple' // this works
        foo.renderData.style.fontWeight = 'bold' // this works
        foo.renderData.style.left = '40px' // this does NOT work
      },
    },
  },
})

As you can see, some of my changes to the renderData object are working as expected – but changes to the renderData.style.left property are not.

Why not? Are these values not meant to be manipulated? Is there some other way to accomplish what I'm trying to do?

Thanks.

Last edited by ocratravis on Fri Mar 31, 2023 2:54 pm, edited 1 time in total.

Post by marcio »

Hey ocratravis,

You can accomplish that by using two ways:

// You need to have a '.custom-class' defined inside your CSS with the left set to 40px;
foo.renderData.cls['custom-class'] = true;

or

foo.renderData.style = 'left: 40px;'

Best regards,
Márcio


Post by ocratravis »

Thanks, Marcio. Unfortunately, the second suggestion (setting foo.renderData.style to a string) seems to be incorrect. I just tried it, and it doesn't work.

If I add console.log(foo.renderData) to my eventRenderer function, then it shows that renderData.style is an object:

{
  // ...
  "eventColor": "orange",
  "eventHeight": "auto",
  "style": {
    "": undefined,
    "height": "29.17%",
    "left": "30px",
    "minWidth": "calc(0.4 * (50% - 30px))",
    "padding-bottom": "1px",
    "top": "70.83%",
    "width": "calc(50% - 35px)"
  }
  // ...
}

Post by ocratravis »

Oddly enough, this does work:

foo.renderData.style = 'font-weight: bold'

So the problem seems to be specifically with the "left" property (and other positioning properties).

Is it not possible to override these?


Post by mats »

Are you looking for a new type of event layout? Can you please share a screenshot / mockup of your desired result? It's not intended for the left position to be overridden like that but perhaps it's something we can discuss internally.


Post by Animal »

I propose an event that you could hook into to mutate the calculations that the day layout creates.

https://github.com/bryntum/support/issues/6498

If this is agreed upon, the API docs will look like this:

Screenshot 2023-03-31 at 06.58.11.png
Screenshot 2023-03-31 at 06.58.11.png (48.57 KiB) Viewed 280 times

Post by ocratravis »

Are you looking for a new type of event layout?

Essentially, yes.

The vertical positioning of event boxes would not change – only their horizontal positioning.

I'm basically trying to divide the single-day hourly grid (.b-dayview-event-container) into multiple vertical "lanes", and then decide programmatically which "lane" each event should appear in.

So, all events of type A would appear in the left lane (i.e., on the left side of the grid); all events of type B would appear in the center; and all events of type C would appear on the right.

This is necessary due to the complexity of the data that I'm trying to display.


Post by Animal »


Post by ocratravis »

Thank you! I will look into this.


Post by ocratravis »

Animal, once my custom class has been written, what should I pass to the eventLayout config so that my DayView will actually use it?

  • Should I pass the class itself?
  • Or should I pass an instance of the class?
  • Or should I register the class with Bryntum (how?), and then pass
    { "type": "myCustomClass" }
    ?
  • Or something else?

I looked at the docs, but this is still unclear to me.


Post Reply