How do I block all days prior to today in event calendar?

Event calendars & schedulers
1

I’m using the event calendar in a booking system that allows people to select a date for their appointment, but I need to prevent them from picking days prior to today.

I looked at this page in the demo but it doesn’t explain how to do what I’m looking for.
JQuery and JQuery Mobile Event calendar Manage blocked out dates Example | Mobiscroll

This is what I have currently:

$.get("get-staffschedule.json.php?staffid=<?=$groomer?>", function(data){
  var calendar = $('#availabilitycalendar').mobiscroll5().eventcalendar({
    display: 'inline',
    invalid: [<?=$invalidstring?>],
    theme: 'material',
    themeVariant: 'light',
    responsive: {
            xsmall: {
                view: {
                    calendar: {type: 'week'}
                }
            },
            small: {
                view: {
                    calendar: {type: 'week'}
                }
            }
    },
    onSelectedDateChange: function (event, inst) {
          loadDetail(event);
    }

  }).mobiscroll5('getInst');

  calendar.setEvents(JSON.parse(data));

});

loadDetail(null,'<?=$today?>');

As you can see I’m passing in $invalidstring which I generate on the server side to block out days that the business is closed or the staff is not scheduled to work, but all these invalid dates have both a start date and an end date. So I thought maybe I can pass in an invalid string with only an end date, so it would assume it includes every prior to that end date, but that didn’t work.

"{end: new Date(),allDay: true},"

So how can I accomplish this? What can I pass into that invalid string to block of all days prior to today?

2

Hello @Vincent_Wansink :wave:

If you want to block all days prior to today, I can recommend you the min option. You just need to set the today date for this option, like this:

min: new Date()

Here you can find an example how the min option works: JQuery Calendar Min & max values Example | Mobiscroll

The invalid option must be an array containing dates (Javascript Date objects, ISO 8601 strings, or moment objects), or objects.

For example:

invalid: [new Date(2021, 2, 11),
          new Date(2021, 3, 16), 
          {
              start: new Date(now.getFullYear(), now.getMonth(), 19),
              end: new Date(now.getFullYear(), now.getMonth(), 20),
              title: 'Team offsite',
              allDay: true
          },
          ...
]
3

Thank you! I knew there was an easy way to do that.