CODEWITHSUNDEEP
jquerydatepickerfullcalendar
Jaison James
Jaison James

Reputation: 4552

Modify jquery full calendar extenal event by using date picker

Can someone give me advice for below functionality is possible with jquery full calendar.

Once we drop a external event in to a date block, is it possible to extant the event by using a external date picker?

Eg:

  1. Dropped a event in to 02 May 2014.
  2. If user click on the event, a popup will show jquery Ui date picker.
  3. If user select the date to 05 may 2014, the event also should extend automatically to 5th.

Upvotes: 0

Views: 1316

Answers (1)

ShadeTreeDeveloper
ShadeTreeDeveloper

Reputation: 1581

I would utilize eventClick method to open a jquery ui dialog that contains a single text input with datepicker called on it. Utilizing the onSelect method of the datepicker you can update the start and end values of the event object passed to eventClick method. Then you can call the updateEvent method of fullcalendar passing it the same updated event.

eventClick: function(event){
    var input = $('<input type="text" id="datepicker" />');
    var $dialog = $('<div/>').dialog({autoOpen:true, modal:true});
    $dialog.append(input);
    $('#datepicker').datepicker({onSelect: function(date){
        // you'll have to manually format the date value
        // into something fullcalendar understands
        // I don't remember off the top of my head what 
        // format onSelect returns to you or what
        // fullcalendar requires.
        event.start = date;
        $calendar.fullCalendar('updateEvent', event);
    }});
}

Upvotes: 1

Related Questions