Drag in day view to create new events

[Matthew]

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

  

[Boyan Dimitrov]

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