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);
}
}
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>
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
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?
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
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>()
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
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