1. Home
  2. Forum
  3. ASP.NET MVC
  4. Schedule MinDate Prevent Display of Past Appointment

Schedule MinDate Prevent Display of Past Appointment

I used Schedule MinDate which is always currentDate to prevent creating or editing appointment of past days but realized it just totally block the display of past appointments.

I want to be able to display or view past appointment but disable creating appointments on past days or editing appointments of past days.

7 Replies
KK Karthigeyan Krishnamurthi Syncfusion Team July 31, 2017 06:43 AM UTC

Hi Charles, 
 
Thank you for contacting Syncfusion support. 
 
We have prepared the sample to disable creating/editing of the past appointments which can be viewed form the below link. 
 
<Code> 
create: "onCreate", 
actionBegin: "onBegin", 
cellClick: "onOpen", 
appointmentWindowOpen: "onOpen", 
appointmentHover: "onHover", 
dragStop: "onAction", 
resizeStop: "onAction", 
actionComplete: "onComplete", 
cellHover: "onCellHover", 
dragStart: "onStart", 
resizeStart: "onStart", 
beforeAppointmentCreate: "OnBeforeAppointmentCreate", 
beforeAppointmentChange: "OnBeforeAppointmentChange", 
 
function OnBeforeAppointmentCreate(args) { 
    if (ej.isNullOrUndefined(args.appointment[0])) 
        app = args.appointment; 
    else 
        app = args.appointment[0]; 
    if (new Date(app.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 
        args.cancel = true 
} 
function OnBeforeAppointmentChange(args) { 
    if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 
        args.cancel = true 
} 
function onStart(args) { 
    if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 
        args.cancel = true 
} 
function onCellHover(args) { 
    if (new Date(args.currentDate).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 
        args.cancel = true 
} 
function onOpen(args) { 
    if (ej.isNullOrUndefined(args.appointment)) { 
        if (args.startTime.setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 
            args.cancel = true 
    } 
    else { 
        if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 
            args.cancel = true 
    } 
} 
function onCreate() { 
    var scheduleObj = $("#Schedule1").data("ejSchedule"); 
    if (scheduleObj.currentView() == "month") { 
        var monthElements = scheduleObj.element.find(".e-monthcells"); 
        var dayIndex = scheduleObj._dateRender.indexOf(new Date().setHours(0, 0, 0, 0)); 
        for (var a = 0, len = scheduleObj._dateRender.length; a < len; a++) { 
            if (scheduleObj._dateRender[a] < new Date().setHours(0, 0, 0, 0)) 
                monthElements.eq(a).addClass("e-othermonths e-disable"); 
        } 
    } 
    else { 
        var allDayElements = scheduleObj.element.find(".e-alldaycells"); 
        for (var b = 0, len = scheduleObj._dateRender.length; b < len; b++) { 
            if (scheduleObj._dateRender[b] < new Date().setHours(0, 0, 0, 0)) { 
                scheduleObj.element.find(".e-workcellstab tr td:nth-child(" + (b + 1) + ")").addClass("e-disable"); 
                allDayElements.eq(b).addClass("e-disable"); 
            } 
            else { 
                scheduleObj.element.find(".e-workcellstab tr td:nth-child(" + (b + 1) + ")").removeClass("e-disable"); 
                allDayElements.eq(b).removeClass("e-disable"); 
            } 
        } 
    } 
} 
function onComplete(args) { 
    if (args.requestType == "dateNavigate" || args.requestType == "viewNavigate") 
        onCreate(); 
} 
function onBegin(args) { 
    if (args.requestType == "appointmentResize" || args.requestType == "appointmentDrag") { 
        if (args.data.appointment.StartTime.getMonth() != new Date().getMonth()) 
            args.cancel = true 
    } 
} 
function onHover(args) { 
    if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 
        args.cancel = true 
 
} 
function onAction(args) { 
    if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 
        args.cancel = true 
} 
</Code> 
 
Note: In above sample, appointments/cells which are before the system date is disabled. 
 
Regards, 
Karthigeyan 


CH Charles July 31, 2017 02:01 PM UTC

Thanks alot, worked perfectly fine.


KK Karthigeyan Krishnamurthi Syncfusion Team August 1, 2017 04:33 AM UTC

Hi Charles,  
 
We are happy to hear that our solution has fulfilled your requirement. 
 
Regards, 
Karthigeyan 





                                                                                       


KI Kishore October 15, 2019 03:10 PM UTC

Hi Team,

Do you have a similar example based on angular 7? if so can you please pass on?

Regards,
Kishore

VD Vinitha Devi Murugan Syncfusion Team October 16, 2019 09:46 AM UTC

Hi Charles, 
 
Thanks for your update. 
 
We have prepared the same sample in angular 7 and the same can be available in link. 
 
 
Kindly try the above sample, if you have any concerns please revert us back for further assistance. 
 
Regards, 
M.Vinitha devi 


KI Kishore October 16, 2019 03:26 PM UTC

Hi Team,

The code attached as is copy if javascript version which is kept in Angular 7 which has few errors and its jQuery dependent. The issues that I am facing as below, 

OnBeforeAppointmentCreate(args) {
        if (ej.isNullOrUndefined(args.appointment[0]))
            var app = args.appointment;
        else
            app = args.appointment[0];
        if (new Date(app.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0))
            args.cancel = true
    }

in above code there is no reference of ej.isNullOrUndefined therefore it throws an exception.

onCreate() {
        var scheduleObj = $('#Schedule1').ejSchedule('instance');
        debugger;
        if (scheduleObj.currentView() == "month") {
            var monthElements = scheduleObj.element.find(".e-monthcells");
            var dayIndex = scheduleObj._dateRender.indexOf(new Date().setHours(0, 0, 0, 0));
            for (var a = 0, len = scheduleObj._dateRender.length; a < len; a++) {
                if (scheduleObj._dateRender[a] < new Date().setHours(0, 0, 0, 0))
                    monthElements.eq(a).addClass("e-othermonths e-disable");
            }
        }
        else {
            var allDayElements = scheduleObj.element.find(".e-alldaycells");
            for (var b = 0, len = scheduleObj._dateRender.length; b < len; b++) {
                if (scheduleObj._dateRender[b] < new Date().setHours(0, 0, 0, 0)) {
                    scheduleObj.element.find(".e-workcellstab tr td:nth-child(" + (b + 1) + ")").addClass("e-disable");
                    allDayElements.eq(b).addClass("e-disable");
                }
                else {
                    scheduleObj.element.find(".e-workcellstab tr td:nth-child(" + (b + 1) + ")").removeClass("e-disable");
                    allDayElements.eq(b).removeClass("e-disable");
                }
            }
        }
    }

In the above method, its referring jQuery portion of it, I am not using any jQuery dependencies therefore I have a constraint and mandate not to use jquery in my project. Do you have similar codebase in angular that will help

Also in overall, the requirement is plain and simple in any appointments, so why should we write this much code for this? Instead you may provide simple configuration with properties. This may be suggestion as a end developer point of view. In overall, we use this scheduler as plug and play and it shouldn't be another code base which can't be maintained.

Also syncfusion scheduler module occupies 3.4 MB which is quite high where as my application size itself 100kb. If you have any solution for this also it will be great help.

Regards,
Kishore

VD Vinitha Devi Murugan Syncfusion Team October 17, 2019 02:32 PM UTC

Hi Kishore, 
 
Thanks for your update. 
 
It is mandatory to use jQuery in JS1 controls. Therefore, we recommend you to use our JS2 Schedule control, which is completely developed based on the pure JavaScript and the source code is written in TypeScript. Also, it has support for the platforms and frameworks such as MVC, ASP.NET Core, Vue, Angular, React, TypeScript and JavaScript. EJ2 is also compatible with EJ1 controls. please refer the following UG and online demo links, 
 
 
Regards, 
M.Vinitha devi 


Loader.
Up arrow icon