Telerik Forums
UI for ASP.NET MVC Forum
0 answers
11 views

I use the following code to show the calendar:

<div class="section">
    <script id="event-template" type="text/x-kendo-template">
        <div class="item-template" title="#: title #">
            <div class="title">#: title #</div>
        </div>
    </script>
    <div class="daily-container">
        @(Html.Kendo().Scheduler<WaterFlowReadingModel>()
    .Name("Daily")
	.Events(e =>
	{
		e.Navigate("scheduler_navigate");
		e.DataBound("scheduler_databound");

	})
    .Date((DateTime)ViewBag.Month)
    .StartTime((DateTime)ViewBag.Month)
	.EventTemplateId("event-template")
    .Views(v =>
    {
        v.MonthView();
    })
	.DataSource(d =>
		d.Model(m =>
		{
            m.Id(f => f.Id);
            m.RecurrenceId(f => f.RecurrenceRule);
			m.Field(f => f.Title).DefaultValue("No title");
		}).ServerOperation(true)
		.Read(read => read.Action("GetMetricDaily", "Metric",
			new { type = 1, start = ViewBag.Month.AddMonths(-1), end = ViewBag.Month.AddMonths(1) }))
    ))
    </div>
</div>

Javascript:

    function scheduler_navigate(e) {
        var start = kendo.format('{0:d}', this.view().startDate());
        var end = kendo.format('{0:d}', this.view().endDate());

        $.ajax({
            url: "@(Url.Action("GetMetricDaily", "Metric"))",
            data: {
                start: start,
                end: end,
            }, success: function () {

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

                scheduler.refresh();
            }
        });
    }

    function scheduler_databound(e) {
        var today = e.date;
        var scheduler = $("#Daily").data("kendoScheduler");
        var newDate = scheduler.date();
        console.log(newDate, today);
		$.ajax({
			url: "@(Url.Action("GetStatistics", "Metric"))",
			dataType: "json",
			data: {
				month: kendo.format('{0:d}', newDate),
            }, success: function (data) {
				//console.log(data);
				date = new Date(data.ReportingPeriod.match(/\d+/)[0] * 1);
                $("#TotalMonthlyDischargeVolume").val(data.TotalMonthlyDischargeVolume);
                $("#NumberOfDaysOfDischargeToSewer").val(data.NumberOfDaysOfDischargeToSewer);
				$("#MaximumDailyFlow").val(data.MaximumDailyFlow);
                $("#ReportingPeriod").val(kendo.toString(date, "Y"));
            }
        });
    };

The problem is that when I select a different month, no data at all is shown unless I select the current month again, which then shows current data.

Controller code:


        public ActionResult GetMetricDaily([DataSourceRequest] DataSourceRequest request, DateTime start, DateTime end)
        {
            using (var db = new DatabaseContext())
            {
                // Water flows
                var lastMonth = db.WaterFlows
                    .Where(w => w.TimeStamp > start && w.TimeStamp < end && w.TotalizerReading >= 1)
                    .Select(x => new WaterFlowReadingModel()
                    {
                        Title = x.TotalizerReading.ToString(),
                        Start = x.TimeStamp,
                        End = x.TimeStamp,
                        Id = x.Id,
                    }).ToList();
                
                // pH Readings
                var result = db.pHReadings.Where(w => w.TimeStamp > start && w.TimeStamp < end)
                    .GroupBy(o => EntityFunctions.TruncateTime(o.TimeStamp))
                    .Select(g => new
                    {
                        Date = g.Key,
                        Min = g.Min(o => o.pHValue),
                        Max = g.Max(o => o.pHValue),
                        Avg = g.Average(o => o.pHValue)
                    })
                    .ToList();
                
                var output = new List<WaterFlowReadingModel>();
                foreach (var item in result)
                {
                    var title = $"PH - Min: {item.Min:F} / Max: {item.Max:F} / Avg: {item.Avg:F}";
                    output.Add( new WaterFlowReadingModel()
                    {
                        Title = title,
                        Start = item.Date ?? DateTime.Today,
                        End = item.Date ?? DateTime.Today,
                        Id = 0
                    });
                }

                lastMonth.AddRange(output);
                return Json(lastMonth.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }
        }



Jason
Top achievements
Rank 1
Veteran
 asked on 26 Feb 2024
1 answer
18 views

I am new to the kendo UI, i have followed the demo for scheduler in ASP.NET MVC and added all the code but I am stuck here.
I have added the nuget and controller and model but I am stuck at ui side, it not showing scheduler.

Console errors

below is my code.

Index.cshtml :

@using Kendo.Mvc.UI
<div id="team-schedule">
    <div id="people">
        <input checked type="checkbox" id="alex" aria-label="Alex" value="1">
        <input checked type="checkbox" id="bob" aria-label="Bob" value="2">
        <input type="checkbox" id="charlie" aria-label="Charlie" value="3">
    </div>
</div>
@(Html.Kendo().Scheduler<Anics.FrontEnd.Models.Scheduler.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2022, 6, 13))
    .StartTime(new DateTime(2022, 6, 13, 7, 00, 00))
    .Height(600)
    .Views(views =>
    {
        views.DayView();
        views.WorkWeekView(workWeekView => workWeekView.Selected(true));
        views.WeekView();
        views.MonthView();
        views.YearView();
        views.AgendaView();
        views.TimelineView();
    })
    .Timezone("Etc/UTC")
    .Resources(resource =>
    {
        resource.Add(m => m.OwnerID)
            .Title("Owner")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
                new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
                new { Text = "Charlie", Value = 3, Color = "#56ca85" }
            });
    })
    .DataSource(d => d
        .Model(m => {
            m.Id(f => f.TaskID);
            m.Field(f => f.Title).DefaultValue("No title");
            m.Field(f => f.OwnerID).DefaultValue(1);
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Read("Basic_Usage_Read", "Scheduler")
        .Create("Basic_Usage_Create", "Scheduler")
        .Destroy("Basic_Usage_Destroy", "Scheduler")
        .Update("Basic_Usage_Update", "Scheduler")
        .Filter(filters =>
        {
            filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
        })
    )
)

@*<script type="text/javascript">
$(document).ready( function () {
        $("#people :checkbox").change(function (e) {
            var checked = $.map($("#people :checked"), function (checkbox) {
                return parseInt($(checkbox).val());
            });

            var filter = {
                logic: "or",
                filters: $.map(checked, function (value) {
                    return {
                        operator: "eq",
                        field: "OwnerID",
                        value: value
                    };
                })
            };

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

            scheduler.dataSource.filter(filter);
        });
    })
</script>*@

<style>

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

#people {
    background: url('@Url.Content("~/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>

 _Layout.cshtml

@using Axtrum.Framework.Helpers
@using Microsoft.Web.Mvc
@using Anics.FrontEnd.Controllers
@using Anics.FrontEnd.Helpers

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewBag.Title</title>    
    @{
        var token = (System.Web.HttpContext.Current.Session["loginToken"] == null) ? "" : System.Web.HttpContext.Current.Session["loginToken"] + ""; //
    }
    <!-- BEGIN META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="your,keywords">
    <meta name="description" content="Orion Freight Management Cloud Portal">
    <!-- END META -->
    <!-- BEGIN STYLESHEETS -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css' />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/materialadmin.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/material-design-iconic-font.min.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/libs/bootstrap-datepicker/datepicker3.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/libs/multi-select/multi-select.css?1424887857" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/libs/dropzone/dropzone.css" />
    <link href="~/assets-vendor/js/libs/intl-tel-input/build/css/intlTelInput.css" rel="stylesheet" />
    <script src="~/Scripts/canvasjs.min.js"></script>
    <!-- END STYLESHEETS -->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/assets-vendor/js/libs/utils/html5shiv.js?1403934957"></script>
    <script type="text/javascript" src="/assets-vendor/js/libs/utils/respond.min.js?1403934956"></script>
    <![endif]-->
    @*<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">*@
    @*<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">*@
    <link href="~/assets/css/flatpickr.min.css" rel="stylesheet" />
    <link href="~/assets/js/plugins/jquery.combogrid-1.6.3/resources/css/smoothness/jquery.ui.combogrid.css" rel="stylesheet" />
        <link href="~/assets/js/plugins/jquery.combogrid-1.6.3/resources/css/smoothness/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
    <link href="~/assets/js/plugins/lobibox-master/dist/css/Lobibox.min.css" rel="stylesheet" />

    <link type="text/css" rel="stylesheet" href="/assets/css/app.css" />

    <link href="https://kendo.cdn.telerik.com/themes/7.2.0/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.aspnetmvc.min.js"></script>

    @* Add the bootstrap.min.js script: *@
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>

    <script src="~/images/js/cachedetect.js"></script>
    <script>

            var offset=  @SessionHelper.TimeZone;

    </script>
    <script src="https://maps.alk.com/api/1.2/ALKMaps.js?key=c2327b98fa0fa244aab3ee1c51ea772e" type="text/javascript"></script>
    @Styles.Render("~/bundles/all-css")
    @RenderSection("head", required: false)
    <style>

        .floatingBtn {
            width: 40px;
            height: 40px;
            z-index: 100;
            font-size: 8px;
            line-height: 8px;
            text-align: center;
            color: white;
            text-decoration: none;
            position: fixed;
            right: 30px;
            bottom: 30px;
            background: #0aa89e;
            padding: 9px 0px;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 50%;
            transition: 0.2s ease-in-out;
            box-shadow: 0 0 10px rgb(0 0 0 / 25%);
            );
        }

            .floatingBtn:hover {
                background: #066660;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.30);
            }

            .floatingBtn img {
                width: 25px;
                height: 25px;
                object-fit: contain;
                display: block;
                margin: 0 0 -5px;
            }
    </style>
</head>
<body class="header-fixed menubar-hoverable menubar-pin" id="@SessionHelper.OrgName" ng-app="axtrumApp" ng-controller="GlobalController as gm">

    <!-- menubar-first menubar-visible  -->
    @*<iframe src="@ConfigKeys.IframeURL/autologin.aspx?token=@token" frameborder="0" style="display:none"></iframe>*@

    <iframe ng-src="@ConfigKeys.IframeURL/autologin.aspx?token=@token" frameborder="0" style="display:none"></iframe>

    @{
        if (System.Web.HttpContext.Current.Session["loginToken"] == null)
        {
            if (System.Web.HttpContext.Current.Request.CurrentExecutionFilePath != "/OutsideCarrier/Index")
            {
                Response.Redirect("~/Account/Login");
            }

        }
        else
        {
            System.Web.HttpContext.Current.Session["loginToken"] = System.Web.HttpContext.Current.Session["loginToken"].ToString().Replace("~~1~~", "");
        }
    }
    <!-- BEGIN HEADER-->
    @if (System.Web.HttpContext.Current.Session["loginToken"] != null && HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString() != "Unauthorised")
    {
        Html.RenderAction("Menu", "Account");
    }
    @if (System.Web.HttpContext.Current.Session["loginToken"] != null && HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString() == "Unauthorised")
    {
        @Html.Partial("_TopNavBar")
    }

    @*@Html.Partial("~/Views/Shared/_AddContactForm.cshtml",new Anics.FrontEnd.Models.Contacts.ContactPrimaryInfoModel())*@

    @*@Html.Partial("_TopNavBar")*@
    <!-- END HEADER-->
    <!-- BEGIN BASE-->
    <div id="base">
        <!-- BEGIN OFFCANVAS LEFT -->
        <div class="offcanvas"></div><!--end .offcanvas-->
        <!-- END OFFCANVAS LEFT -->
        <!-- BEGIN CONTENT-->
        <div id="content">
            <section class="has-actions style-default-bright">
                <div class="section-header height-auto">
                    <div class="row">
                        <div class="col-sm-6">
                            <ol class="breadcrumb">
                                <li><a href="javascript:void(0)" ng-click="gm.getDefaultUrlValue()">Home</a></li>
                                @RenderSection("breadcrumb", required: false)
                            </ol>
                        </div>
                        <div class="col-sm-6" id="PageTopActionBar">
                            @RenderSection("actionbartop", required: false)
                        </div>
                    </div>
                </div>

                <div class="section-body hidden" id="appBody">
                    <div class="margin-bottom-lg">
                        @*<center>
                                <div data-loading style="display: block;position: absolute;width: 100%;line-height: 50;z-index: 99999999;"></div>
                            </center>*@
                        @*<div loading-indicator style="display: block;position: absolute;width: 100%;line-height: 50;z-index: 99999999;"><span>Please wait...<img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /></span></div>*@
                        @RenderBody()

                    </div>
                    <div id="PageActionBar" class=" style-primary">
                        @RenderSection("actionbarbottom", required: false)
                    </div>
                </div>
                <div class="section-action style-primary hidden" id="pageActionBar">

                </div>
                <div id="EnlargedImageModal" class="modal draggable fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header style-primary">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <header class="text-lg">Image Rotation</header>
                            </div>
                            <form novalidate name="vm.formSaveRotatImageModal">
                                @Html.Partial("_ContactAlertsAreaInForm", "vm.formSaveRotatImageModal")


                                <div class="modal-body">

                                    <div class="container-fluid bd-example-row">
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="row">
                                                    <div id="imageViewContainer">
                                                        <img id="BOLImage" ng-src="{{gm.enLargefileUrl}}" class='img-responsive' style="margin: 12% auto;transition: .2s ease-in-out" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">

                                    <button class="btn btn-default" id="rotateImage" style="margin:0 37%" ng-click="gm.rotateImage();">
                                        <i class="fa fa-rotate-right" aria-hidden="true"></i>
                                    </button>
                                    <button ng-show="gm.isFromPro == true" type="submit" class="btn btn-primary btn-sm" ng-click="gm.saveRatetedImage(gm.imageName)"><i class="fa fa-save"></i> save</button>

                                    <a class="btn btn-default" data-dismiss="modal">Close</a>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
                <div id="globleConfirmationModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleteModal" data-backdrop="static">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header style-primary">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <header class="text-lg">Confirmation</header>
                            </div>
                            <div class="modal-body">
                                <h4>{{gm.confirmationMessage}}</h4>
                            </div>
                            <div class="modal-footer">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div><!--end #content-->
        <!-- END CONTENT -->
        <!-- BEGIN MENUBAR-->
        @Html.Partial("_LeftNavBar")
        <!--end #menubar-->
        <!-- END MENUBAR -->
        <!-- BEGIN OFFCANVAS RIGHT -->
        @Html.Partial("_OffCanvasRight")
        <!--end .offcanvas-->
        <!-- END OFFCANVAS RIGHT -->
        <a id="floatingBtnBot" class="floatingBtn">
            <img src="~/assets/images/arrow-ic.svg" style="margin-left:8px;margin-top:-2px" />
        </a>
        <a class="floatingBtn" id="floatingBtnTop" style="display:none">
            <img src="~/assets/images/up-arrow-ic.svg" style="margin-left:8px;margin-top:-2px" />
        </a>
    </div><!--end #base-->
    @Html.Partial("_FooterLayout")


    <!-- END BASE -->
    <!-- BEGIN JAVASCRIPT -->











    @Scripts.Render("~/bundles/app-js")
    <script src="~/assets-vendor/js/ng-tags-input.min.js"></script>
    <script>
        // include kendo.timezones.js
        var version = kendo.version;

        $('<script/>', {
            type: 'text/javascript',
            src: 'https://kendo.cdn.telerik.com/' + version + '/js/kendo.timezones.min.js'
        }).appendTo('head');
    </script>
    <script type="text/javascript">

        function onError(e) {
            this.cancelChanges();

            var errorMessage = "";
            if (e.errors) {
                for (var error in e.errors) {
                    errorMessage += e.errors[error].errors[0] + " ";
                }
            }

            alert(errorMessage);
        }

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

                var filter = {
                    logic: "or",
                    filters: $.map(checked, function (value) {
                        return {
                            operator: "eq",
                            field: "OwnerID",
                            value: value
                        };
                    })
                };

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

                scheduler.dataSource.filter(filter);
            });
        })
    </script>
    @RenderSection("scripts", required: false)
    <script>

            var getContactUrl = '@(Html.BuildUrlFromExpression<ScheduleRideController>(c => c.GetContactDetail(0)))';
            var getMasterData = '@(Html.BuildUrlFromExpression<CommonController>(c => c.GetMasterDataForCreateContactPopup(null)))';
            var getSelectedColumnUrl = '@(Html.BuildUrlFromExpression<CommonController>(c => c.GetSelectedColumn(0)))';
            var saveSelectedColumnUrl = '@(Html.BuildUrlFromExpression<CommonController>(c => c.SaveSelectedColumn(0,"")))';
            window.app.constant('globalConfig', {
                getContactUrl: getContactUrl,
                getMasterData: getMasterData,
                getSelectedColumnUrl: getSelectedColumnUrl,
                saveSelectedColumnUrl: saveSelectedColumnUrl
            });
            @Html.Angular().MasterDataForModel("")
            $(window).on('scroll', function () {
                $('.cg-autocomplete').hide();
            });
            $('.modal-body').on('scroll', function () {
                $('.cg-autocomplete').hide();
            });
            $('.close').on('click',function(){
                $('.cg-autocomplete').hide();
            });

            $("#floatingBtnBot").on('click',function(){

                $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
                $("#floatingBtnBot").css("display","none");
                $("#floatingBtnTop").css("display","block");
            });
            $("#floatingBtnTop").on('click',function(){
                $('html,body').animate({scrollTop: 0},"fast");
                $("#floatingBtnTop").css("display","none");
                $("#floatingBtnBot").css("display","block");

            });
            $("#floatingBtnTop").click();
            window.onscroll = function(ev) {
                if ((window.innerHeight + window.pageYOffset) >= document.body.scrollHeight) {
                    $("#floatingBtnBot").css("display","none");
                    $("#floatingBtnTop").css("display","block");
                }

                if(Math.round(window.pageYOffset) <= 1){
                    $("#floatingBtnTop").css("display","none");
                    $("#floatingBtnBot").css("display","block");
                }



            };
    </script>
    @*
         <script src="/assets/js/lib/jquery-2.1.4.min.js"></script>
            <script src="/assets-vendor/js/libs/bootstrap/bootstrap.min.js"></script>
        <script src="/assets/js/app.jQuery.js"></script>
        @*<script src="/assets-vendor/js/uploader.js"></script>
        <!--begin angular controllers js-->
        <script src="/assets/js/controllers/ContactController.js"></script>
        <script src="~/assets/js/controllers/ContactGroupController.js"></script>
        <script src="/assets/js/controllers/ScheduleController.js"></script>
        <script src="~/assets/js/controllers/UserController.js"></script>
        <script src="~/assets/js/controllers/roleController.js"></script>
        <script src="/assets/js/controllers/contentCtrl.js"></script>
        <script src="~/assets/js/controllers/HubController.js"></script>
        <script src="~/assets/js/controllers/AssetsController.js"></script>
        <!--end angular controllers-->

        <script src="~/assets/js/directives/customPagination.js"></script>
        <script src="/assets/js/directives/pagination.js"></script>
        <script src="/assets/js/services/ContentData.js"></script>
        <script src="/assets/js/utility/ArrayExtensions.js"></script>
        <script src="/assets/js/utility/FormGroupValidationDirective.js"></script>
        <script src="/assets/js/utility/InputValidationIconsDirective.js"></script>
        <script src="/assets/js/utility/MvcGridDirective.js"></script>
        <script src="/assets/js/utility/ParseDateFilter.js"></script>

        <!--begin plug-in js-->
        <script src="/assets-vendor/js/libs/jquery-ui/jquery-ui.min.js"></script>
        <script src="/assets-vendor/js/libs/spin.js/spin.min.js"></script>
        <script src="/assets-vendor/js/libs/autosize/jquery.autosize.min.js"></script>
        <script src="/assets-vendor/js/libs/moment/moment.min.js"></script>
        <script src="/assets-vendor/js/libs/nanoscroller/jquery.nanoscroller.min.js"></script>
        <script src="/assets-vendor/js/libs/skycons/skycons.js"></script>
        <script src="/assets-vendor/js/libs/select2/select2.min.js"></script>
        <script src="/assets-vendor/js/libs/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
        <script src="/assets-vendor/js/libs/multi-select/jquery.multi-select.js"></script>
        <script src="/assets-vendor/js/libs/inputmask/jquery.inputmask.bundle.min.js"></script>
        <script src="/assets-vendor/js/libs/bootstrap-datepicker/bootstrap-datepicker.js"></script>
        <script src="/assets-vendor/js/libs/dropzone/dropzone.js"></script>
        <script src="/assets-vendor/js/libs/intl-tel-input/build/js/intlTelInput.js"></script>
        <script src="/assets-vendor/js/libs/intl-tel-input/build/js/intlTelInput.min.js"></script>
        <!--end plug-in js-->
        <script src="/assets-vendor/js/core/source/App.js"></script>
        <script src="/assets-vendor/js/core/source/AppNavigation.js"></script>
        <script src="/assets-vendor/js/core/source/AppOffcanvas.js"></script>
        <script src="/assets-vendor/js/core/source/AppCard.js"></script>
        <script src="/assets-vendor/js/core/source/AppForm.js"></script>
        <script src="/assets-vendor/js/core/source/AppNavSearch.js"></script>
        <script src="/assets-vendor/js/core/source/AppVendor.js"></script>
        <script src="~/assets/js/directives/ngEnter.js"></script>
        <!-- Calendar -->
        <script src="/assets-vendor/js/libs/fullcalendar/fullcalendar.min.js"></script>
        <!-- /Calendar -->
        <!----User Controller-->
        <!---/-User Controller-->
        <script src="/assets-vendor/js/core/demo/Demo.js"></script>
        <script src="/assets-vendor/js/core/demo/DemoUISkycons.js"></script>
        <script src="~/Scripts/dragdrop.js"></script>*@
    <!-- END JAVASCRIPT -->
    @*<script src="https://unpkg.com/flatpickr"></script>*@
    <script src="~/assets/js/flatpickr.min.js"></script>
</body>
</html>
Anton Mironov
Telerik team
 answered on 07 Feb 2024
1 answer
21 views

Hello,

for a new project we're considering ASP.NET MVC, or React (Kendo React)

 

We like to create a scheduler with multiple users next to each other, per day.

In attachment is an drawing of the expected result.

Is this feasable with Telerik Scheduler, with drag and drop availabilities to move appointments between users?

Thanks,

 

Jeroen

Georgi
Telerik team
 answered on 26 Dec 2023
1 answer
28 views

Is there a way to create a custom viewer template for a scheduler event and have certain events be uneditable and open up in a viewer pop-up?

Eyup
Telerik team
 answered on 12 Dec 2023
3 answers
35 views

Hi,

 

I have a scheduler controle that I am showing 1 day on but I don;t want it to be a specific day I am using it to assign appointments for Monday, Tuesday, Wednesday, etc reardless of the actual date so I would like to hide the date selector, current date and the heading showing the current date as shown below:

If I could also affect the line height for the times that would be great too as they are a little tall currently.

Any help would be gratefully received.

Thanks,

 

Ian

Ian
Top achievements
Rank 1
Iron
 updated answer on 17 Nov 2023
1 answer
26 views

I want to customise my team schedulers to identity which users have no events scheduled each day, researching I found this https://docs.telerik.com/kendo-ui/knowledge-base/customize-no-events-days-content.  I cant seem to replicate this for MVC and using the TimelineMonthView. Any help would be appreciated.

 

This is a copy of my scheduler code..

  @(Html.Kendo().Scheduler<Inspire.Web.ViewModels.Scheduler.EventViewModel>()
    .Name("scheduler")
    .HtmlAttributes(new { @class = "global-schedule" })
    .Date(date)
    .Min(date)
    .Max(date)
    .EventTemplate(
    "<div id='event-#= Id #' class='row scheduled-event-template'>" +
        @eventTemplate +
    "</div>")
    .Editable(e => e.Destroy(false))
    .MajorTick(480)
    .ShowWorkHours(true)
    .WorkDayStart(9, 0, 0)
    .WorkDayEnd(17, 0, 0)
    .Events(e => e.Edit("onEdit")
            .Resize("scheduler_OnMove")
            .ResizeStart("scheduler_OnMove")
            .ResizeEnd("scheduler_OnMove")
            .Move("scheduler_OnMove")
            .MoveStart("scheduler_OnMove")
            .MoveEnd("scheduler_OnMove")
            // .Remove("scheduler_OnRemove")
            .DataBound("scheduler_dataBound")
            .Save("scheduler_save"))

    .Views(views =>
    {
        views.TimelineMonthView(weekView => weekView.Selected(true));
        //views.CustomView("MyCustomTimelineView");
    })
    .Group(group => group.Resources("TeamMembers").Orientation(SchedulerGroupOrientation.Vertical))
    .GroupHeaderTemplateId("groupHeaderTemplate")
    .Resources(resource =>
    {
                          resource.Add(m => m.UserId)
                    .Title("Team Members")
                    .Name("TeamMembers")
                    .DataTextField("FullName")
                    .DataValueField("Id")
                    .DataColorField("Color")
                    .Multiple(true)
                    .DataSource(s => s
                    .Read(read => read.Action("action", "controller")));
            


        resource.Add(m => m.EventTypeId)
           .Title("Event Types")
           .Name("EventTypeNames")
           // .Multiple(true)
           .DataTextField("Text")
           .DataValueField("Value1")
           .DataColorField("Value2")
           .DataSource(s => s
           .Read(read => read.Action("action", "controller")));

       

    })
    .AutoBind(false)
    .DataSource(d => d
      .Events(e => e.Sync("sync_handler"))
            .Model(m =>
            {
                m.Id(f => f.Id);
                m.Field(f => f.UserIds);
                m.Field(f => f.EventTypeId);
                m.Field(f => f.Title);
                // m.Field(f => f.Title).DefaultValue("No title");
            })
                .Read(r => r.Action("action", "controller", new
                {
                    IsTermReleased = Model.IsTermReleased,
                    upcomingYear = Model.UpcomingYear
                }))
                .Create("action", "controller")
                .Destroy("action", "controller")
                .Update("action", "controller")
        )
    )

 

Anton Mironov
Telerik team
 answered on 17 Oct 2023
1 answer
26 views
I use the scheduler to give the user an overview of which days in the year he has appointments.
I would like to achieve two things now:

When the user clicks on a date in the year view, I want to make an Ajax call to the server to load additional information for that day. Is there an event that is called when the user clicks on a date? 
Can I prevent the detail box from opening in the year view when a date is clicked?
Eyup
Telerik team
 answered on 10 Oct 2023
1 answer
39 views
is there a "number of weeks" property in the kendo.mvc scheduler month view? - I'd like to show 10 weeks rather than 6
Anton Mironov
Telerik team
 answered on 13 Jul 2023
1 answer
59 views

Hi,

Is it possible to use the MVC scheduler like a daily rostering system with locations down the left then times along the top and resources can be assigned to these locations and times?

When I look at examples, the times are always down the left and days along the top.

Thanks,

 

Ian

Ivan Danchev
Telerik team
 answered on 07 Jul 2023
14 answers
272 views

When the scheduler has an event that starts at the cuttoff time for your scheduler-table, the entire table shifts up 16px to accommodate (show) that there is in fact an event there, however  the div with class="k-scheduler-times" is not shifted.

For example, my scheduler is setup for 00:00 to 24:00.  If I have an event that is starting at 24:00, my table looks perfect until I scroll down to the bottom and the 23:00 - 24:00 time slot becomes visible. Once it is on-screen, the events table all move up by 16px and the grids no longer line up with the scheduler-times. 

Please provide a fix, that when this is triggered, to also inlcude the "k-Scheduler-times" to be shifted up in sync with the scheduler-table.

See attached photos.

Thank you,

Rob

Peter
Top achievements
Rank 1
Iron
 answered on 13 Feb 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?