FullCalendar show time

I use the Filament [FullCalender plugin] (https://filamentphp.com/plugins/saade-fullcalendar#returning-events) to display a calendar in my Filament dashboard.

It works but i can't seem to figure out the following:

The start & end date both use the same date column from my database. It displays the event on the proper date but i want to add the time as well. My events are stored with separate time columns, so each event has a date, a start_time and an end_time column.

What i want to achieve is combine the columns to get a start datetime and an end datetime so i can is them in the plugin:

public function fetchEvents(array $fetchInfo): array
    {
        return Event::query()
            ->where('starts_at', '>=', $fetchInfo['start'])
            ->where('ends_at', '<=', $fetchInfo['end'])
            ->get()
            ->map(
                fn (Event $event) => [
                    'title' => $event->id,
                    'start' => $event->starts_at,
                    'end' => $event->ends_at,
                    'url' => EventResource::getUrl(name: 'view', parameters: ['record' => $event]),
                    'shouldOpenUrlInNewTab' => true
                ]
            )
            ->all();
    }

I tried it like this:

public function getFullDateObject($date, $time): string {
		$datetimeString = $date . ' ' . $time;

		try {
			$datetime = new DateTime($datetimeString);

			return $datetime->format('Y-m-d H:i:s');
		} catch ( Exception $e ) {
			return 'Error: ' . $e->getMessage();
		}
	}

But it does not show any event.

tykus

1 year ago

Level 104

What are the relevant columns on the database table?

El Klo

1 year ago

Level 11

@tykus Each event has a date column (which is date) and both a start_time and an end_time column (both are only time).

tykus

1 year ago

Best Answer

Level 104

@El Klo so, in the query you will need to combine the date with start_time and date with end_time for comparison:

Event::query()
    ->whereRaw('TIMESTAMP(`date`, start_time) >= ?', [$fetchInfo['start']])
    ->whereRaw('TIMESTAMP(`date`, end_time) <= ?', [$fetchInfo['end']])
    ->get()

Then map over the results, and build your EventData:

->map(
    fn (Event $event) => [
        'title' => $event->id,
        'start' => "{$event->date} {$event->start_time}", // combine the two properties
        'end' => "{$event->date} {$event->end_time}", // combine the two properties
        'url' => EventResource::getUrl(name: 'view', parameters: ['record' => $event]),
            'shouldOpenUrlInNewTab' => true
    ])->all();

This should display the necessary information on the Calendar.

Aside, since you will likely need this functionality elsewhere, I would suggest implementing query scope(s) on the Event model for the start/end datetime query constraints, and Accessors for the start and end datetimes.

public function scopeStartingAfter($builder, $datetime)
{
    $builder-> whereRaw('TIMESTAMP(`date`, start_time) >= ?', [$datetime])
}

public function scopeEndingBefore($builder, $datetime)
{
    $builder-> whereRaw('TIMESTAMP(`date`, endtime) >= ?', [$datetime])
}

public function startsAt(): Attribute
{
    return Attribute::get(function ($value, $attributes) {
        return Carbon::make($attributes['date'])->setTimeFromTimeString($attributes['start_time'])
    });
}

public function endsAt(): Attribute
{
    return Attribute::get(function ($value, $attributes) {
        return Carbon::make($attributes['date'])->setTimeFromTimeString($attributes['end_time'])
    });
}

2 likes

El Klo

1 year ago

Level 11

@tykus Worked like a charm, thanks for the assistance!

Please or to participate in this conversation.