More Obvious Re-Size

Also, I’d kinda like to get rid of the (almost) invisible “color bar” on the left of each event, and then center the $ amount. I couldn’t figure that out long long ago, and settled on what you see.

The width of the active resize area can be set using the eventResizeMargin property. See also event drag handles.

You can also turn off the built-in resize handles (e.g. using args.data.resizeDisabled = true in onBeforeEventRender) and insert a custom resize handle using an active area with action: "ResizeEnd" or action: "ResizeStart". This technique is often used on touch devices to allow resizing (and provide a visual hint).

You can customize the event appearance by overriding the default CSS.

To hide the border:

body .scheduler_default_event_inner {
  border: none;
}

To center the content:

body .scheduler_default_event_inner {
  /* it already uses display: flex */
  justify-content: center;
}

Thanks for the approach. I was trying to construct it the way I want, but modifying it to the way I want is a good idea.

This is what I was actually talking about getting rid of, and this works, thanks:

$('.calendar_transparent_event_bar').css('display', 'none');

I am still having difficulty centering however, because hiding the “event bar” in this way does not make the text area expand left where the event bar used to be.

It looks like I may have to modify .calendar_transparent_event_line0 in some way in addition to centering calendar_transparent_event_inner.

So I ask again, is there a way to prevent the event_bar from existing in the first place? I assume the text could then be easily centered.

Thanks for all this great help, truly appreciated.

I just added

eventResizeMargin: 8,

to my initialization.

Works amazing! Thanks! Love an easy fix!

In the Calendar component, you can hide the duration bar using the durationBarVisible property (in the config):

{
  durationBarVisible: false,
  // ...
}

This will completely remove the element and adjust the padding.

Also, be careful with modifying elements using direct DOM access:

$('.calendar_transparent_event_bar').css('display', 'none');

This would only work for elements that are visible at the given moment. The Calendar elements are updated/created/removed as needed and the new elements will not be affected by this modification.

durationBatVisable: false does indeed remove the HTML that I wanted gone.

I’m still having problems centering though…

I tried adding justify-content: center as well as text-align: center

on both .calendar_transparent_event_inner and .calendar_transparent_event.calendar_transparent_event_line0

If I change it to left/center/right it wiggles around a bit, but no matter what it is still to the right of the small event:

This seems to work:

$('.calendar_transparent_event_inner').css('text-align', 'center').css('margin-left', '-10px')

Here is before / after using the line above, after also using durationBarVisible: false

Thanks