Event calendar with invalid option became disabled

#1

Hi
I’m using event calendar with month, week, and day views. Also I need to apply disabled times(invalid times) as well. I’m switching views using mbsc-segmented in same page(SPA).
The issue is when I put open times as Mon-Fri 9-17,(invalid 0-9, 17-24) the month view became disabled for all of those days. In the month view, I cannot click to navigate, all other functions are blocked.
I could remove the appearance by using css, but think there is a proper way to handle it.

Also, is there a way to initialize the invalid object? If I try to initialize it by something like this.calendar.invalid = [], all of the invalid data are just gone from the view.

#2

Hi @reshift :wave:

In this case, I would recommend the following solution:

  • Month view - disable only the weekends with the recurring rule:
invalid: [
         {
            // disable weekends
            recurring: {
                 repeat: 'weekly',
                 weekDays: 'SA,SU'
             }
          }]
  • Week and day views - disable the date and time with the following solution:
view: {
     schedule: { 
            type: 'week', // or 'day' in case of the day view
            startDay: 1, // sets Monday the first day of the view
            endDay: 5, // sets Friday the last day of the view
            startTime: '09:00', // sets 9AM the start time of schedule column
            endTime: '17:00' // sets 17PM the end time of schedule column
       }}
#3

We have no issues with schedule view, but calendar the has.
I just checked the view.calendar has no value as startTime and endTime.

So technically my question is like, how can we use the invalid option(object) for schedule views only (not calendar view) in SPA

#4

Hello @reshift :wave:

I’m not entirely sure that I understand why the solution I sent isn’t fitting for you?

That’s right, the Calendar view has no startTime and endTime option, however, you can disable the weekends with the invalid option, as I mentioned before.

And why would you like to use the invalid option in case of the Scheduler? - when you can use the start/endDay options and start/endTime options for configuring the view.

#5

I found the solution by using value in component.
Previously, to initialize it, I was doing like
eventSettings = {
…
invalid : []
}
function() {
this.eventSettings.invalid = [];
}

and I changed it to
<mbsc-eventcalendar [invalid]=invalidObj>
public invalidObj = [];
function () {
this.invalidObj = [];
}
Thanks

#6

Great @reshift, no worries :wink: