Disabled Dates

[Patrik Volka]

Hi,

I have a list of events and I try to mark the event delivery dates in the calendar as disable.

If I only want to disable the days of the event, it works, but the problem occurs when I change the month in the calendar.

Events are on different dates each month, so I would need to disable disableDates by year, month and day.

It is possible?

Well thank you

[Berly Christopher]

Hi Patrik, 

  

Greetings from Syncfusion support. 

  

We have provided support for disabled the dates which is obtained in the onRenderDayCell event. This event will be fired when each date cell has been created. So, we can disabled the date with particular month and year with help of new Date() method. Here, we have disabled the particular date in the April month by comparing with the date which is obtained in the event arguments. 

  

<script> 

    function disableDate(args) { 

        if (+args.date == +new Date("04/18/2021")) { 

            args.isDisabled = true; 

        } 

    } 

</script> 

 

  

Based on this, you can disable any dates in the calendar based on the application needs. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Calendar_163947-1353881353  

  

Regards, 

Berly B.C 

[Patrik Volka]

Thanks for the quick reply, but I still haven't gotten the desired result.

I enclose a screen from the console and a snippet of code.

Attachment: disableDates_2e6f3b7c.zip

[Berly Christopher]

Hi Patrik, 

  

Based on the shared screenshot, we have disabled the some of predefined date values which is stored in the array. Please refer the below sample. 

  

<ejs-calendar id="calendar" renderDayCell="disableDate" value="@ViewBag.value"></ejs-calendar> 

 

<script> 

    var allDates = [new Date("03/01/2021"), new Date("03/12/2021"), new Date("03/25/2021"), new Date("03/14/2021"), new Date("03/19/2021")]; 

    function disableDate(args) { 

        for (t = 0; t < allDates.length; t++) { 

            if (+args.date == +new Date(allDates[t])) { 

                args.isDisabled = true; 

            } 

        } 

    } 

</script> 

 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/calendar_163947_Modified103018925  

  

Please check the above sample and try to reproduce the issue in the shared sample that will help us to proceed further at our end. 

  

Regards, 

Berly B.C 

[Patrik Volka]

Good day,

I add the values to "allDates" in the same form as you show in the example.

When I display the dates from "allDates" in the console, the exact dates I want will be displayed.

When I sell values from "allDates" to the Calendar element and set the isDisabled argument to them in the calendar view, none of the required dates are marked as isDisabled.

I am attaching the code where I get the data to "allDates" and sell it to the "disableDates" function.

Attachment: DisabledDates_dd963c84.zip

[Berly Christopher]

Hi Patrik, 

  

According to the given code information, you extracted date values from JSON, converted them to date string values, and then compared them to renderDayCell event date values. And then adding the disabled class to the values which is matched to it. So, we have prepared the sample based on the provided code since we don’t aware of the mentioned method named as “date_diff_indays”. 

  

    var calendarObj; 

    var modelAvailables = [ 

        { "id": "47wkcvan239d86z14n9sy2ckxe", "subject": "Rezervováno", "status": "Rezervace", "startTime": "2021-03-16T15:30:00Z", "endTime": "2021-03-19T10:30:00Z", "isAllDay": true, "isBlock": true, "caravanId": "4b840er4bw4qx6r02jd9bvprw2", "caravanLocalizationSet": "4vk0np414kb6e227jejnrkarwc", "color": "rgba(230, 126, 34, 1)" }, 

        { "id": "4ksfmxnzzrwe3t27a6tk29gvxa", "subject": "Půjčené", "status": "Půjčeno", "startTime": "2021-03-13T08:30:00Z", "endTime": "2021-03-14T13:00:00Z", "isAllDay": true, "isBlock": true, "caravanId": "496rm1jt40ytjxzwy8hf328cm0", "caravanLocalizationSet": "4vk0np414kb6e227jejnrkarwc", "color": "rgba(207, 0, 15, 1)" },  

        { "id": "4za92j0d0ptqkw1yn8y1fsk3ny", "subject": "Půjčené", "status": "Půjčeno", "startTime": "2021-03-08T08:00:00Z", "endTime": "2021-03-11T16:00:00Z", "isAllDay": true, "isBlock": true, "caravanId": "496rm1jt40ytjxzwy8hf328cm0", "caravanLocalizationSet": "4vk0np414kb6e227jejnrkarwc", "color": "rgba(207, 0, 15, 1)" } 

    ]; 

   /* var modelAvailables;*/ 

    var allDates = []; 

    function availableDates() { 

        calendarObj = document.getElementById("calendar").ej2_instances[0]; 

        var i; 

        var d; 

 

        for (i in modelAvailables) { 

            const startDatum = new Date(modelAvailables[i].startTime); 

            const endDatum = new Date(modelAvailables[i].endTime); 

            allDates.push(calendarObj.globalize.formatDate(startDatum, { format: "MM/dd/yyyy" })); // used to format the data object to particular date format 

            allDates.push(calendarObj.globalize.formatDate(endDatum, { format: "MM/dd/yyyy" }));// used to format the data object to particular date format 

        } 

    } 

 

    function disableDates(args) { 

        availableDates(); 

        for (t = 0; t < allDates.length; t++) { 

            if (+args.date == +new Date(allDates[t])) { 

                args.isDisabled = true; 

            } 

        } 

    } 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion_EJ2_Core_App1752945122  

  

Screenshot: 

  

 

  

Regards, 

Berly B.C