We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Appointments

Hi

I have a number of questions regarding Appointments on the Schedule control.

The basic workflow that I need to happen is:
     a) Person 1 loads the schedule and blocks 1 or more time periods (by creating appointments).  
     b) Person 2 load the schedule and can view the appointments created by Person 1.  But cannot edit, move, resize or otherwise change these appointments.
     c) Person 2 then selects a time period that fits within one of Person 1's appointment. 

Given that, I have the following questions:

1)     How can I make an appointment to be read-only?  (no edit, no moving, no resizing)  I don't want the whole Schedule to be read only, only some appointments.  

2)    How can I create an appointment without either the Quick Window or the full Appointment Window opening?  The appointment doesn't need a description, title, recurring or anything else, just a start and end time.

3)    I would like the user to be able to select a time period with the mouse (say 9am to 11:30am) by highlighting the appropriate time blocks in the Schedule, and then I want to automatically create an appointment in the background (ie the user does not need to do anything further other than highlighting)

Thanks for your help.

Cheers
Jarrod


5 Replies

SK Sarath Kumar P K Syncfusion Team August 14, 2015 12:58 PM UTC

Hi Jarrod,

Thank you for using Syncfusion products.

We have analyzed all your above mentioned requirements and queries and have prepared a schedule sample to meet your requirement which can be downloaded from the following location.
http://www.syncfusion.com/downloads/support/forum/119916/ze/CustomSample1086044626

JSPlayground Link: http://jsplayground.syncfusion.com/2lvin20h

In the above sample, we have considered the current user name as “Person 2” and blocked the appointment CRUD operation for the user with  the name “Person 1” appointments. Hence, the current user can’t be able to edit/alter the appointment with subject “Person 1”, making it readonly. Also, we have implemented the appointment creation by selecting the required time period using mouse in schedule control. Please refer the following code snippet to know details about this scenario.
<code>

                --------------

                --------------

               recurrence: "Recurrence",

                recurrenceRule: "RecurrenceRule"

            },

            appointmentClick: "readOnlyChange", //Bind the events to trace the appointment and make it as read only based on requirement

            appointmentHover: "readOnlyChange",

            appointmentWindowOpen: "readOnlyChange",

            appointmentDeleted: "readOnlyChange",

            resizeStop: "readOnlyChange",

            dragStop: "readOnlyChange",
            create: "onCreate"  //Bind the event to apply the appointment creation by selecting cells

      function onCreate(args) {

            this._on(this.element, "mouseup", "td.e-workcells,td.e-monthcells,td.e-alldaycells", function (oEl) {

                if ($(oEl.target).hasClass("e-workcells") || $(oEl.target).hasClass("e-monthcells") || $(oEl.target).hasClass("e-alldaycells")) {

                    var schObj = $("#Schedule").data("ejSchedule");

                    var tds = schObj.element.find('td.e-selectedCell');

                    var nt = tds.length - 1;

                    if (nt == 0) {

                        schObj._cellSelection(oEl.target);

                    }

                    else {

                        schObj._multipleCellAppointCreation(oEl.target);

                    }

                    if (!$(oEl.target).hasClass("e-workcells") ? (new Date(schObj.cur_EndTime) - new Date(schObj.cur_StartTime)) / 3600000 > 24 : (new Date(schObj.cur_EndTime) - new Date(schObj.cur_StartTime)) / 3600000 > 0.5) {                    //If you want to create appointment by click on cell remove this highlighted if block

                        var createObject = { Subject:"Person 2",StartTime: new Date(schObj.cur_StartTime), EndTime: new Date(schObj.cur_EndTime) };

                        schObj.saveAppointment(createObject);               //Create object and save in schedule control

                    }

                }

            });

        }


        function readOnlyChange(args) {

            if (args.originalEventType != "cellDoubleClick") {

                var data = ej.DataManager(this._processed).executeLocal(new ej.Query().where("Id", "equal", args.appointment.Id))

                for (var i = 0; i < data.length; i++) {

                    if (data[i].Subject == "Person 1")  //Check the subject which has Person 1 to make it read-only

                        args.cancel = true;

                }

            }
        }
</code>

Kindly try the above sample and let us know if you need further assistance on this.

Regards,
Sarath Kumar P K



JA jarrod August 14, 2015 03:38 PM UTC

Hi

Thanks for the quick reply.

I have had a basic play with the HTML sample and the playground provided, and everything looks good!  It is giving me exactly what I wanted.

I will attempt to integrate it into my scenario next week, and let you know how it goes.

Cheers
Jarrod



SK Sarath Kumar P K Syncfusion Team August 17, 2015 10:53 AM UTC

Hi Jarrod,

Thanks for your update.

We are glad to hear that our previously provided sample meets your basic expectation. Also, we will wait to hear from you further.

Please let us know if you need any further assistance on this. As always, we will be happy to assist you.

Regards,
Sarath Kumar P K


JA jarrod August 25, 2015 09:45 AM UTC

Hi again

I have integrated the suggestions below into my  code and everything is working perfectly - thank you!

One other thing I am attempting to do is validate an appointment before it is saved to the DB, and in fact, before it is actually added to the Schedule control.
Essentially, I need to grab the start and end times of the proposed appointment and then validate that against a number of rules (not in the past, no overlapping appointments, etc).
What is the best way to go about this?  

Once again, thanks for your help!

Cheers
Jarrod



SK Sarath Kumar P K Syncfusion Team August 26, 2015 10:28 AM UTC

Hi Jarrod,

Thanks for your update.

We have analyzed your scenario and prepared a schedule sample to validate the appointment before saving or updating to database, that can be downloaded from the following location.
http://www.syncfusion.com/downloads/support/forum/119916/ze/ScheduleSample-187162631

JSPlayground link: http://jsplayground.syncfusion.com/qkt2prii

In the above sample we have used the schedule event appointmentSaved, appointmentEdited, resizeStop and dragStop to validate the created/updated appointment. Using appValidate we checked the condition and updated in database. Please refer to the following code example to know more about the appointment validation.
<code>

$(function () {

            $("#Schedule1").ejSchedule({

                width: "100%",

                height: "525px",

                --------------

                --------------

               appointmentSaved: "appValidate",

                appointmentEdited: "appValidate",

                appointmentClick: "readOnlyChange",

                appointmentHover: "readOnlyChange",

                appointmentWindowOpen: "readOnlyChange",

                appointmentDeleted: "readOnlyChange",

                resizeStop: "readOnlyChange",

                dragStop: "readOnlyChange",         //Check for readOnly and validate the condition too.

                create: "onCreate"

            });
        });

function appValidate(args) {

            var schObj = $("#Schedule1").data("ejSchedule");

            var appList = schObj._processed;

            for (var i = 0; i < appList.length; i++) {

                if ((args.type == "appointmentSaved" ? true : (appList[i][schObj.model.appointmentSettings["id"]]!=args.appointment.Id))&&(new Date(appList[i][schObj.model.appointmentSettings["endTime"]]) > new Date(args.appointment.StartTime))) {                 //Check the required condition for appointment create

                    if ((new Date(appList[i][schObj.model.appointmentSettings["startTime"]]) < new Date(args.appointment.EndTime))) {

                        if (new Date(new Date(appList[i][schObj.model.appointmentSettings["startTime"]]).setHours(0, 0, 0, 0)).getTime() === new Date(new Date(args.appointment.StartTime).setHours(0, 0, 0, 0)).getTime()) { }

                        args.cancel = true;     //Return false if condition satisfies (Overlap)

                    }

                }

            }
        }
</code>

Kindly try the above sample and let us know if you need further assistance on this.

Regards,
Sarath Kumar P K


Loader.
Live Chat Icon For mobile
Up arrow icon