How to use invalid and valid options in the event calendar?

Event calendars & schedulers
1

Hi,
I wanted to know how to use the valid option alongside invalid option. What I want to do is to set all days to invalid and only use valid option to enable a range of time. I almost tried everything I could think of but nothing (I even used the sample in the docs and I changed the dates into today but it seems it didn’t work link: https://docs.mobiscroll.com/5-4-0/javascript/eventcalendar#opt-valid). So if anyone could send a working sample, it would be great.

Thank you!

2

Hi Kevin :wave:

Can you share an example of how you’re trying to use the two options together?

1 Like
3

Hi @Zsombor, like this:

invalid: [
    { start: '00:00', end: '23:59' },
    { start: new Date(2021, 4, 1), end: new Date(2021, 4, 31) }
],
valid: [
    { start: '09:00', end: '12:00' },
    { start: new Date(2021, 4, 10), end: new Date(2021, 4, 20) }
]

Nothing really special
My thought was that time ranges from 09:00 am to 12:00 am would be valid in between 10th of May 2021 and 20th of May 2021 but everything is just blocked from 00:00 to 23:59 between 1st of May and 31st of May like in the image below:

image
image1884×726 17.7 KB

4

Thanks for sharing @Kevin :wink:

Yup, you’re right, this will not work, because in case of the Scheduler the valid option is not working. We should mention this in the docs, this will be updated as soon as possible.

In this case, the solution would be to use only the invalid option with the recurring option.

For example:

invalid: [
   {
        start: '00:00',
        end: '09:00',
        recurring: {
            repeat: 'daily',
            from: new Date(2021, 4, 1),
            until: new Date(2021, 4, 31)
        }
    },
    {
        start: '12:00',
        end: '23:59',
        recurring: {
            repeat: 'daily',
            from: new Date(2021, 4, 1),
            until: new Date(2021, 4, 31)
        }
    },
]

Let me know if this helps :wink: