Skip to content

Calendar not opening on today #1569

Open
@duranaaron

Description

@duranaaron

Flux version

v2.1.5

Livewire version

v3.6.3

Tailwind version

v4.1.5

Browser and Operating System

Brave on macOS

What is the problem?

I am using the Calendar Flux component, when loading it, it loads selected dates from the database. That works fine, but I noticed everytime I refresh it opens the calendar to the first selected date in the calendar.

CleanShot.2025-05-01.at.23.20.47.mp4

Code snippets

<div class="space-y-6">
    <div>
        <flux:heading size="lg" class="mb-2 text-zinc-800 dark:text-zinc-200">{{ __('Selecteer je fietsdagen') }}</flux:heading>
        <flux:text class="text-zinc-600 dark:text-zinc-400">
            {{ __('Klik op een datum om deze te selecteren of te deselecteren. De selectie wordt automatisch opgeslagen.') }}
        </flux:text>
    </div>

    <div class="rounded-lg bg-gray-50 p-4 dark:bg-zinc-800/50">
        <div class="flex items-center gap-3 mb-3">
            <flux:icon name="information-circle" class="h-5 w-5 text-blue-500" />
            <flux:text class="text-sm text-blue-600 dark:text-blue-400">
                {{ __('Geselecteerde dagen worden automatisch geregistreerd met 10 km en een vergoeding van €0.14 per km.') }}
            </flux:text>
        </div>

        <flux:calendar
            multiple
            with-today
            selectable-header
            wire:model.live="selectedDates"
            max="today"
            size="xl"
            class="bg-transparent"
        />
    </div>
</div>
<?php

namespace App\Livewire;

use App\Models\BikeDay;
use Carbon\Carbon;
use Illuminate\Support\Facades\Log;
use Livewire\Component;

class SubmitBikeDay extends Component
{
    public $selectedDates = [];
    public $prevSelectedDates = [];

    public function mount(): void
    {
        $userId = auth()->id();
        if (!$userId) {
            return;
        }
        $this->selectedDates = BikeDay::where('user_id', $userId)
            ->pluck('date')
            ->map(fn ($date) => Carbon::parse($date)->format('Y-m-d'))
            ->toArray();

        $this->prevSelectedDates = $this->selectedDates;
    }

    public function updatedSelectedDates()
    {
        $this->save();
    }

    public function save()
    {
        $userId = auth()->id();

        if (!$userId) {
            return;
        }

        // Geselecteerde datums (uit Livewire) filteren en standaardiseren naar 'Y-m-d'
        $selected = collect($this->selectedDates ?: [])
            ->filter(fn ($d) => strtotime($d)) // enkel geldige datums
            ->map(fn ($d) => Carbon::parse($d)->format('Y-m-d'))
            ->unique()
            ->values()
            ->toArray();

        // Huidige fietsdagen van gebruiker ophalen en ook standaardiseren
        $existingDays = BikeDay::where('user_id', $userId)->get();
        $existingDates = $existingDays->pluck('date')
            ->map(fn ($d) => Carbon::parse($d)->format('Y-m-d'))
            ->toArray();

        // Diff bepalen
        $toAdd = collect($selected)->diff($existingDates);
        $toRemove = collect($existingDates)->diff($selected);

        // Toevoegen
        foreach ($toAdd as $date) {
            BikeDay::create([
                'user_id' => $userId,
                'date' => $date,
                'distance_km' => 10,
                'rate_per_km' => 0.14,
                'notes' => 'Automatisch aangemaakt',
            ]);
        }

        // Verwijderen
        if ($toRemove->isNotEmpty()) {
            $datesToRemove = $toRemove->values()->all();

            try {
                foreach ($datesToRemove as $dateToRemove) {
                    $formattedDate = Carbon::parse($dateToRemove)->toDateString();
                    BikeDay::where('user_id', $userId)
                        ->whereDate('date', $formattedDate)
                        ->delete();
                }
            } catch (\Exception $e) {
                Log::error("Fout bij verwijderen datums: " . $e->getMessage());
            }
        }

        // Bijwerken van prevSelectedDates
        $this->prevSelectedDates = $selected;
        $this->dispatch('updatedRides');
    }

    public function render()
    {
        return view('livewire.submit-bike-day');
    }
}

How do you expect it to work?

It should open on the current day, I tried adding the open-to attribute but that wouldn't work either.

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions