I am using Kendo UI v2016.2.714 and jQuery v1.9.1. I am unable to turn off the scheduler tool bar k-current-view which seems to redundantly indicate which of the Day/Week/Month buttons is selected:
This appears to be the result of a recent KendoUI upgrade as I never saw it before. Basically I just want to see the three buttons which I have defined in my javascript file:
var sch = $("#schAppointment").kendoScheduler({
date: new Date(), // date: new Date(), The current date of the scheduler
showWorkHours: true,
workDayStart: new Date("2013/1/1 06:00 AM"),
workDayEnd: new Date("2013/1/1 08:00 PM"),
height: 700,
timezone: "Etc/UTC",
views: [{
type: "day",
eventTemplate: $("#event-day-template").html(),
eventHeight: 40
}, {
type: "week",
eventTemplate: $("#event-week-template").html(),
eventHeight: 40
}, {
type: "month",
selected: true,
startTime: new Date("2013/1/1 06:00 AM"),
endTime: new Date("2013/1/1 08:00 PM"),
eventTemplate: $("#event-month-template").html(),
}],
I have not found in the Kendo documentation how to disable this k-current-view and I am still learning Javascript so I haven't discovered how to find the attribute to disable either.
Just for those who might be looking for this answer:
Turns out it was the missing kendo.*.min.css type files. I upgraded everything else but that...dumb mistake
Related
In Dhtmlx we realized that duartion can be calculated start to end or start duration or duration to end based on perfrence however we would like count the start to date as 1 not zero.
I Sow in many questions the answer is to change the display. Then, there will be the problem of exporting to xml MS Project or XML PM6 it will have conflict when it passes through Api and reault to incoherent output.
Is there any round about it
It is diffeent in MS project
Unfortunately, when we upload from MS project to DHTMLX Ganett the duration is calculated automatically because we don't wnat to change the grid time slots
Any suggestions of how to add this day in calculation without playing with start or end date
var dateEditor = gantt.config.editor_types.date;
gantt.config.duration_unit = "day";
gantt.config.work_time = true;
gantt.setWorkTime({day : 1, hours: true});
gantt.setWorkTime({day : 2, hours: true});
gantt.setWorkTime({day : 3, hours: true});
gantt.setWorkTime({day : 4, hours: true});
gantt.setWorkTime({day : 5, hours: true});
gantt.setWorkTime({day : 6, hours: true});
gantt.setWorkTime({day : 7, hours: true});
gantt.config.columns = [
{name: "text", label: "Name", tree: true, width: 200, editor: textEditor, resize: true},
{name: "duration", label: "Duration", width:80, align: "center", editor: durationEditor, resize: true},
{name: "start_date", label: "Start", width:140, align: "center", editor: startDateEditor, resize: true},
{name: "end_date", label: "Finish", width:140, align: "center", editor: endDateEditor, resize: true}
];
gantt.calculateEndDate({start_date: new Date("2022/01/13"), duration:5});
console.log(gantt.calculateDuration({start_date: new Date("2022/01/13"), end_date: new Date("2022/01/15")}));
gantt.init("gantt_here")
Gantt uses the non-inclusive duration. There is no way to change how Gantt works, but you can change what is displayed to the users by using the templates:
https://docs.dhtmlx.com/gantt/desktop__loading.html#taskenddatedisplayampinclusiveenddates
https://docs.dhtmlx.com/gantt/api__gantt_task_end_date_template.html
Here is an example of how it works:
https://snippet.dhtmlx.com/ixxx7r2i
Also, you can set the duration_unit to hour and enable the work_time parameter:
Gantt will show the same dates in the grid because the hours will be different.
To show the duration in days and even in fractional values, you can use the formatters:
https://docs.dhtmlx.com/gantt/desktop__formatters_ext.html#durationformatter
Here is an example with the date input type in the inline editors:
https://snippet.dhtmlx.com/j2axq1lu.
Here we need to modify the dates because the input element with the date type doesn't have the hour values.
Here is another example with the datetime-local input type in the inline editors:
https://snippet.dhtmlx.com/cy7tht5r.
The input element may take more space, but it will store the dates more accurately.
How do I add a 15 day (bimonthly) view in Kendo UI Scheduler?
The idea is to show 15 days at a time (as opposed to 30 days in a month).
Any help is greatly appreciated.
This can be done using custom timeline view ,
var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
options: {
name: "MyCustomTimelistView",
title: "Timeline Week",
selectedDateFormat: "{0:D} - {1:D}",
selectedShortDateFormat: "{0:d} - {1:d}",
majorTick: 1440,
**numberOfDays: 15**
},
and then the view type will be "MyCustomTimelistView"
var scheduler = $("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [{
type: "**MyCustomTimelistView**",
selected: true,
dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M ddd')#</span>"
}],
Reference: https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-views/timeline-with-dynamic-length
How do I bind Json data to kendoscheduler. Javascript. I am new to kendo products. I am able to get Json data to show in Fullcalendar
{
"title":"Graduation Ceremony Group H",
"start":"4/23/2015",
"end":"4/23/2015",
"description":"901 Boulevard Street"
}
First you need to build its datasource and then put the datasource to the scheduler..
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6")
});
var scheduler = $("#scheduler").data("kendoScheduler");
var dataSource = new kendo.data.SchedulerDataSource({
data: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]
});
scheduler.setDataSource(dataSource);
Read following documentation to help you build your own scheduler with proper datasource so its fit what you need..
DataSource Documentation
Scheduler DataSource Documentation
Scheduler Documentation
I have a doubt in Kendo chart tool tip .That is how to display the date with time format .I have a field time: `2013-02-13 16:58:07`,
some thing like this so when i am reading in tool tip template i am
calling the field as
tooltip: {
visible: true,
template: '#= category # ,
font: '11px Trebuchet MS'
}
In tool tip it was showing as fri feb 01 2013 00:00:00 gmt+0530(indian standard time)**
How can I change that and display only 2013-02-13 16:58:07 using remote data
I used dataitem in local data it was working fine but with remote data i am getting as undefined.
tooltip: {
visible: true,
format: "{0}",
template: 'DATE:#= dataItem.time<br/>'
}
The problem is the timeformat,this is from ww3c:
var d=new Date();
var n=d.toISOString();
And this is the result:
2013-02-28T07:41:04.188Z
Also try to read this:
http://blog.stevenlevithan.com/archives/date-time-format
I'm working with FullCalendar fetching events from a json feed. However, I've run into a problem.
The calendar shows my event just fine in the month view, but when going to the day/week in day-view and week-view, the even is not shown?
My initialization of fullcalendar looks like this:
var options = {
header: {
left: 'prev, next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
allDaySlot: false,
monthNames: ["Januar","Februar","Marts","April","Maj","Juni","Juli", "August", "September", "Oktober", "November", "December" ],
monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
dayNamesShort: ['Søn','Man','Tir','Ons','Tor','Fre','Lør'],
buttonText: {
today: 'I dag',
month: 'Måned',
week: 'Uge',
day: 'Dag'
},
weekends: false,
defaultView: 'agendaWeek',
events: '/feed/',
firstHour: 8,
slotMinutes: 20,
defaultEventMinutes: 120,
axisFormat: 'HH:mm',
timeFormat: {
agenda: 'H:mm{ - h:mm}'
},
minTime: 8,
maxTime: 16
};
$('#calendar-holder').fullCalendar(options);
My feed returns the following json:
[{"id":"7","title":"Elias (10:00)","start":1359108000,"end":1359109800,"url":"\/tidsbestillinger\/edit\/"}]
Any ideas why this is happening?
Solved! Had to set
allDayDefault: false,
while initializing FullCalendar.
Alternatively I could have set
allDay = false
in the JSON - but doing it globally is much easier.
Also make sure that event length must be enough that it can be displayed in slotDuration.
e.g.
my slotDuration is 15 minutes, my event only displayed if it has minimum 2 minutes duration.