Sala33_FreebirdTech/Views/Calendar/Index.cshtml
@{ ViewData["Title"] = "HTML5/JavaScript Event Calendar (Open-Source)"; }

@section Head{
    <link type="text/css" rel="stylesheet" href="themes/calendar_g.css" />
    <link type="text/css" rel="stylesheet" href="themes/calendar_green.css" />
    <link type="text/css" rel="stylesheet" href="themes/calendar_traditional.css" />
    <link type="text/css" rel="stylesheet" href="themes/calendar_transparent.css" />
    <link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />
}

<div style="display: flex">

    <div style="margin-right: 10px;">
        <div id="nav"></div>
    </div>

    <div style="flex-grow: 1;">

        <div class="space">
            Theme: <select id="theme">
                <option value="calendar_default">Default</option>
                <option value="calendar_white">White</option>
                <option value="calendar_g">Google-Like</option>
                <option value="calendar_green">Green</option>
                <option value="calendar_traditional">Traditional</option>
                <option value="calendar_transparent">Transparent</option>
            </select>
        </div>

        <div id="dp"></div>
    </div>

</div>


<script src="~/lib/daypilot/daypilot-all.min.js" asp-append-version="true"></script>
<script>const nav = new DayPilot.Navigator("nav");
    nav.showMonths = 3;
    nav.skipMonths = 3;
    nav.selectMode = "week";
    nav.onTimeRangeSelected = args => {
        dp.startDate = args.day;
        dp.update();
        loadEvents();
    };
    nav.init();

    const dp = new DayPilot.Calendar("dp");
    dp.viewType = "Week";

    dp.eventDeleteHandling = "Update";

    dp.onEventDeleted = args => {
        DayPilot.Http.ajax({
            url: "/api/CalendarEvents/" + args.e.id(),
            method: "DELETE",
            success: () => {
                console.log("Deleted.");
            }
        });
    };

    dp.onEventMoved = args => {
        DayPilot.Http.ajax({
            url: "/api/CalendarEvents/" + args.e.id(),
            method: "PUT",
            data: {
                id: args.e.id(),
                start: args.newStart,
                end: args.newEnd,
                text: args.e.text()
            },
            success: () => {
                console.log("Resized.");
            }
        });
    };

    dp.onEventResized = args => {
        DayPilot.Http.ajax({
            url: "/api/CalendarEvents/" + args.e.id(),
            method: "PUT",
            data: {
                id: args.e.id(),
                start: args.newStart,
                end: args.newEnd,
                text: args.e.text()
            },
            success: () => {
                console.log("Resized.");
            }
        });
    };

    // event creating
    dp.onTimeRangeSelected = async args => {
        const form = [
            {name: "Name", id: "text"}
        ];

        const modal = await DayPilot.Modal.form(form, {});
        dp.clearSelection();

        if (modal.canceled) {
            return;
        }

        DayPilot.Http.ajax({
            url: "/api/CalendarEvents",
            method: "POST",
            data: {
                start: args.start,
                end: args.end,
                text: modal.result.text
            },
            success: ajax => {
                const data = ajax.data;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: data.id,
                    text: modal.result.text
                });
                console.log("Created.");
            }
        });

    };

    dp.onEventClick = async args => {
        const form = [
            {name: "Name", id: "text"}
        ];

        const modal = await DayPilot.Modal.form(form, args.e.data);
        if (modal.canceled) {
            return;
        }

        DayPilot.Http.ajax({
            url: "/api/CalendarEvents/" + args.e.id(),
            method: "PUT",
            data: {
                id: args.e.id(),
                start: args.e.start(),
                end: args.e.end(),
                text: modal.result.text
            },
            success: () => {
                dp.events.update({
                    ...args.e.data,
                    text: modal.result.text
                });
                console.log("Updated.");
            }
        });
    };

    dp.init();

    loadEvents();

    function loadEvents() {
        dp.events.load("/api/CalendarEvents");
    }

    const elements = {
        theme: document.querySelector("#theme")
    };

    elements.theme.addEventListener("change", () => {
        dp.theme = elements.theme.value;
        dp.update();
    });</script>