Monthly timeline without weekends and invalids

Event calendars & schedulers
1

Hi everyone!
I’m trying to implement a monthly timeline with drag&drop events that only shows the working days and the event could only be created on working days.
I mean: If I have a three-day event that starts on Thursday, I want it to end on Monday, but instead the timeline shows a portion of the event as if it ends on Saturday.
I configured “invalids” to avoid weekends and it is also strict. Let me show you the piece of code with these configs:

        invalidateEvent: "strict",
        view: {
            timeline: {
                type: 'week',
                resolutionHorizontal: 'day',
                size: 3,
                weekNumbers: true,
                startDay: 1,
                endDay: 5
            }
        },
        invalid: [{
            recurring: {
                repeat: 'monthly',
                weekDays: 'SA, SU',
            }
        }],

I also want to share a picture of it to explain myself better:

image
image1220×727 50.3 KB

Do you know how can I fix this?

Thanks in advance!

2

Hello @Jess_Pedernera :wave:

Actually, the only problem is that you set the recurring rule to repeat monthly, in your use case, this needs to be set to weekly :point_down:

    invalid: [{
        recurring: {
            repeat: 'weekly',
            weekDays: 'SA, SU',
        }
    }],
1 Like
3

Thanks for the answer! I’ve already tried that, but it doesn’t solve the problem.
I mean, when I configure the timeline to show the weekends, it works perfectly:

view: {
            timeline: {
                type: 'week',
                resolutionHorizontal: 'day',
                size: 3,
                weekNumbers: true
            }
        },

But when I configure the timeline to show only the weekdays, I get the “truncated event” like the picture I shared before:

view: {
            timeline: {
                type: 'week',
                resolutionHorizontal: 'day',
                size: 3,
                weekNumbers: true,
                startDay: 1,
                endDay: 5
            }
        },

And I need to configure the timeline to show only the weekdays (Mon-Fri).

4

Yup, sorry I misunderstood your first message :grinning:

We don’t have a built-in solution for this, I mean with that config the component won’t break your event into two parts (Thursday - Friday and Monday in case of a three-day event).

As an alternative solution, what you can do is to check in the onEventDragEnd lifecycle event if the dropped event is overlapping with invalid periods, and if yes, you will need to break it up.