我添加了一个datepicker（http://www.eyecon.ro/datepicker/）在fullcalendar（http://fullcalendar.io）页面下方。
如何将此日期选择器连接到FullCallendar标题上的自定义按钮，当按下按钮时，DatePicker将显示？
谢谢
更新：添加了代码
编辑：代码更新
我到目前为止写的代码是：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>
我正在尝试做同样的事情：将jQuery DatePicker添加到FullCalendar自定义按钮。有人知道该怎么做吗？
我能做的最好的就是声明两个，一个在另一个上方，然后将datePicker Select事件链接到FullCalendar Update视图事件（请参阅下面的示例）。它可以正常工作，但我想要的是在FullCalendar自定义按钮中宣布datepicker，而不是在Div中
感谢您的反馈！
示例我正在做什么：
$(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>
以后：
谢谢：这个github fullcalendar问题，我能够有一个datepicker到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'
},
您是否查看了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
});//$
这是我的基本无jQuery解决方案， fullcalendar 4 和 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/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>