How to disable click in past days fullcalendar

Question

I try to disable clickable past days. I'm using dateClick but can't pass multiple args and have error: *Uncaught TypeError: date.format is not a function My function:

EDIT: Dateclick function with ajax. Now don't know how to disable click, when past days

    dateClick: function (info, jsEvent, view, date) {
        let currDate = info.dateStr;
        // if (moment().format('YYYY-MM-DD') === currDate || date.isAfter(moment())) {
        //     return false;
        // } else {
        //
        //     alert('Date: ' + currDate);
        //     alert('ID: ' + $('#reservation-form #select-service').val());
        // }
        let selectServiceVal = $('select#select-service').val();
        if (!selectServiceVal) {
            alert('Najpierw wybierz usługę');
        } else {
            dateValue.val(currDate);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: getFreeHorus + selectServiceVal + '/' + currDate,
                dataType: 'json',
                method: "POST",
                data: {
                    "id": selectServiceVal,
                    "date": currDate
                },
                beforeSend: function () {
                    $(".calendary-loader").css('display', 'block');

                },
                success: function (data) {
                    $(".calendary-loader").css('display', 'none');
                    if (data.message) {
                        alert('Wybierz poprawną datę')
                    }
                    displayHours(data.availableHours);

                },
                error: function () {
                    $(".calendary-loader").css('display', 'none');
                    alert('Błąd serwera, spróbuj później')
                }
            });
        }
    }

The example code [here](https://fullcalendar.io/docs/dateClick) shows that the only parameter passed into dateClick is `info` - but it also shows how to get the other values you are after. — James, Mar 11 '22 at 20:09
What do you mean "lost my ideas". You're just using some out-of-date syntax. Read the documentation, it clearly shows you what to do. Also remember that in v4 and above of fullCalendar, dates are not supplied to you as momentJS objects anymore. I guess you have been looking at some very old examples from v3 or earlier. — ADyson, Mar 14 '22 at 11:03
@ADyson i try to using select, but when I disabled select, still can click on day and run ajax. Don't know how to disable click in dateClick method. — mm42, Mar 21 '22 at 18:27
`Don't know how to disable click in dateClick method`...just don't handle that event in the fullcalendar options. The `dateClick` code you've shown above doesn't cause an AJAX request though. Have you got some other code handling clicks too? — ADyson, Mar 21 '22 at 22:13
That seems to fire the AJAX based on a selection in a dropdown. What is in the dropdown? This seems to have nothing to do with fullCalendar directly. — ADyson, Mar 22 '22 at 09:56
Thanks. N.B. As I alluded to earlier, `dateClick: function (info, jsEvent, view, date) {` should be just `dateClick: function (info) {`. The other 3 arguments are not supplied in fullCalendar v5. — ADyson, Mar 22 '22 at 10:40
Anyway it seems like basically your problem is that you don't know how to compare two dates in JavaScript. But's that's a common task and is very easy to google. You simply need to compare `info.start` against today's date, and see which one is earlier. You can either do it with native JS Date objects, or via momentJS if you're using that in your page. — ADyson, Mar 22 '22 at 10:42

Kibé M.C · Answer 1 · 2022-03-17T08:57:58.040

0

You can use select. This is how I did mine:

select: this.handleDateClick.bind(this),

//the handleDateClick funtion

handleDateClick(arg: any) {
    let todaysDate = new Date();
    let formattedDate = moment(todaysDate).format("YYYY-MM-DDTHH:mm:ss"); //formatted version of todays date so a comparison can be made
    let s1 = arg.startStr;
    let s2 = arg.endStr;
    let currentdate = moment().isUTC();
    let newDateObj = moment(s1).add(15, "m").format("YYYY-MM-DDTHH:mm:ss");
    if (s1 < formattedDate) {
      //This checks if time is in the past. If so,
     alert("This date is in the past")

edited Mar 17 '22 at 08:57

answered Mar 14 '22 at 08:08

Kibé M.C

243
3
8

when I using select with this function, anybody still can click on day, can't select it, but can click on days, so it call my ajax even if date is wrong. I'd like to disable completely click when date is past. It should be blocked on dateClick function – mm42 Mar 21 '22 at 18:26
What if you disable the date using this? ```validRange: {start: Date.now(),},``` – Kibé M.C Mar 22 '22 at 08:28

How to disable click in past days fullcalendar

1 Answers1