This is a migrated thread and some comments may be shown as answers.

Drag in day view to create new events

1 Answer 61 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 03 Oct 2012, 11:46 AM
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

  

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 08 Oct 2012, 11:25 AM
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.
Tags
Scheduler
Asked by
Matthew
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or