Kawane Events Creator Portal — Part 3

The Color selector

Google calendar allows users to choose a color for each event. Spatie’s ‘laravel-google-calendar’ allows you to select a color.

Spatie Docs

Available Colors for Google Calendar events

This code generates a simple an intuitive color selector with 10 options, allowing the user to choose a color for their events. The selected color is submitted as a form value associated with the radio button that the user clicks.

My view looks like this:

<!-- a list of available colors for Google Calendar events -->
@php
    $colors = ['#a4bdfc', '#7ae7bf', '#dbadff', '#ff887c', '#fbd75b', '#ffb878', '#46d6db', '#e1e1e1', '#5484ed', '#51b749'];
@endphp

<div>
    <x-input-label for="color" :value="__('Color Selector for your events')" /><br />

    <!-- Bootstrap　Button group for color options -->
    <div class="btn-group btn-group-lg" role="group" aria-label="Basic mixed styles example" style="height: 35px;">

        <!-- Loop through color options -->
        @for ($i = 1; $i <= 10; $i++)

            <!-- Hidden radio input for each color -->
            <input type="radio"
                class="btn-check visually-hidden"
                name="colorselector"
                id="color_{{ $i }}"
                value="{{ $i }}"
                autocomplete="off"
                style="display: none;"
                @if (old('colors', $user->colors) == $i || ($i === 1 && $user->colors === null)) checked @endif
            />

            <!-- Color label/button -->
            <label class="btn" style="background-color: {{ $colors[$i-1] }}; height: 100%;" for="color_{{ $i }}"></label>
        @endfor
    </div>
</div>

The user can select their color for events which they create.

The controller looks like this:

$selectedcolor = $user->colors;

Event::create([
            'name' => $request->input('event_title'), 
            'startDateTime' => $startDateTime,
            'endDateTime' => $endDateTime,
            'description' => $request->input('description'),
            'colorId' => $selectedcolor,
        ]);

An event on the calendar with orange (for example) as the selected color.

I thought it was pretty clever. Wait, you’re probably asking, “From where did you get the hexadecimal color list from? You didn’t import the screenshot into photoshop and use the dropper tool, did you? And to figure out which of spatie’s colorIDs correspond with which actual event color, did you have to manually test each one?”

Yes, I did.

Though I only did 10 colors

github repository

Kawane Events — Part 1 :: Part 2 :: Part 3 :: Part 4