Question

我在FullCalendar（http://www.eyecon.ro/datepicker/）页面的正下方添加了一个datePicker（http://fullcalendar.io）。

如何将此日期选择器附加到fullcallendar标题上的自定义按钮，按下该按钮时会显示日期选择器？

感谢

更新：添加了代码

编辑：代码已更新

我到目前为止编写的代码是： 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

您是否查看过fullcalendar自定义按钮？

customButtons文档

你应该可以这样做：

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

我尝试做同样的事情：将jquery datepicker添加到fullcalendar自定义按钮。有谁知道怎么做？

我能做的最好的事情就是同时声明两者，并将datepicker select事件链接到fullcalendar更新视图事件（参见下面的示例）。它工作正常，但我想要的是在fullcalendar自定义按钮内声明datepicker而不是div中的outhere。

感谢您的反馈！

我正在做的事情的样本：

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

后来：

感谢：This github fullcalendar issue我已经能够为fullcalendar标头自定义按钮设置日期选择器。

这是如何进行的：

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

这是我使用 Fullcalendar 4 和 Pikaday

的基本的jQuery解决方案

 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/daygrid@4.3.0/main.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/@fullcalendar/timegrid/main.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/pikaday@1.8.0/css/pikaday.css" rel="stylesheet">

    <script src="https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/moment@4.3.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timegrid/main.min.js"></script>
    <script src="https://unpkg.com/pikaday@1.8.0/pikaday.js"></script>

</body>

</html>

在FullCalendar / custom按钮中添加datePicker单击

3 个答案: