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