I'm trying to modify the FullCalendar month view so each day cell has an input element.
Here's my code:
(...)
dayRender: function (date, cell) {
cell.append('<input type="number" style="margin-top: 60px; width: 30%; margin-left: 2px; z-index: 10; pointer-events: all!important">');
}
(...)So far, that input is showing but it doesn't focus on click. How would I go about making it focus?
As you can see, I tried seeting the pointer-events of the input to all, while setting the table pointer-events to none, but the result is the same.
I know it's probably a bit too late for you to answer this question but this can be fixed with simple CSS by adding higher z-index on calendar background:
.fc-row .fc-bg {
z-index: 5;
}
I hope it helps for someone who was looking for the same problem.
I have been trying and it works handling the event of dayClick. So, when the day is clicked I manually focus the input. Here is the code:
dayClick: function() {
$(this).find("input").focus();
}
Maybe is not the best solution but it works.