Snapping Appointments

RadScheduler provides the option to automatically snap the appointments while resizing/dragging them. This behavior is enabled through the SnapAppointments boolean property.

Example 1: Setting the SnapAppointments property

<telerik:RadScheduler SnapAppointments="True"> 
... 
</telerik:RadScheduler> 

This way during drag/resize operation the Start/End times of the appointment will be rounded according to the TimeSlots’ length.

Figure 1: Snap behavior when SnapAppointments is False

Figure 2: Snap behavior when SnapAppointments is True

When dragging an appointment, the default snap behavior rounds the appointment's start time to the closest tick.

You could set MinorTickLength property of the ViewDefinition in order to snap the appointments to different duration:

Example 2: Setting the MinorTickLength

<telerik:RadScheduler SnapAppointments="True">       
    <telerik:RadScheduler.ViewDefinitions> 
        <telerik:DayViewDefinition MinorTickLength = "15min" />      
    </telerik:RadScheduler.ViewDefinitions>  
</telerik:RadScheduler> 

Figure 3: Result from Example 2

You can check Configuring the TimeRuler ticks article for more details about MinorTickLength property.

Customizing the SnapBehavior

For more advanced scenarios when snapping of the appointments is not directly connected with the time slots, the RadScheduler control provides a way to customize the snapping of the appointments in a more detailed manner. You just need to create a class which inherits from Telerik.UI.Xaml.Controls.Scheduler.SnapBehavior and to override its SnapStart and SnapEnd methods. Then an instance of this class should be set to the SnapBehavior property of RadScheduler.

Examples 3 and 4 demonstrate how to set the snapping to 5 minutes regardless of the TimeSlots length.

Example 3: Creating the CustomSnapBehavior

public class CustomSnapBehavior : SnapBehavior 
{ 
    public override DateTime SnapEnd(SnapData snapData, DateTime timeToSnap) 
    { 
        if (timeToSnap >= snapData.OriginalData.End) 
        { 
            return SnapToTimeSpan(TimeSpan.FromMinutes(5), timeToSnap, true); 
        } 
        else 
        { 
            return SnapToTimeSpan(TimeSpan.FromMinutes(5), timeToSnap, false); 
        } 
    } 
 
    public override DateTime SnapStart(SnapData snapData, DateTime timeToSnap) 
    { 
        if (timeToSnap >= snapData.OriginalData.End) 
        { 
            return SnapToTimeSpan(TimeSpan.FromMinutes(5), timeToSnap, true); 
        } 
        else 
        { 
            return SnapToTimeSpan(TimeSpan.FromMinutes(5), timeToSnap, false); 
        } 
    } 
 
    public static DateTime SnapToTimeSpan(TimeSpan timeSpan, DateTime timeToSnap, bool roundToBiggestNumber) 
    { 
        var difference = timeToSnap.Ticks % timeSpan.Ticks; 
        if (roundToBiggestNumber) 
        { 
            return timeToSnap.AddTicks(timeSpan.Ticks - difference); 
        } 
 
        return timeToSnap.AddTicks(-difference); 
    } 
} 

Example 4: Set the SnapBehavior to an instance of the CustomSnapBehavior

<telerik:RadScheduler SnapAppointments="True"> 
    ... 
    <telerik:RadScheduler.SnapBehavior> 
        <local:CustomSnapBehavior /> 
    </telerik:RadScheduler.SnapBehavior> 
</telerik:RadScheduler> 

Figure 4: Result from Examples 3 and 4