turf-tasker/Views/LawnCareEvents/Calendar.cshtml

@{
    ViewData["Title"] = "Lawn Care Calendar";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>@ViewData["Title"]</h1>
    <a asp-action="Create" asp-controller="LawnCareEvents" class="btn btn-primary">
        <i class="bi bi-plus-circle-fill"></i> Create New Event
    </a>
</div>

<div class="calendar-container">
    <div class="calendar-header">
        <button id="prevMonth" class="btn btn-secondary">&lt; Prev</button>
        <h2 id="currentMonthYear"></h2>
        <button id="nextMonth" class="btn btn-secondary">Next &gt;</button>
    </div>
    <div class="calendar-grid">
        <div class="day-name">Sun</div>
        <div class="day-name">Mon</div>
        <div class="day-name">Tue</div>
        <div class="day-name">Wed</div>
        <div class="day-name">Thu</div>
        <div class="day-name">Fri</div>
        <div class="day-name">Sat</div>
    </div>
    <div id="calendarDays" class="calendar-grid">
        
    </div>
</div>

@section Scripts {
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            const calendarDaysEl = $('#calendarDays');
            const currentMonthYearEl = $('#currentMonthYear');
            const prevMonthBtn = $('#prevMonth');
            const nextMonthBtn = $('#nextMonth');

            let currentMonth = new Date().getMonth();
            let currentYear = new Date().getFullYear();
            let allEvents = [];

            function renderCalendar(month, year) {
                calendarDaysEl.empty();
                currentMonthYearEl.text(new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' }));

                const firstDayOfMonth = new Date(year, month, 1);
                const lastDayOfMonth = new Date(year, month + 1, 0);
                const daysInMonth = lastDayOfMonth.getDate();

                const startDayOfWeek = firstDayOfMonth.getDay();

                const prevMonthLastDay = new Date(year, month, 0).getDate();
                for (let i = startDayOfWeek; i > 0; i--) {
                    const dayNum = prevMonthLastDay - i + 1;
                    calendarDaysEl.append(`<div class="calendar-day other-month"><span class="day-number">${dayNum}</span></div>`);
                }

                for (let day = 1; day <= daysInMonth; day++) {
                    const date = new Date(year, month, day);
                    const dateString = date.toISOString().split('T')[0];

                    let dayHtml = `<div class="calendar-day" data-date="${dateString}">`;
                    dayHtml += `<span class="day-number">${day}</span>`;

                    const eventsOnThisDay = allEvents.filter(event => event.start === dateString);

                    eventsOnThisDay.forEach(event => {
                        const typeClass = event.title.split(' ')[0].toLowerCase().replace(/[^a-z0-9]/g, '');
                        dayHtml += `<div class="event-indicator ${typeClass}" data-event-id="${event.id}" data-event-url="${event.url}">${event.title}</div>`;
                    });

                    dayHtml += `</div>`;
                    calendarDaysEl.append(dayHtml);
                }

                const totalDaysDisplayed = startDayOfWeek + daysInMonth;
                const remainingCells = 42 - totalDaysDisplayed;
                for (let i = 1; i <= remainingCells && totalDaysDisplayed + i <= 42; i++) {
                    calendarDaysEl.append(`<div class="calendar-day other-month"><span class="day-number">${i}</span></div>`);
                }

                $('.calendar-day .event-indicator').on('click', function (e) {
                    e.stopPropagation();
                    const url = $(this).data('event-url');
                    if (url) {
                        window.location.href = url;
                    }
                });

                $('.calendar-day:not(.other-month)').on('click', function () {
                    const date = $(this).data('date');
                    window.location.href = `/LawnCareEvents/Create?date=${date}`;
                });
            }

            async function fetchEvents() {
                try {
                    const response = await fetch('/LawnCareEvents/GetEventsJson');
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    allEvents = await response.json();
                    renderCalendar(currentMonth, currentYear);
                } catch (error) {
                    console.error('Error fetching events:', error);
                }
            }

            prevMonthBtn.on('click', function () {
                currentMonth--;
                if (currentMonth < 0) {
                    currentMonth = 11;
                    currentYear--;
                }
                renderCalendar(currentMonth, currentYear);
            });

            nextMonthBtn.on('click', function () {
                currentMonth++;
                if (currentMonth > 11) {
                    currentMonth = 0;
                    currentYear++;
                }
                renderCalendar(currentMonth, currentYear);
            });

            fetchEvents();
        });
    </script>
}

@section Styles {
    <link href="~/css/calendar.css" rel="stylesheet" asp-append-version="true" />
}