Hinzufügen eines datePicker in FullCalendar/benutzerdefinierte Schaltfläche klicken

Question

Ich habe einen datePicker (http://www.eyecon.ro/datepicker/) direkt unter der FullCalendar (http://fullcalendar.io) Seite hinzugefügt.

Wie kann ich diese Datumsauswahl an eine benutzerdefinierte Schaltfläche in der Kopfzeile des Fullcallendar anhängen und wenn die Schaltfläche gedrückt wird, wird der Datumsauswahl angezeigt?

dank

UPDATE: Code hinzugefügt

EDIT: Code

der Code die ich bisher geschrieben aktualisiert ist: JS:

$(function() { 
     //...some code..... 
      //fullcalendar 
      $('#calendar').fullCalendar({ 
       //...options 
       header: { 
        left: 'title today', 
        center: '', 
        right: 'prevMonth prev myCustomButton next nextMonth' 
       }, 
       customButtons: { 
        myCustomButton: { 
         text: ' ', 
         click: function() { 
     $('#date').DatePicker({ 
      flat: true, 
      date: currentDate, 
      current: currentDate, 
      calendars: 2, 
      starts: 1, 
      onChange: function (formated, dates) { 
       $('#calendar').fullCalendar('gotoDate', formated); 
       } 
     }); 
       } 
        }, 
        //...other buttons 
       }, 
       //....other options.... 
      });//fullcalendar 
     });//$ 

ASP:

 <div> 
      <div id='calendar'></div> 
     </div> 
     <div> 
      <p id="date"></p> 
     </div> 

Answer 1

Haben Sie Vollkalender benutzerdefinierte Schaltflächen angesehen?

customButtons Dokumentation

Sie sollten so etwas tun können:

$(function() { 
    //... some code.... 
    // for the date picker 
    $('#date').DatePicker({ 
     flat: true, 
     date: currentDate, 
     current: currentDate, 
     calendars: 2, 
     starts: 1, 
     onChange: function (formated, dates) { 
      //when user clicks the date it scrols back up 
      $('#calendar').fullCalendar('gotoDate', formated); 
      $('body,html').animate({ 
       scrollTop: 0 
      }, 800); 
      $('#date').DatePickerHide(); 
     } 
    }); 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'title today', 
      center: '', 
      right: 'prevMonth prev myCustomButton next nextMonth' 
     }, 
     customButtons: { 
      myCustomButton: { 
       text: ' ', 
       click: function() { 
        //it scrolls to the position of the datepicker 
        $('body,html').animate({ 
         scrollTop: $(document).height() 
        }, 1000); 
        $('#date').DatePickerShow(); 
       } 
      }, 
      //...other buttons 
     }, 
      //....other options.... 
    });//fullcalendar 
});//$ 

Answer 2

Ich versuche, das gleiche zu tun: Hinzufügen von Jquery Datepicker benutzerdefinierte Schaltfläche fullcalendar. Weiß jemand, wie man das macht?

Das Beste, was ich tun kann, deklariert beide, eine über der anderen, und Verknüpfung von Datepicker wählen Ereignis zu Fullcalendar Update-Ansicht Ereignis (siehe Beispiel unten). Es funktioniert gut, aber was ich will, deklariert datepicker innerhalb Vollkalender benutzerdefinierte Schaltfläche und nicht in einem div.

Danke für Ihre Rückmeldungen!

Probe von dem, was ich tue:

$(document).ready(function() { 

    $('#datepicker').datepicker({ 

     showOn: "both", 
     buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
     buttonImageOnly: true, 
     buttonText: " ", 
     dateFormat:"yy-mm-dd", 
     onSelect: function (dateText, inst) { 
      $('#calendar').fullCalendar('gotoDate', dateText); 
     }, 

    }); 


    $('#calendar').fullCalendar({ 

     timezone : 'local', 
     height:750, 
     theme: true, 
     businessHours: true, 
     editable: true, 

     customButtons: { 
      datePickerButton: { 
       themeIcon:'circle-triangle-s', 
       click: function() { 
        $('#datepicker').datepicker("show"); 

       } 
      } 
     }, 

     // header 
     header: { 
      left: 'prev,next today datePickerButton', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
    }); 
}); 

(...) 

<p>Date <input type="text" id="datepicker"></p> 
<div id='calendar'></div> 

SPÄTER:

Dank: This github fullcalendar issue Ich habe in der Lage gewesen, um einen Datepicker hatte Header benutzerdefinierte Schaltfläche fullcalendar.

Dies ist, wie es weitergeht:

$(document).ready(function() { 
$('#calendar').fullCalendar({ 

     timezone : 'local', 
     height:750, 
     theme: true, 
     businessHours: true, 
     editable: true, 

     customButtons: { 
      datePickerButton: { 
       themeIcon:'circle-triangle-s', 
       click: function() { 


        var $btnCustom = $('.fc-datePickerButton-button'); // name of custom button in the generated code 
        $btnCustom.after('<input type="hidden" id="hiddenDate" class="datepicker"/>'); 

        $("#hiddenDate").datepicker({ 
         showOn: "button", 

         dateFormat:"yy-mm-dd", 
         onSelect: function (dateText, inst) { 
          $('#calendar').fullCalendar('gotoDate', dateText); 
         }, 
        }); 

        var $btnDatepicker = $(".ui-datepicker-trigger"); // name of the generated datepicker UI 
        //Below are required for manipulating dynamically created datepicker on custom button click 
        $("#hiddenDate").show().focus().hide(); 
        $btnDatepicker.trigger("click"); //dynamically generated button for datepicker when clicked on input textbox 
        $btnDatepicker.hide(); 
        $btnDatepicker.remove(); 
        $("input.datepicker").not(":first").remove();//dynamically appended every time on custom button click 

       } 
      } 
     }, 

     // header 
     header: { 
      left: 'prev,next today datePickerButton', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     },