问题
I am trying to get the 'dayClick' function to work on FullCalendar, but when I press on any empty day, nothing happens. I have searched all over SO and cannot find any solutions or figure out what's going on.
Here is my code:
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'title',
center: '',
right: 'prev,next today'
},
defaultView: 'month',
weekends: false,
editable: false,
selectable: true,
events: "/Home/GetEvents/",
eventClick: function (calEvent, jsEvent, view) {
alert('You clicked on event id: ' + calEvent.id
+ "\nSpecial ID: " + calEvent.someKey
+ "\nAnd the title is: " + calEvent.title);
},
dayClick: function (date, jsEvent, view) {
alert("Day Clicked");
$('#eventDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy'));
ShowEventPopup(date);
}
});
});
回答1:
Only relevant for FullCalender v2:
I found that on my calendar the div with the class fc-bg was hidden by using display:none;. It turns out that this is what the dayClick event is attached to, and since it was hidden, I could not click on it.
The reason why the fc-bg class had been hidden was because of a print CSS that I included on the page. It turns out that it is super important that this stylesheet has media="print" on the link, otherwise it will always be used.
When including the FullCalendar CSS files on your page, ensure that the links are like this:
<link href="/css/vendor/fullcalendar.min.css" rel="stylesheet" />
<link href="/css/vendor/fullcalendar.print.css" media="print" rel="stylesheet" />
回答2:
I used fullcalendar in company project ,when the table in below window view ,The dayClick not working, finally I find the css of "html{overflow-x:hidden}" result,I remove the css,it's ok.
回答3:
After spending further time on this and having confirmation from Ram Singh that his calendar worked fine with my code, I dug deeper into the packages I used and noticed I wasn't using bootstrap.js as this previously conflicted with my calendar. Consequently, I added this back in BUT updated it to the latest version in hope that it would resolve any dependency conflicts. I also updated all of my other packages to their latest versions in hope that this would also help and now it works perfectly! :)
Hopefully this information may help someone else!
回答4:
I have downloaded the code and just added your dayClick code in demo code it is working fine. Please see the below code:
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2016-01-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2016-01-01'
},
{
title: 'Long Event',
start: '2016-01-07',
end: '2016-01-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-01-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-01-16T16:00:00'
},
{
title: 'Conference',
start: '2016-01-11',
end: '2016-01-13'
},
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-01-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-01-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-01-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-01-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-01-28'
}
],
dayClick: function (date, jsEvent, view) {
alert("Day Clicked");
},
eventClick: function (event) {
alert('event');
}
});
});
<div id='calendar'>
i think you are missing to declare anything or you are getting any other error. Please check your Firebug console.
回答5:
My problem was close to: https://stackoverflow.com/a/39342912/6364246
dayClick only worked when I clicked on the screen visible without scrolling. I changed html css{overflow-y:scrolling} to {overflow-y:visible} and worked
回答6:
Ran into the same issue when using v4.2.0. Turns out that the interaction plugin wasn't loaded. The event is also now called dateClick instead of dayClick.
A working example is below.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 600,
plugins: [ 'dayGrid', 'interaction' ], // interaction plugin must be specified
dateClick: function(info) {
alert('Clicked on: ' + info.dateStr);
alert('Current view: ' + info.view.type);
// change the day's background color just for fun
info.dayEl.style.backgroundColor = 'red';
},
});
calendar.render();
});<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.2.0/main.js"></script>
<!-- interaction plugin must be included after core -->
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.2.0/main.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css" rel="stylesheet"/>
<div id="calendar"></div>回答7:
I have a similar problem with the fullcalendar v4.0.0 beta... I created a patch until it will fixed:
$('.fc-slats tr').on('click', function(e) {
e.stopPropagation();
var time:any = $(this).attr('data-time');
var parentOffset:any = $(this).parent().offset();
var positionX = e.pageX - parentOffset.left;
var width:any = $(this).width();
var dayOfWeek = (positionX) * 7 / (width);
dayOfWeek = Math.floor(dayOfWeek) + 1;
dayOfWeek = dayOfWeek == 7 ? 0 : dayOfWeek;
var auxDays:any = (moment(context.state.currentDate).day() - dayOfWeek) * -1;
var date:any = moment(context.state.currentDate).add('days', auxDays);
var auxTime:any = time.split(':');
date.set({hour:auxTime[0] - 0,minute:auxTime[1] - 0,second:0,millisecond:0})
date = date.toDate();
const elem = document.getElementById('modalFormSchedule');
const instance = Materialize.Modal.getInstance(elem as Element);
instance.open();
});
// Style
.fc-nonbusiness {
pointer-events: none !important;
}
来源：https://stackoverflow.com/questions/35988815/fullcalendar-dayclick-not-working-does-nothing