jube-fork/Jube.App/wwwroot/kendo/examples/scheduler/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Overview</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <script src="../content/shared/js/schedulerTasks.js"></script>

<div id="example" class="k-content">
    <div id="scheduler"></div>
</div>

<script id="event-template" type="text/x-kendo-template">
    <div class="template-container">
        # if (image != "") { #
        <img src="#= image #" style="height:25px; width: 25px;">
        # } #
        <h3 class="template-title-#= resources[0].value #">#: title #</h3>
    </div>
</script>

<script>
    var sampleDataNextID = schedulerTasks.length + 1;

    function getIndexById(id) {
        var idx,
            l = schedulerTasks.length;

        for (var j = 0; j < l; j++) {
            if (schedulerTasks[j].id == id) {
                return j;
            }
        }
        return null;
    }

    $(function () {
        var dataSource = new kendo.data.SchedulerDataSource({
            transport: {
                read: function (e) {
                    e.success(schedulerTasks);
                },
                create: function (e) {
                    e.data.id = sampleDataNextID++;
                    schedulerTasks.push(e.data);
                    e.success(e.data);
                },
                update: function (e) {
                    schedulerTasks[getIndexById(e.data.id)] = e.data;
                    e.success();
                },
                destroy: function (e) {
                    schedulerTasks.splice(getIndexById(e.data.id), 1);
                    e.success();
                }
            },
            error: function (e) {
                alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            },
            batch: false,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number" },
                        title: { field: "title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", field: "start" },
                        end: { type: "date", field: "end" },
                        description: { field: "description" },
                        recurrenceRule: { from: "recurrenceRule" },
                        recurrenceException: { from: "recurrenceException" },
                        attendee: { field: "attendee", defaultValue: 1 },
                        isAllDay: { type: "boolean", field: "isAllDay" },
                        image: { from: "image", defaultValue: "", },
                    }
                }
            }
        });

        $("#scheduler").kendoScheduler({
            date: new Date("2020/10/4"),
            startTime: new Date("2020/10/4 7:00"),
            endTime: new Date("2020/10/4 20:00"),
            height: 600,
            views: [
                "day",
                { type: "week", selected: true },
                "workWeek",
                "month",
                "agenda",
            ],
            timezone: "Etc/UTC",
            eventTemplate: $("#event-template").html(),
            dataSource: dataSource,
            resources: [
                {
                    field: "attendee",
                    dataSource: [
                        { text: "Jason", value: 1, color: "#eaf8ff" },
                        { text: "Maddie", value: 2, color: "#fdfdf4" }
                    ]
                }
            ]

        });
    });
</script>

<style>
    .template-container {
        margin-top: -8px;
    }

    .template-container img {
        float: left;
        margin: 0 4px;
        margin-right: 10px;
    }

    .template-container h3 {
        padding: 0 4px 4px;
        font-size: 12px;
        font-weight: 400;
        margin-right: 14px;
    }

    .template-title-1 {
        color: #65CCFF;
    }

    .template-title-2 {
        color: #D0D03B;
    }

    .k-event .k-i-reload,
    .k-event .k-i-non-recurrence {
        display: none;
    }
</style>


    
</body>
</html>