scheduler endTime not working - kendo-ui

I can't make the Scheduler to work correctly when setting endTime
EndTime Documentation
Events are shown even after the endTime date:
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
startTime: new Date("2013/6/6 08:00"),
endTime: new Date("2013/6/8 18:00"),
//views: ["day", "week"],
views: [{
type: "day",
startTime: new Date("2013/6/6 08:00"),
endTime: new Date("2013/6/6 18:00")
}, {
type: "week",
startTime: new Date("2013/6/6 08:00"),
endTime: new Date("2013/6/6 18:00")
}, ],
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
//"recurrenceRule": "FREQ=DAILY", "recurrenceException": "",
},
{
id: 2,
start: new Date("2013/6/10 08:00 AM"),
end: new Date("2013/6/10 09:00 AM"),
title: "Interview",
//"recurrenceRule": "FREQ=DAILY", "recurrenceException": "",
}
]
});

The endTime option controls the end time display in day and week views. Only the time portion is taken under consideration. You can try the min and max options:
min: new Date("2013/6/6 08:00"),
max: new Date("2013/6/8 18:00")

Related

add value (nunber) per same year from an array of objects

const db1 = [ { year: "2000", state: "Rio", month: "November", number: 18 }, { year: "2002", state: "Perambuco", month: "February", number: 64 }, { year: "2001", state: "Mato Grasso", month: "March", number: 112 }, { year: "2003", state: "Roraima", month: "January", number: 547 }, { year: "2002", state: "Maranhoo", month: "July", number: 4 }, { year: "2003", state: "Rio", month: "March", number: 9 }, { year: "2000", state: "Roraima", month: "October", number: 25 }, { year: "2001", state: "Paraiba", month: "January", number: 11 }, ];
I have the following array of objects. from db1 I want to filter out only the keys (year, number) and add the number (values) per same respective year ex:
{ year: "2002", number: 68 }, { year: "2000", number: 43 }, { year: "2003", number: 556 }, { year: "2001", number: 123 },
any feedback is appreciated.
const sumArrayVals = (db1) => { return db1.reduce((a, b) => { Object.keys(b).map((c) => (a[c] = (a[c] || 0) + b[c])); return a; }); };)
took a bit but got it.
const sumPerYear = db1.reduce((acc, cur) => {
// increment or initialize to cur.number
acc[cur.year] = acc[cur.year] + cur.number || cur.number;
return acc;
}, {});

Add reminder on google calendar with golang

I want to add a custom reminder to Google Calendar with golang:
event := &calendar.Event{
Summary: "Test GG calendar",
Location: "31 AAA",
Description: "Test google calendar",
Start: &calendar.EventDateTime{
DateTime: "2016-12-27T17:30:00+07:00",
TimeZone: "Asia/Ho_Chi_Minh",
},
End: &calendar.EventDateTime{
DateTime: "2016-12-27T17:40:00+07:00",
TimeZone: "Asia/Ho_Chi_Minh",
},
Reminders: &calendar.EventReminders{
Overrides: []*calendar.EventReminder{
{Method: "email", Minutes: 30},
{Method: "popup", Minutes: 10},
},
UseDefault: false,
},
}
When I run this code, google could not add event. I received this error: Unable to create event. googleapi: Error 400: Cannot specify both default reminders and overrides at the same time., cannotUseDefaultRemindersAndSpecifyOverride
Thanks
Based on my reading of google-apps/calendar/concepts/reminders, it seems that you should not specify the UseDefault: false, at the same time as setting the Overrides. Do not put the UseDefault: false, part, and it will be defaulting to false as its only required to set when wanting to remove overrides that are in place already.
So the expected code is:
event := &calendar.Event{
Summary: "Test GG calendar",
Location: "31 AAA",
Description: "Test google calendar",
Start: &calendar.EventDateTime{
DateTime: "2016-12-27T17:30:00+07:00",
TimeZone: "Asia/Ho_Chi_Minh",
},
End: &calendar.EventDateTime{
DateTime: "2016-12-27T17:40:00+07:00",
TimeZone: "Asia/Ho_Chi_Minh",
},
Reminders: &calendar.EventReminders{
Overrides: []*calendar.EventReminder{
{Method: "email", Minutes: 30},
{Method: "popup", Minutes: 10},
},
},
}
You should send ForceSendFields with UseDefault and set UseDefault to false
&calendar.EventReminders{
Overrides: []*calendar.EventReminder{
{
Method: "email",
Minutes: 12,
},
},
UseDefault: false,
ForceSendFields: []string{"UseDefault"},
}

KendoUI Date field is not filtering. It's Making grid blank

I tried with sample data using below JS code:
$(document).ready(function () {
var PraksysDateFormats = ["dd-MM-yyyy", "dd/MM/yyyy", "dd-MM-yy", "dd/MM/yy", "dd.MM.yy", "ddMMyy", "ddMM", "dd.MM.yyyy", "ddMMyyyy"];
relationDataSource = new kendo.data.DataSource({
data: [
{ ProductName: "Computer", UnitPrice: 100, UnitsInStock: 5, Discontinued: false, FromDate: new Date(kendo.toString(kendo.parseDate("10-11-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')), ToDate: new Date(kendo.toString(kendo.parseDate("11-11-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')) },
{ ProductName: "TV", UnitPrice: 1000, UnitsInStock: 5, Discontinued: false, FromDate: new Date(kendo.toString(kendo.parseDate("20-10-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')), ToDate: new Date(kendo.toString(kendo.parseDate("22-10-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')) },
],
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" },
FromDate: { type: "date" },
ToDate: { type: "date" }
}
}
},
});
var grid = $("#grid").kendoGrid({
dataSource: relationDataSource,
scrollable: true,
sortable: true,
//editable: true,
filterable: true,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
{ field: "UnitsInStock", title: "Units In Stock" },
{ field: "Discontinued", title: "Discontinued" },
{
field: "FromDate", title: "From Date", editor: FromDatePicker, width: 200, format: "{0:dd-MM-yyyy}", filterable: {
ui: dateFilter
}
},
{
field: "ToDate", title: "To Date", editor: ToDatePicker, width: 200, format: "{0:dd-MM-yyyy}", filterable: {
ui: dateFilter
}
}
],
edit: function (e) {
var grid = this;
var fieldName = grid.columns[e.container.index()].field;
// alert(fieldName)
},
save: function (e) {
var grid = this;
var fieldName = grid.columns[e.container.index()].field;
// alert(e.container.index());
// alert(fieldName)
var productName = e.values.ProductName || e.model.ProductName;
var relation = e.values.Relation || e.model.Relation;
var dataItem = this.dataSource.getByUid(e.model.uid);
dataItem.set("ProductName", productName);
dataItem.set("UnitPrice", 9000);
dataItem.set("UnitsInStock", 99);
dataItem.set("Discontinued", true);
},
update: function (e) {
alert("Update")
}
}).data("kendoGrid");
function FromDatePicker(container, options) {
alert(options.field);
$('<input id="BrugergyldigFradato" name="FromDate" dynamicfield="71" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDatePicker({
format: "dd-MM-yyyy",
parseFormats: PraksysDateFormats,
culture: "da-DK"
});
$('<span class="k-invalid-msg" data-for="FromDate"></span>').appendTo(container);
};
function ToDatePicker(container, options) {
alert(options.field);
$('<input id="BrugergyldigTildato" name="ToDate" dynamicfield="71" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDatePicker({
format: "dd-MM-yyyy",
parseFormats: PraksysDateFormats,
culture: "da-DK"
});
$('<span class="k-invalid-msg" data-for="ToDate"></span>').appendTo(container);
};
function dateFilter(element) {
element.kendoDatePicker({
format: "dd-MM-yyyy",
culture: "da-DK"
});
};
});
I am able to filter all columns, except last 2 date fields. On entering a date field filter value, it's making the grid blank. My date format is "dd-MM-yyyy". Any clue here would be appreciated.
Don't use new Date in your datasource.
On my browser(chrome):
new Date("2016-11-11")
Fri Nov 11 2016 02:00:00 GMT+0200
As you see date is converted to local time here. But when you filter with 11-11-2016 your filter will not be converted. In that case your filter value will be
Fri Nov 11 2016 00:00:00 GMT+0200
Therefore equality check fails.
Instead you can use only kendo.parseDate to assign your date values and it will work.
data: [
{ ProductName: "Computer", UnitPrice: 100, UnitsInStock: 5, Discontinued: false, FromDate: kendo.parseDate("10-11-2016", 'dd-MM-yyyy'), ToDate: kendo.parseDate("11-11-2016", 'dd-MM-yyyy') },
{ ProductName: "TV", UnitPrice: 1000, UnitsInStock: 5, Discontinued: false, FromDate: kendo.parseDate("20-10-2016", 'dd-MM-yyyy'), ToDate: kendo.parseDate("22-10-2016", 'dd-MM-yyyy') },
],
This turnout to be a formatting issue and now working as expected

grid populated from a dataSource using JSON and a database. How to make parse: work and create a new field?

I'm using javascript and kendo ui.
I have a grid and populate it with
a local datasource
ie:
var dsDataSource = new kendo.data.DataSource({
data:
[
{ // 1
title: "Star Wars: A New Hope",
date5: new Date(2001,8,8,21,46,0,0), // 9/8/2001 09:46:00.000 PM
},
{ // 2
title: "Star Wars: The Empire Strikes Back",
date5: new Date(2004,10,9,6,33,0,0), // 11/9/2004 06:33:00.000 AM
},
{ // 3
title: "Star Wars: Return of the Jedi",
date5: new Date("2004/11/09 12:00 AM"), // 11/9/2004 12:00:00.000 AM
},
{ // 4
title: "Star Wars: The Phantom Menace",
date5: new Date(2008,0,10,4,20,0,0), // 1/10/2008 04:20:00.000 AM
},
{ // 5
title: "Star Wars: Revenge of the Sith",
date5: new Date("2004/11/09 06:30 AM"), // 11/9/2004 06:30:00.000 AM
}
],
schema:
{
model:
{
id: "myGridID",
fields:
{
title: { type: "string" },
date5: { type: "date" },
date6: { type: "date" }, // Field not in data: above
// // but generated below in
// // parse:
}
},
},
// Set the data in
// date6 to date5 yyyy, MM, dd, HH, mm and strip off Sec and Ms
// This will make the filter work
// This changes the "data" instead of the "presentation" so the filter will work
parse: function(d) {
$.each(d, function(idx, elem) {
elem.date6 =
new Date(
elem.date5.getFullYear(), // 20yy
elem.date5.getMonth(), // MM 00 - 11 for jan to dec
elem.date5.getDate(), // dd 00 - 31
elem.date5.getHours(), // HH 00 - 23
elem.date5.getMinutes() // mm 00 - 59
// // Sec 0
// // Ms 0
);
});
return d;
}
});
I then create a grid:
// Createe a Kendo grid in DIV
$("#grid").kendoGrid({
dataSource: dsDataSource,
...
columns: [
{ field: "title", title: "Title" , width: "270px" },
{ field: "date5", title: "D 5" , width: "230px", filterable: false, format:"{0:MM/dd/yyyy hh:mm tt}", },
{
// Bind to date6 (rounded), but display date5
field: "date6",
title: "Date5DateTime (no D6 data uses D5)",
width: "330px",
template: "#: kendo.toString(date5, 'yyyy-MM-dd HH:mm:ss.fff') #",
filterable: { ui: DateTimeFilter },
...
}
],
...
I got this to work and am now integrating it into our production application.
The problem I am having is that the production application uses Json/database
so when I try to add the "date6" field into the "model: ... fields: ..." section
it complains about the "date6" field not existing in the Json/database.
Without the "date6" field in the "model..." I can't use the parse: code to strip off
the Sec and Ms.
Is there some other way to fill in the "date6"
without using "parse:" so I don't have to add "date6" to the "model: ... fields: ..."
section?
You don't have to define date6 in the model, it should work perfectly well. The problem is that you defined parse out of schema when it should be inside and then it actually does not get called.
Your dataSource definition should be:
var dsDataSource = new kendo.data.DataSource({
data:
[
{ // 1
title: "Star Wars: A New Hope",
date5: new Date(2001,8,8,21,46,0,0), // 9/8/2001 09:46:00.000 PM
},
{ // 2
title: "Star Wars: The Empire Strikes Back",
date5: new Date(2004,10,9,6,33,0,0), // 11/9/2004 06:33:00.000 AM
},
{ // 3
title: "Star Wars: Return of the Jedi",
date5: new Date("2004/11/09 12:00 AM"), // 11/9/2004 12:00:00.000 AM
},
{ // 4
title: "Star Wars: The Phantom Menace",
date5: new Date(2008,0,10,4,20,0,0), // 1/10/2008 04:20:00.000 AM
},
{ // 5
title: "Star Wars: Revenge of the Sith",
date5: new Date("2004/11/09 06:30 AM"), // 11/9/2004 06:30:00.000 AM
}
],
schema:
{
model:
{
id: "myGridID",
fields:
{
title: { type: "string" },
date5: { type: "date" },
date6: { type: "date" }, // Field not in data: above
// // but generated below in
// // parse:
}
},
// Set the data in
// date6 to date5 yyyy, MM, dd, HH, mm and strip off Sec and Ms
// This will make the filter work
// This changes the "data" instead of the "presentation" so the filter will work
parse: function(d) {
$.each(d, function(idx, elem) {
elem.date6 =
new Date(
elem.date5.getFullYear(), // 20yy
elem.date5.getMonth(), // MM 00 - 11 for jan to dec
elem.date5.getDate(), // dd 00 - 31
elem.date5.getHours(), // HH 00 - 23
elem.date5.getMinutes() // mm 00 - 59
// // Sec 0
// // Ms 0
);
});
return d;
}
}
});
and check it here running
$(document).ready(function() {
var dsDataSource = new kendo.data.DataSource({
data:
[
{ // 1
title: "Star Wars: A New Hope",
date5: new Date(2001,8,8,21,46,0,0), // 9/8/2001 09:46:00.000 PM
},
{ // 2
title: "Star Wars: The Empire Strikes Back",
date5: new Date(2004,10,9,6,33,0,0), // 11/9/2004 06:33:00.000 AM
},
{ // 3
title: "Star Wars: Return of the Jedi",
date5: new Date("2004/11/09 12:00 AM"), // 11/9/2004 12:00:00.000 AM
},
{ // 4
title: "Star Wars: The Phantom Menace",
date5: new Date(2008,0,10,4,20,0,0), // 1/10/2008 04:20:00.000 AM
},
{ // 5
title: "Star Wars: Revenge of the Sith",
date5: new Date("2004/11/09 06:30 AM"), // 11/9/2004 06:30:00.000 AM
}
],
schema:
{
model:
{
id: "myGridID",
fields:
{
title: { type: "string" },
date5: { type: "date" },
date6: { type: "date" }, // Field not in data: above
// // but generated below in
// // parse:
}
},
// Set the data in
// date6 to date5 yyyy, MM, dd, HH, mm and strip off Sec and Ms
// This will make the filter work
// This changes the "data" instead of the "presentation" so the filter will work
parse: function(d) {
$.each(d, function(idx, elem) {
elem.date6 =
new Date(
elem.date5.getFullYear(), // 20yy
elem.date5.getMonth(), // MM 00 - 11 for jan to dec
elem.date5.getDate(), // dd 00 - 31
elem.date5.getHours(), // HH 00 - 23
elem.date5.getMinutes() // mm 00 - 59
// // Sec 0
// // Ms 0
);
});
return d;
}
}
});
$("#grid").kendoGrid({
dataSource: dsDataSource,
columns: [
{ field: "title", title: "Title" , width: "270px" },
{ field: "date5", title: "D 5" , width: "230px", filterable: false, format:"{0:MM/dd/yyyy hh:mm tt}" },
{
// Bind to date6 (rounded), but display date5
field: "date6",
title: "Date5DateTime (no D6 data uses D5)",
width: "330px",
template: "#: kendo.toString(date5, 'yyyy-MM-dd HH:mm:ss.fff') #"
}
]
})
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<div id="grid"></div>

Adding multiple series to Chart

I'm currently trying to build a chart showing number of downloads of a product per date.
A sample of the current code is as follows:
var downloads = [
{ value: 48, date: new Date("2013/11/01") },
{ value: 50, date: new Date("2013/11/02") },
{ value: 55, date: new Date("2013/11/03") },
{ value: 35, date: new Date("2013/11/04") }
];
$("#chart").kendoChart({
dataSource: {
data: downloads
},
series: [{
type: "line",
aggregate: "avg",
field: "value",
categoryField: "date"
}],
categoryAxis: {
baseUnit: "days",
min: new Date("2013/10/31"),
max: new Date("2013/11/10"),
labels: {
dateFormats: {
days: "dd/MM"
}
}
}
});
It works fine if I have to display data for one product only. How would I proceed to display download data for another product, i.e. adding another series to the chart?
Right! I figured it out myself. Here it is:
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
},
type:"line",
aggregate:"avg",
field:"value",
categoryField:"date"
},
series: [{
name: "Product 1",
data: [{ value: 48, date: new Date("2013/11/01") }, { value: 50, date: new Date("2013/11/02") }]
},
{
name: "Product 2",
data: [{ value: 55, date: new Date("2013/11/03") }, { value: 35, date: new Date("2013/11/04") }]
}],
categoryAxis: {
baseUnit: "days",
min: new Date("2013/10/31"),
max: new Date("2013/11/10"),
labels: {
dateFormats: {
days: "dd/MM"
}
}
}
});

Resources