Adding a datePicker in FullCalendar / custom button click

Question

I added a datePicker (http://www.eyecon.ro/datepicker/) right below the FullCalendar (http://fullcalendar.io) page.

how can i attach this date picker to a custom button on the header of the fullcallendar and when the button is pressed the datepicker will show up?

thanks

UPDATE: added code

EDIT: code updated

the code i written so far is: 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

Have you looked at fullcalendar custom buttons?

customButtons documentation

You should be able to do something like this:

$(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

I'm trying to do the same thing : adding jquery datepicker to fullcalendar custom button. Does anyone know how to do this?

The best I can do is declaring both, one on top of the other, and linking datepicker select event to fullcalendar update view event (see sample below). It works fine but what I want is declaring datepicker inside fullcalendar custom button rather than outhere in a div.

Thanks for your feedbacks!

Sample of what I'm doing :

    $(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>

LATER:

Thanks to : This github fullcalendar issue I've been able to had a datepicker to fullcalendar header custom button.

This is how to proceed :

 $(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'
        },

Answer 3

This is my basic no jQuery solution with Fullcalendar 4 and Pikaday

 document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    
    // Initialize fullcalendar
    var calendar = new FullCalendar.Calendar(calendarEl, {
    
        customButtons: {
            // Add custom datepicker
            datepicker: {
                text: 'My datepicker',
                click: function(e) {
                    picker.show();
                }
            }
        },
        
        // Add the custom button to the header
        header: {
            left: 'title',
            right: 'datepicker today prev,next month'
        },
        plugins: ['timeGrid'],
        defaultView: 'timeGridDay',
    });

    calendar.render();

    // Initialize Pikaday
    var picker = new Pikaday({
        field: document.querySelector('.fc-datepicker-button'),
        format: 'yy-mm-dd',
        onSelect: function(dateString) {
            picker.gotoDate(new Date(dateString));
            calendar.gotoDate(new Date(dateString));
        }
    });
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="calendar"></div>

    <link href="https://unpkg.com/@fullcalendar/core/main.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/@fullcalendar/timegrid/main.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/[email protected]/css/pikaday.css" rel="stylesheet">

    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timegrid/main.min.js"></script>
    <script src="https://unpkg.com/[email protected]/pikaday.js"></script>

</body>

</html>