Making the Full Calendar droppable

Another note on the Full Calendar I posted earlier. Here’s how you could make it respond to drag and drop events using jquery.

1. Make something draggable

    $("#img_myimage").draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag        
    });

2. Make your calendar capable of accepting draggable objects (in the calendar setup)

    droppable: true,

3. Add a call back method to your calendar to fire when something is dropped on it (in the calendar setup)
As an example, let’s just do an AJAX call to a page if the object is dropped on a date of today or in the future. Ignore else.

        drop: function (date, allDay) {
            var now = new Date();
            var yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
            if (date > yesterday) {
                $("#dialog_somedivtagopensup").dialog("open");
                $.ajax({
                    type: "GET",
                    url: "SomeWebPage.aspx,
                    cache: false,
                    success: function (html) {
                        $("#dialog_somedivtagopensup").html(html);
                    }
                });
                return false;
            };
        }

4. You could even add a bit to it, say you want to read something in later, like maybe distinguish between a couple of objects that have been dropped.
Let’s say you have 2 draggable objects.

    $("#img_draggable1").data('taskname', 'Task1');
    $("#img_draggable2").data('taskname', 'Task2');

In the drop function of the calendar object, you could check for this information.

    var taskName = $(this).data('taskname');
    if (taskName == "Task1") {
        //do something
    } else {
        //do something else
    };
Advertisements
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: