I am currently working on a web app, and I wanted to embed a calendar. I went with fullcalendar 4 as it looked nice and I only want to use it to display events. I set up the calendar and I’m showing my events to the user based on a json that fullcalendar fetches from the server side via ajax.
All is fine, but my problem is that most of the events are multi-day events and I don’t like the default behavior of the allDay option. As you probably know, it only has 2 options true or false. I want the calendar show my multi-day events as allday in between the first and last day of the event. But here comes my problem. What about the first and last day? It will also show up as all-day events and I don’t want that. I want the start date to show up only from the hour it really starts, and show the last date end hour as well. Now I can achieve this if I set allDay to false but guess what. Now the in-between days are showing up not as allday events and junks the calendar.
I thought there may be an “auto” option for the desired behavior, but turns out there is no such thing (as far as I know). Maybe some of you js/fullcalendar experts can help me out here.
Noice that I am not talking about to display the end time of the event for a multi-day event in the monthly view, what I want is when I go in to the day or week view, I can see the first day from only when it really start and the last day should go as far as the end hour of that particular event.
I do have an idea for a possible solution. Split the events that are longer than a day into 2 or 3 events and if the event is longer than 2 days I will set the middle days/days to allDay: true and to false on the rest.
What do you think? Am I on the right track or is there a better solution?
I really don’t want to set allDay to false on every long event as they will junk the user’s calendar full of long lines even on the weekly and daily view.
UPDATE JS:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid', 'timeGrid'],
header: {
left: 'title',
center: 'dayGridMonth,timeGridWeek,timeGridDay',
right: 'prev,next today'
},
navLinks: true,
nowIndicator: true,
height: "parent",
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false
},
events: '/includephp/calendarjsonstream.php',
displayEventTime: false,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false
},
allDaySlot: false
});
calendar.render();
});
PHP class (function gets invoked in calendarjsonstream.php)
public static function calendarJsonStream($userid, $subdomain) {
$dbinfo = new dbinfo();
$conn = $dbinfo->connect();
$sql = "mysecretsqlquery";
$query = $conn->prepare($sql);
$query->execute(array(
':userid' => $userid,
':companyname' => $subdomain
));
$result = $query->fetchAll();
if (count($result) < 1) {
$data[] = array('rowcount' => 0);
} else {
$counter = 0;
foreach ($result as $row) {
$counter++;
if ($row['start_date'] === null) {
$eventStartDate = $row['submit_date'];
} else {
$eventStartDate = $row['start_date'];
}
if ($row['importance'] === 'important') {
$eventBackgroundColor = "red";
} else {
$eventBackgroundColor = "blue";
}
$data[] = array(
'id' => 'modal-button' . $counter,
'title' => $row['title'],
'start' => $eventStartDate . 'Z', //Z is for UTC time
'end' => $row['end_date'] . 'Z',
'classNames' => array('open-options-calendar', 'button', 'modal-button' . $counter),
'backgroundColor' => $eventBackgroundColor,
'borderColor' => $eventBackgroundColor,
'allDay' => false
);
}
}
echo json_encode($data);
}
Sidenote : I modified fullcalednar's main.js file a littlebit so that i can fetch down every event from the database and it will stop sending ajax request to the server when user clicks next month button.
Currently I'm setting all the events as allDay: false. This is still a better option for me than to display the long events as allDay as this way the first and last days of the event will be displayed as allDay as well while in reality they start somewhere in the afternoon let's say
UPDATE 2:
I ended up using another solution, it will do the job for now. If future users will complain about it, I will come back to this, but for now I need to keep moving forward coding the website as my time is quite limited.
