Our powerful JS Calendar component


Post by jq123 »

I am trying to apply a border styling to an event with a blue border and a white background. However, due to the clip-path that's applied on the event, the border gets cut off. Is there a way to place a border color on the arrow for events purely using CSS?

    // From Bryntum Calendar
    .b-cal-event-wrap.b-continues-future:not(.b-rtl) .b-cal-event {
        padding-right: calc(var(--arrow-width) + 0.3em);
        clip-path: polygon(0 0, calc(100% - var(--arrow-width)) 0, 100% 50%, calc(100% - var(--arrow-width)) 100%, 0 100%);
     }
Screen Shot 2023-03-30 at 12.14.32 PM.png
Screen Shot 2023-03-30 at 12.14.32 PM.png (6.38 KiB) Viewed 138 times
Last edited by jq123 on Sat Apr 01, 2023 4:26 am, edited 1 time in total.

Post by marcio »

Hey jq123,

Try to overwrite that padding-right the source code, you can write your own CSS to that:

// From Bryntum Calendar
    .b-cal-event-wrap.b-continues-future:not(.b-rtl).my-event .b-cal-event {
        padding-right: 0;
     }

Then you'll have something like the attached screenshot (I used one of our demos).

Is this what you're looking for?

Attachments
Screenshot 2023-03-30 at 17.45.59.png
Screenshot 2023-03-30 at 17.45.59.png (16.94 KiB) Viewed 136 times

Best regards,
Márcio


Post by jq123 »

Hi Marcio,

Thanks for the quick reply. The screenshot you have is similar to what I want, but I need to set a white background color. In the screenshot you provided, the event's background color is blue, so the arrow shows correctly.

You can see here that if the background is white, and we set a border color, then the border gets cut off. I've tried setting padding-right to 0 for this particular container, but the border is still getting cut off.

Screen Shot 2023-03-30 at 1.55.26 PM.png
Screen Shot 2023-03-30 at 1.55.26 PM.png (5.14 KiB) Viewed 135 times

Post by Animal »

No, the border cannot show if the element is clipped.


Post Reply