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
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.
I'm quite new to Highcharts and the documentation is pretty huge for me to solve my little big problem.
I'm working on app for runners and want to display running pace on chart in minutes:seconds by kilometer or mile, in format like 05:30, which means pace 5 minutes and 30 seconds pre kilometer or mile.
My current (and not working) code is here:
Highcharts.chart('container', {
yAxis: {
type: 'datetime',
categories: ['03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30'],
labels: { format: '{value:%H:%M}'}
},
xAxis: {
categories: ['2018-01-01', '2018-05-01', '2018-10-01']
},
series: [{
data: ['05:00', '06:00' , '06:30'],
dataLabels: { format: '{value:%H:%M}'}
}],
legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle'},
plotOptions: {series: {label: {connectorAllowed: false},pointStart: 0}},
responsive: {rules: [{condition: {maxWidth: 1000},chartOptions: {legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'}}}]}
});
Currently the line in chart is not appearing. Can anybody repair my code to work correctly? Thanks.
Data needs to be numbers, not string values. If you look in console, you will most likely have Error 14 telling you this.
Changing your data to milliseconds (the format needed for highcharts to understand time) will work, like this:
data: [5 * 3600 * 1000, 06 * 3600 * 1000, 6.5 * 3600 * 1000],
Working example: https://jsfiddle.net/ewolden/55bk99ke/2/
If you want to fix the tooltip in the above example, you just need to format it the same way you format the yAxis labels. Like this:
tooltip: {
pointFormat: '{point.y:%H:%M}'
},
https://jsfiddle.net/ewolden/55bk99ke/5/
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
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.