'Fullcalendar using 'allDay: false' is not working resize event
I searched for answers to many questions in StackOverflow but could not come to a conclusion for solving this problem.
- When I put "allDay: false" in the events code, I can't resize the event. but the date in the calendar will be complete and correct.
ts code:
this.calendarOptions = {
headerToolbar: {
left: 'prev,next',
right: 'title',
},
dayMaxEventRows: 1,
height: '520px',
initialView: 'dayGridMonth',
displayEventTime: false,
events: [
{title: 'test1', start: new Date('2022-01-05'), end: new Date('2022-01-06'), allDay: false},
{title: 'test2', start: new Date('2022-01-09'), end: new Date('2022-01-11'), allDay: false},
{title: 'test3', start: new Date('2022-01-15'), end: new Date('2022-01-17'), allDay: false},
{title: 'test4', start: new Date('2022-01-25'), end: new Date('2022-01-27'), allDay: false}
],
selectable: true,
select: this.selectDate.bind(this),
dayMaxEvents: 3,
droppable: true,
editable:true,
eventDrop: function (info) {
},
eventChange: (info) => {
},
};
display:
- When I put "allDay: true" in the events code, I can resize the event. But the date on the calendar is the end date wrong by one day.
ts code:
this.calendarOptions = {
headerToolbar: {
left: 'prev,next',
right: 'title',
},
dayMaxEventRows: 1,
height: '520px',
initialView: 'dayGridMonth',
displayEventTime: false,
events: [
{title: 'test1', start: new Date('2022-01-05'), end: new Date('2022-01-06'), allDay: true},
{title: 'test2', start: new Date('2022-01-09'), end: new Date('2022-01-11'), allDay: true},
{title: 'test3', start: new Date('2022-01-15'), end: new Date('2022-01-17'), allDay: true},
{title: 'test4', start: new Date('2022-01-25'), end: new Date('2022-01-27'), allDay: true}
],
selectable: true,
select: this.selectDate.bind(this),
dayMaxEvents: 3,
droppable: true,
editable:true,
eventDrop: function (info) {
},
eventChange: (info) => {
},
};
display:
- When I did not put "allDay: false" in the events code, I can resize the event. But the date on the calendar is the end date wrong by one day.
ts code:
this.calendarOptions = {
headerToolbar: {
left: 'prev,next',
right: 'title',
},
dayMaxEventRows: 1,
height: '520px',
initialView: 'dayGridMonth',
displayEventTime: false,
events: [
{title: 'test1', start: ('2022-01-05'), end: ('2022-01-06')},
{title: 'test2', start: ('2022-01-09'), end: ('2022-01-11')},
{title: 'test3', start: ('2022-01-15'), end: ('2022-01-17')},
{title: 'test4', start: ('2022-01-25'), end: ('2022-01-27')}
],
selectable: true,
select: this.selectDate.bind(this),
dayMaxEvents: 3,
droppable: true,
editable:true,
eventDrop: function (info) {
},
eventChange: (info) => {
},
};
display:
what should I do for the date of the event is displayed correctly and can adjust the event size.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|