Drag in day view to create new events

2 posts, 0 answers
  1. Matthew
    Matthew avatar
    13 posts
    Member since:
    Jan 2012

    Posted 03 Oct 2012 Link to this post

    Hi,

     We have got a requirement to add a new event in day view. The requirement is as follows:

    Take day view of radschduler. Click on one time slot say 9 am and drag to 1 pm, and upon releasing the drag we need to open the create event popup with start time as 9 am and end time as 1 pm .  Is there any way to do this?

    We need to complete these things fro client-side, since we are using wcf services to bind the calendar.


    Thanks

      
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2035 posts

    Posted 08 Oct 2012 Link to this post

    Hello Matthew,

    I would like to suggest couple of steps to follow in order to achieve this functionality:
    • Please set onmouseup event for the table with class name rsContentTable which contains all time slots:
    function pageLoad() {
                var $ = $telerik.$;
                $('.rsContentTable').on('mouseup', function () {
     
                var scheduler = $find("<%=RadScheduler1.ClientID %>");
                var timeSlots = scheduler.get_selectedSlots();
                if (timeSlots.length > 0) {
                    var startTime = timeSlots[0].get_startTime();
                    var endTime = timeSlots[timeSlots.length - 1].get_endTime();
                     .........
                   
                    scheduler.showAdvancedInsertForm(startTime);
                    }
                });
             }
    •  Please add two hidden fields to store first slot start time and last time slot end time, so you can access and use these values later in your project.
    • Next step would be to show the advanced form with these values and use OnClientFormCreated:
    • Here you can find information that will help you to access start time and end time pickers, so you can set them to the stored values of the hidden fields.

    //aspx file

    <telerik:RadScheduler ID="RadScheduler1" runat="server" " OnClientFormCreated="OnClientFormCreated">
    ................   
    </telerik:RadScheduler>

    //JavaScript

    function OnClientFormCreated(sender, args) {
                 
                var $ = $telerik.$;
                var startTimejQueryObject = $("[id$='Form_StartTime']");
                var startTimePicker = $find(startTimejQueryObject.attr("id"));
     
                setTimeout(function myfunction() {
                    startTimePicker.set_selectedDate(your start date and time goes here);
                }, 200);
     
                var endTimejQueryObject = $("[id$='InsertForm_EndTime_dateInput']");
                var endTimePicker = $find(endTimejQueryObject.attr("id"));
     
                setTimeout(function myfunction() {
                    endTimePicker.set_selectedDate(your end date and time goes here);
                }, 200);      
            }

    I hope this was helpful.

    Regards,
    Boyan Dimitrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top