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

Snap to Grid ejSchedule

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?

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team 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



AS Andreas Schenk December 31, 2015 03:21 PM UTC

Hi Karthigeyan,

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


KK Karthigeyan Krishnamurthi Syncfusion Team January 4, 2016 07:06 AM UTC

Hi Andreas,

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

Regards,
Karthigeyan



Loader.
Up arrow icon