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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Snap to Grid ejSchedule

Thread ID:

Created:

Updated:

Platform:

Replies:

121491 Dec 20,2015 10:01 PM UTC Jan 4,2016 07:06 AM UTC JavaScript 3
loading
Tags: ejSchedule
Andreas Schenk
Asked On December 20, 2015 10:01 PM UTC

Hello!

since updating to the latest release (13.3.0.18), when I drag'n'drop appointments, I can drop them wherever I want. In the previous versions, the appointments always aligned to a 10-minutes interval.

In my case, the ejSchedule-component should only allow the user to drop appointments to 5-minutes interval, which means: if the appointment is dropped to 10:57, it should automatically snap to 11:00; at the moment it stays at 10:57, which is very uncomfortable, because the user has to correct the position of the appointment very often...is there a way how to modify this behaviour?

Karthigeyan Krishnamurthi [Syncfusion]
Replied On December 21, 2015 01:43 PM UTC

Hi Andreas,

Thanks for contacting Syncfusion support.

When we drag and drop the appointments at the particular time, scheduler will rendered the appointments in the exact dropped time. It is the default behavior of the scheduler control feature(“Time Scale”). We have prepared the below sample for your requirement “Need to round off the minutes”.
JS Playground Link: http://jsplayground.syncfusion.com/ewogrmzk

In the above sample we have rounded off the minutes to the nearest value. If the rounding off minutes is equal to 60, we have incremented an hour value. Kindly see the following code example that we have used in the above sample.
<Code>

<script type="text/javascript">

        $(function () {

            var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));

            $("#Schedule1").ejSchedule({

                width: "100%",

                height: "525px",

                currentDate: new Date(2014, 4, 5),

                appointmentSettings: {

                   -----------

                   -----------

                   },

                dragStop: "OnDragStop" //this event will trigger when the appointment is dragged and dropped

            });


        });

        function OnDragStop(args) {

            var start = args.appointment.StartTime; // start time of the appointmnt will be retrived

            var starthr = 5 * Math.round(start.getMinutes() / 5);    // here we are rounding off the minutes             

            if (starthr == 60) {

                args.appointment.StartTime.setHours(args.appointment.StartTime.getHours() + 1); // here we are incrementing the start hour when the minutes is equal to 60          

            }

            args.appointment.StartTime.setMinutes((Math.round(start.getMinutes() / 5) * 5) % 60); // here we are adding the round off start minutes to the appointment         

            var end = args.appointment.EndTime;

            var endhr = 5 * Math.round(end.getMinutes() / 5);

            if (endhr == 60) {

                args.appointment.EndTime.setHours(args.appointment.EndTime.getHours() + 1);

            }

            args.appointment.EndTime.setMinutes((Math.round(end.getMinutes() / 5) * 5) % 60);

        }
    </script>
</Code>    

Regards,
Karthigeyan


Andreas Schenk
Replied On December 31, 2015 03:21 PM UTC

Hi Karthigeyan,

thats exactly what I was looking for - thank you so much!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On January 4, 2016 07:06 AM UTC

Hi Andreas,

We are happy to hear that our solution has resolved your issue.

Regards,
Karthigeyan



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;