1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Schdeduler - Prevent user from selecting past dates and validation

Schdeduler - Prevent user from selecting past dates and validation

Hi

Is it possible to prevent users from selecting past dates. Example 

Today is 24 March 2020. Users can book an appointment  either for  today or in future.


Is it possible to limit the maximum forward booking dates?

I have tried using min and max dates but had no luck. Get an error message.

Is it possible to change the title of the popup dialog window form "New Event"

How do I check if a time slot was selected?

Thank you very much

Sanjay


5 Replies
RV Ravikumar Venkatesan Syncfusion Team March 24, 2020 01:23 PM UTC

Hi Sanjay, 

Greetings from Syncfusion support. 

Q1: You can disable the adding appointments for the past dates with the help of actionBegin, popupOpen, dragStop and resizeStop events like below. 

<ejs-schedule id="schedule" height="650" actionBegin="onActionBegin" popupOpen="onPopupOpen" dragStop="onDragStop" resizeStop="onResizeStop"></ejs-schedule> 
 
<script> 
    function onDragStop(args) { 
        args.cancel = onEventCheck(args); 
    } 
 
    function onResizeStop(args) { 
        args.cancel = onEventCheck(args); 
    } 
 
    function onActionBegin(args) { 
        var isEventChange = (args.requestType === 'eventChange'); 
        if ((args.requestType === 'eventCreate') || isEventChange) { 
            args.cancel = onEventCheck(args); 
        } 
    } 
 
    function onPopupOpen(args) { 
        if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) { 
            args.cancel = onEventCheck(args); 
        } 
    } 
 
    function onEventCheck(args) { 
        var eventObj = args.data instanceof Array ? args.data[0] : args.data; 
        return (eventObj.StartTime < new Date()); 
    } 
</script> 

Q2: We could able to reproduce the issue that you have reported. We had logged the defect report at our end and the fix will be included in our weekly patch release on the third week of April 2020. You can track this defect status in below feedback link. Kindly be patience until then. Until then we suggest you to set minDate and maxDate on with the help of created event like the below. 


 
<ejs-schedule id="schedule" height="650" created="onCreated"></ejs-schedule> 
 
<script> 
    function onCreated(args) { 
        var schObj = document.querySelector('.e-schedule').ej2_instances[0]; 
        schObj.minDate = new Date(); 
        schObj.maxDate = new Date(2020, 2, 31); 
    } 
</script> 

Q3: You can change the Editor window popup dialog title like the below. 

<script> 
    var L10n = ej.base.L10n; 
    L10n.load({ 
        'en-US': { 
            'schedule': { 
                'newEvent': 'Add Event', 
            }, 
        } 
    }); 
</script> 

Q4: You can check the selected time slot is already have an appointment or not with the help of isSlotAvailable method like the below. 

<ejs-schedule id="schedule" height="650" actionBegin="onActionBegin"></ejs-schedule> 

<script> 
    function onActionBegin(args) { 
        var isEventChange = (args.requestType === 'eventChange'); 
        if ((args.requestType === 'eventCreate') || isEventChange) { 
            args.cancel = onEventCheck(args); 
            if (!args.cancel) { 
                var scheduleObj = document.getElementById('schedule').ej2_instances[0]; 
                var eventData = (isEventChange) ? args.data : args.data[0]; 
                var eventField = scheduleObj.eventFields; 
                var startDate = eventData[eventField.startTime]; 
                var endDate = eventData[eventField.endTime]; 
               args.cancel = !scheduleObj.isSlotAvailable(startDate, endDate); 
            } 
        } 
    } 
</script> 


Kindly try the above sample and get back to us for further assistance. 

Regards, 
Ravikumar Venkatesan 


SA Sanjay March 26, 2020 01:04 AM UTC

Hi Ravikumar,

Thank you. The min and max dates are  now working as per your work around. Is it possible to skip the min date ie do not show.

I do not want to show min data if possible. 

On isSlotAvailable this does not work if I set the time interval to 15 minutes with 1 slot. It allows me to book 2 events.


function onCreated(args) {
    const scheduleObj = document.getElementById("AppointmentSchedule").ej2_instances[0];
    scheduleObj.timeScale.interval = 15; 
    scheduleObj.timeScale.slotCount = 1; 

    
    const today = new Date();
    console.log(today);
    scheduleObj.minDate = today;

    const year = today.getFullYear();
    const month = today.getMonth();
    const day = today.getDate();

    const future = new Date(year, month + 2, day);

    scheduleObj.maxDate = future; 

    scheduleObj.dataBind();

}

<ejs-schedule id="AppointmentSchedule" workDays="@Model.WorkingDay" actionBegin="onActionBegin" dataBound="onDataBound" height="600px" popupOpen="onPopupOpen" allowResizing="false" allowDragAndDrop="false" startHour="@Model.StartHour" endHour="@Model.EndHour" created="onCreated" >

        <e-schedule-views>
            <e-schedule-view option="Day" displayName="2 Days" interval="2"></e-schedule-view>
        </e-schedule-views>
    </ejs-schedule>

3. How do I change the column width and height of the "Time" and "Event" columns ( Please see attached)


Again thank you very much

Regards
Sanjay



Attachment: change_column_widthh_and_height_b385ae45.rar

RV Ravikumar Venkatesan Syncfusion Team March 26, 2020 12:59 PM UTC

Hi Sanjay, 

Thanks for the update. 

Q1. We have validated your requirement at our end and we regret to let you know that we could not hide the minDate from the UI. 

Q2. We have checked the isSlotAvailable method in the provided sample and it working fine. If you still facing the same issue please share the issue reproducing steps for serve you better. 

Q3. You can increase the width and height of the work cells and time cells with the help of cssClass property of the Schedule. We already demonstrated the sample for this requirement please check the below sample link. 



Kindly try the above sample and get back to us If you would need any further assistance. 

Regards, 
Ravikumar Venkatesan 


SA Sanjay March 27, 2020 06:05 AM UTC

hi

Thank you . Example helped with isSlotAvailable. 

I am still having issues with width and colour. I can change the width and height of timeline and month view but not the Day view. 
I want to change the  colour of  blocked slots, width and height of day view of time interval and booking slot. 

Please see below . 





Many thanks Sanjay 



RV Ravikumar Venkatesan Syncfusion Team March 30, 2020 06:02 AM UTC

Hi Sanjay, 

Thanks for the update. 

Q1: Changing width and height of the Day view work cells 

Step 1: In setting up the custom width and height to Schedule work cells first you need to add the cssClass property of the Schedule like the below. 

[index.cshtml] 
<ejs-schedule id="schedule" height="650" cssClass="schedule-cell-dimension"></ejs-schedule> 

Step 2: To change the height of the Day view work cells with the help of below CSS code. 

[index.cshtml] 
<style> 
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-time-cells-wrap table td, 
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-work-cells { 
        height: 100px; 
    } 
</style> 

Step 3: To change the width of the Day view work cells with the help of below CSS code. 

[index.cshtml] 
<style> 
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col, 
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col { 
        width: 200px; 
    } 
</style> 

Q2: Changing the color of the blocked dates 

You can change the background color of the blocked dates with the help of below CSS code. 

[index.cshtml] 
<style> 
    td.e-work-cells.e-disable-dates { 
        background-color: #22b24b82 !important; 
    } 
</style> 


Kindly try the above sample and get back to us If you would need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Loader.
Up arrow icon