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.
Hi @reshift ![:wave: :wave:](https://forum.mobiscroll.com/images/emoji/twitter/wave.png?v=12)
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
}}
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
Hello @reshift ![:wave: :wave:](https://forum.mobiscroll.com/images/emoji/twitter/wave.png?v=12)
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.
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
Great @reshift, no worries ![:wink: :wink:](https://forum.mobiscroll.com/images/emoji/twitter/wink.png?v=12)