Storing Start and End Dates for Events (All-day) in Laravel with FullCalendar Integration

Hi!

I'm currently working on a Laravel-based calendar application and I'm facing a decision point on how to store and manage all-day events, especially when integrating with FullCalendar.

At present, I use the dateTime column type in my database. For all-day events, I've been storing them as follows:

start: "2023-08-21 00:00:00"
end: "2023-08-23 00:00:00"

In many areas of my app, I mostly utilize the date portion and not so much the time. Displaying this information in a list format using Laravel's Blade view is quite straightforward. (I could use a function In the model to generate the right format, but you get the idea.)

@forelse ($events as event)
    {{ date('Y-m-d', strtotime(event->start))}} -  {{ date('Y-m-d', strtotime(event->end))}}
    {{ event->title}}
@empty

However, the problem arises when visualizing these events in eg FullCalendar.io. The event is "one day to short". And from at "computer perspective" it is correct. But not for a user. A user would expect that the event is shown on the 21st to the 23nd of August. And that it is 3 days long.

One way to solve this is to let the user pick "2023-08-23" but store is as "2023-08-24" in the database. end: "2023-08-24 00:00:00"

This alteration aligns well when it comes to calculate date difference in postgres and ensures that the event spans the whole day in the calendar view. Nevertheless, this approach leads to a discrepancy when I present the data in Blade, as the date might appear to extend beyond the actual event's duration.

I'm thinking about where to implement this date adjustment:

Adjust the date when sending events to FullCalendar (e.g., by adding an extra day). If events are modified via drag-and-drop in the frontend, I'd then modify the date again before saving it back to the database.

Store the event dates in the more "correct/standardized" manner (i.e., end date as the next day's start time) and make necessary adjustments in either the model or controller when presenting the data in Blade.

I'd appreciate insights or best practices from anyone who has navigated this dilemma. Which approach do you think is more maintainable and less prone to potential pitfalls? Are there alternative solutions that I might not have considered?

Thanks in advance!

LaryAI

2 years ago

Level 58

One possible solution to this dilemma is to store the event dates in the more "correct/standardized" manner, where the end date is the start time of the next day. This approach ensures that the event spans the whole day in the calendar view and aligns well when calculating date differences.

To handle the presentation of the data in Blade, you can make necessary adjustments in either the model or controller. One approach is to create an accessor in your model that formats the start and end dates for display. Here's an example:

// Event model

public function getFormattedStartDateAttribute()
{
    return $this->start->format('Y-m-d');
}

public function getFormattedEndDateAttribute()
{
    return $this->end->subDay()->format('Y-m-d');
}

In your Blade view, you can then use these accessor methods to display the formatted dates:

@forelse ($events as $event)
    {{ $event->formattedStartDate }} - {{ $event->formattedEndDate }}
    {{ $event->title }}
@empty
    No events found.
@endforelse

This way, the dates will be displayed correctly in the list format, taking into account the adjusted end date.

When sending events to FullCalendar, you can add an extra day to the end date to ensure that the event spans the correct duration. If events are modified via drag-and-drop in the frontend, you can modify the date again before saving it back to the database.

Overall, this approach allows you to store the event dates in a standardized manner, handle the presentation in Blade, and ensure the correct duration in FullCalendar.

krisi_gjika

2 years ago

Level 14

if the event is meant to span whole 3 days, why not store it as such

start: "2023-08-21 00:00:00"
end: "2023-08-23 23:59:59"

Snapey

2 years ago

Level 122

the other way to think about it is that the user selects 21st to 23rd and you store it as three 1 day events

TobiasS

2 years ago

Level 10

Thx! For fast reply.

I want to be able to export the calendar to a "iCal-feed" for eg be shown in gmail or outlook, so I do not think storing it as three 1 day event is the solution here. May be the "23:59:59" solution, must check how gmail or outlook handles it so the "export" hopefully can work "easy".

Any experience from this? (not on how to export, but on how to store the dates)

Please or to participate in this conversation.