Insert Appointment (ClientSide)

[Fooberichu]

I was looking at the ClientSide API function "insertAppointment" and had some questions.  I dropped it into a test app and am trying to manually insert an appointment "on the fly" using only JavaScript.  There are no errors being thrown but the appointment doesn't show up on the Scheduler.  Here is the function, just wondering if I'm missing something:

	function AddAppointment() {
	var scheduler = document.getElementById('RadScheduler1');
	var newAppt = new Telerik.Web.UI.SchedulerAppointment();
	var start = new Date();
	var end = new Date();
	start.setFullYear(2008, 11, 4);
	start.setHours(10, 30, 0, 0);
	end.setFullYear(2008, 11, 4);
	end.setHours(11, 0, 0, 0);
	newAppt.set_start(start);
	newAppt.set_end(end);
	newAppt.set_subject("Testing Appointment");
	scheduler.insertAppointment(newAppt);
	}

[Dimitar Milushev]

Hi Fooberichu,

First, you need to use RadScheduler's client object. Calling "document.getElementById('RadScheduler1')" returns a reference to the top DOM element of RadScheduler (the div that wraps all of the html of RadScheduler).

To retrieve a reference to RadScheduler's client-side object, you need to call $find('RadScheduler1').

The second problem is that in Javascript, month numbers go from 0 to 11 so you are inserting an appointment for December.

Here is the proper Javascript function to insert an appointment for today:

function AddAppointment() {

    var scheduler = $find('RadScheduler1');

    var newAppt = new Telerik.Web.UI.SchedulerAppointment();
    var start = new Date();
    var end = new Date();
    start.setFullYear(2008, 10, 5);
    start.setHours(10, 30, 0, 0);
    end.setFullYear(2008, 10, 5);
    end.setHours(11, 0, 0, 0);

    newAppt.set_start(start);
    newAppt.set_end(end);
    newAppt.set_subject("Testing Appointment");

    scheduler.insertAppointment(newAppt);
}

I hope this helps.

Best wishes,
Dimitar Milushev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Fooberichu]

Beauty.  I knew the numbers in Javascript for the date was 0 based but when I was having trouble I changed to to 11 vs. 10 because I was grasping at straws.  Re using the "$find" -- DOH!  I feel like an idiot now. :)  I don't code enough straight Javascript to remember that; I always forget to use that function.

Now it works beautifully.  Thanks man!

[Jose Granja]

Hi,

I'm using that code and it works like charm! The problem is that when the appointment insertion fails in the web service call the appointment is not removed from the scheduler! how could I delete it in case the request fails??? 

[Peter]

Hello Fooberichu,

You can try handling OnClientRequestFailed and call RadScheduler's rebind() method.  


All the best,
Peter
the Telerik team

[Jose Granja]

Hi,

I forgot to be more specific about my issue. If I call the rebind() method after the insert unsuccessful (request failed) the advanced form windows would get closed! The way I have designed the system is: if the insert fails the Advanced Form Windows doesn't get closed so the user is able to fix whatever when wrong (most of the time it would be the users fault if something went wrong). Then when I call rebind this Advanced Form get closed and this usability gets lost.

If I call the rebind() method once the insert worked it won't work properly. If the insert only failed one time it would be all right but if it failed more than once it only removes the last appointment inserted wrongly (see picture attached)

I tried to manually remove the appointments using this:

function onRequestFailed() {
       $("#[title='undefined']").remove();
       removeTrashAppointments();
}

function removeTrashAppointments() {
                var newArray = $.makeArray();
                $.each(GetScheduler().get_appointments()._array, function() {
                    if (this.get_id()) {
                        newArray.push(this);
                    }
                });

                GetScheduler().get_appointments()._array = newArray;
            }

everything works ok but if the appointment failed 3 times and then succeeded the succeeded appointment would be displayed 1/4 of it's size as if the appointments were not removed.

any thoughts?

Thanks for your help

regards,

jose

[Peter]

Hi Jose,

I am not sure what you exact implementation is. Can you please open a support ticket and send us a simple working demo of the issue?

Best wishes,
Peter
the Telerik team

[Jose Granja]

I'm afraid is it really hard to deliver a demo only to show this problem.

my scenario is:

- open AdvancedForm to insert an appointment
- if the insertion fails: the AdvancedForm doesn't get closed 
- user reads errors and tries to fix whatever when wrong
- if insertion succeed the AdvancedForm gets closed and the scheduler is rebinded

if the insertion fails more than one time the rebind only corrects de first error. 

that why what I was doing is trying to delete the appointments with no ID binded to them (if they don't have ID it means that the insert fails) and then repaint the Scheduler.

[Jose Granja]

I made a temporary fix:

as my diary can't have any shoe horn appointments I've added to all appointments the class shoeHorn:

.shoeHorn
{
   left: 0% !important;
   width: 100% !important;
}

then the rendering problem dissapear. Even if I was deleting the appointments that where not successfully inserted in the appointment div y still got the style = " width: XX%; left: XX%" . this style property didn't seem to get refreshed once I deleted the appointments not inserted. I don't know if it's a bug or not because the appointment inserted won't render properly if I didn't refresh the page.

hope that helps,

regards,

jose