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

<!DOCTYPE html>
<html>
<head>
    <title>Localization and Globalization</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>
    
    <div class="configurator">
    <div class="header">Configurator</div>
    <div class="box-col">
        <label for="language">Choose language:</label>
        <input id="language" value="en-US" />
    </div>
</div>
<div id="team-schedule">
    <div id="people">
        <input checked type="checkbox" id="alex" value="1">
        <input checked type="checkbox" id="bob" value="2">
        <input type="checkbox" id="charlie" value="3">
    </div>
</div>
<div id="scheduler"></div>

<script>

function changeLanguage() {
    kendo.ui.progress($("#scheduler"), true);
    language= this.value();

    var baseUrlMessages = '@Url.Script("messages/kendo.messages.", false)';
    var baseUrlCultures = '@Url.Script("cultures/kendo.culture.", false)';

    $.getScript(baseUrlMessages + language + ".min.js", function () {
         $.getScript(baseUrlCultures + language + ".min.js", function () {
            kendo.culture(language);
            kendo.ui.progress($("#scheduler"), false);
            createScheduler();
          });
    });
}

$(document).ready(function() {
    $("#language").kendoDropDownList({
        change: changeLanguage,
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            {text: "bg-BG"},
            {text: "zh-CN"},
            {text: "en-US"},
        ]
    });

    $("#people :checkbox").change(function(e) {
        var checked = $.map($("#people :checked"), function(checkbox) {
            return parseInt($(checkbox).val());
        });

        var scheduler = $("#scheduler").data("kendoScheduler");

        scheduler.dataSource.filter({
            operator: function(task) {
                return $.inArray(task.ownerId, checked) >= 0;
            }
        });
    });

    $("#language").data("kendoDropDownList").trigger("change");
});

function createScheduler() {
    var element = $("#scheduler");

    if (element.data("kendoScheduler")) {
        element.data("kendoScheduler").destroy();
        element.empty();
    }

    element.kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [
            "day",
            { type: "workWeek", selected: true },
            "week",
            "month",
            "agenda"
        ],
        timezone: "Etc/UTC",
        dataSource: schedulerDataSource,
        resources: [
            {
                field: "ownerId",
                title: "Owner",
                dataSource: [
                    { text: "Alex", value: 1, color: "#f8a398" },
                    { text: "Bob", value: 2, color: "#51a0ed" },
                    { text: "Charlie", value: 3, color: "#56ca85" }
                ]
            }
        ]
    });
}

var schedulerDataSource = new kendo.data.SchedulerDataSource({
    batch: true,
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/tasks",
            dataType: "jsonp"
        },
        update: {
            url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
            dataType: "jsonp"
        },
        create: {
            url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
            dataType: "jsonp"
        },
        destroy: {
            url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
            dataType: "jsonp"
        },
        parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
            }
        }
    },
    schema: {
        model: {
            id: "taskId",
            fields: {
                taskId: { from: "TaskID", type: "number" },
                title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                start: { type: "date", from: "Start" },
                end: { type: "date", from: "End" },
                startTimezone: { from: "StartTimezone" },
                endTimezone: { from: "EndTimezone" },
                description: { from: "Description" },
                recurrenceId: { from: "RecurrenceID" },
                recurrenceRule: { from: "RecurrenceRule" },
                recurrenceException: { from: "RecurrenceException" },
                ownerId: { from: "OwnerID", defaultValue: 1 },
                isAllDay: { type: "boolean", from: "IsAllDay" }
            }
        }
    },
    filter: {
        logic: "or",
        filters: [
            { field: "ownerId", operator: "eq", value: 1 },
            { field: "ownerId", operator: "eq", value: 2 }
        ]
    }
});

</script>
<style>


    .k-nav-current > .k-link span + span {
        max-width: 200px;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: top;
    }

    #team-schedule {
        background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
        height: 115px;
        position: relative;
    }

    #people {
        background: url('../content/web/scheduler/scheduler-people.png') no-repeat;
        width: 345px;
        height: 115px;
        position: absolute;
        right: 0;
    }

    #alex {
        position: absolute;
        left: 4px;
        top: 81px;
    }

    #bob {
        position: absolute;
        left: 119px;
        top: 81px;
    }

    #charlie {
        position: absolute;
        left: 234px;
        top: 81px;
    }
</style>


    
</body>
</html>