DHTMLX Scheduler custom Timeline with AM/PM days - dhtmlx

I use the DHTMLX Scheduler in Timeline view for a project and the working hours are from 7AM to 5PM. I was able to make an AM/PM view per day but the first_hour and last_hour configs are not respected in the view. The screenshot shows more. The first event in the morning should be displayed far more left as it starts at 7:30Am.
My config:
scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom = "Section";
scheduler.config.dblclick_create = false;
scheduler.config.edit_on_create = false;
scheduler.config.details_on_dblclick = false;
scheduler.config.details_on_create = false;
scheduler.config.start_on_monday = true;
scheduler.config.first_hour = 7;
scheduler.config.last_hour = 17;
scheduler.config.full_day = true;
scheduler.config.mark_now = false;
scheduler.config.drag_move = false;
scheduler.config.drag_resize = false;
//===============
//Configuration
//===============
scheduler.createTimelineView({
name: "timeline",
x_unit: "hour",
x_date: "%A",
x_step: 12,
x_size: 14,
x_start: 0,
x_length: 14,
y_unit: scheduler.serverList('teams'), // sections and events from same ajax call
y_property: "team_id",
render: "bar",
section_autoheight: false,
dy: 30,
dx: 100,
// first_hour: 7,
// last_hour: 17,
second_scale: {
x_unit: "day", // unit which should be used for second scale
x_date: "%D %j %M"
}
});
Any help will be appreciated.
EDIT:
After update based on the answer here the result:

first_hour, last_hour configs applied for Y-axis in Day, Week, Units views (check Documentation).
Currently, to hide hours at the beginning and end of the day in the Timeline view, you should have only 1 X-axis like in this sample. I.e. visible part of the event is from 10 to 18 because of first_hour, end_hour properties of createTimelineView method. Check the screenshot.
There is also ignore_[viewName] function which can be used to hide interval that equal to min step of the scale (12 hours in your case).
This could help solve your issue if set min step = 6 (hours) and disable 6-7 AM and 5-6 PM by addMarkedTimespan. I tried to create a snippet for you http://snippet.dhtmlx.com/46ba545ad , but found out that the second part of this condition if(date.getHours() < 6 || date.getHours() > 17){ is not working correctly. The event can be created until 6 PM. We will fix it ASAP, but now I can't specify the exact time. I suggest you use the first way with 1 scale to solve the issue.

Related

Cypress - for loop [duplicate]

This question already has an answer here:
Cypress - calendar change month, until specific month is found
(1 answer)
Closed last month.
I have a date picker where I want to click the left arrow till I go to April 2022.
First I will open the calendar and then I am using a loop. Here I am going to check whether the selected month is April, if not I am going to continue to click the left arrow. Please tell me whether this is correct.
myFunction() {
for (let i = 1; i <= 11; i += 1) {
cy.get('[style=""] > .CalendarMonth > .CalendarMonth_caption').should('have.text','April 2022')
cy.get('.DayPickerNavigation_leftButton__horizontalDefault > .DayPickerNavigation_svg__horizontal').click()
}
}
We cannot use Loops in cypress. However we can create methods similar to that. I had similar issue where I have to select a date range i.e. start and end date and click download. We have to create recursive method to navigate through months till we get the month we need.
Here is the method I created:
const curr_month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const d = new Date();
let name = curr_month[d.getMonth()];
cy.log("Name of Current Month" +name);
// ABOVE CODE WILL GIVE YOU CURRENT MONTH VALUE TO COMPATE LATER IN IF BLOCK
var monthNow;
// To go into previous months till september and select September 1
function changeMonth() {
cy.get(<CSS selector till, it contains the text of Month>).then((monthValue) => {
monthNow = monthValue.text();
cy.log("Month VALUE is " +monthNow);
if(monthNow.toLowerCase() != "september") //i have to reach till September
{
cy.get(<LEFT Arrow CSS Selector>).click();
cy.log("Left Arrow Clicked on Calendar");
changeMonth(); //Till it does not reach September, keep making recursive calls
}
else
{
cy.log("September Month Active");
}
}) //closing then
} // closing function
Hope this helps, if you still need it.
Why not using the each class from Cypress.
it('Navigating questions until 33 from bottom arrows works correctly: OK', ()=> {
let answers = [];
answers.length = 33
cy.wrap(answers).each((num, i, array) => {
cy.get('[data-cy="exam-bottom-right-nav"]').click({force: true});
});
cy.wrap(answers).each((num, i, array) => {
cy.get('[data-cy="exam-bottom-left-nav"]').click({force: true});
});
});

How to check that a countdown label has the wanted values with Cypress?

I have an slider that controls the amount of time a countdown will have.
The countdown is showed in a label to the user. So, if I set it to 5, the label will show 5, then 4, then 3 until 0, the initial value is -.
I want to test this with Cypress. But I am not sure which is the correct way to do it without creating a flacky test.
Is there a recommended way to "watch" and specific item changes?
I too am looking for a good way to listen for element changes. But I think in your scenario maybe you can get away through the countdown timer with something like this:
const count = 5;
const countdownTime = 1000;
let expectedCurrentNumber = count - 1;
do {
cy.contains('countdownLabel', expectedCurrentNumber, { timeout: countdownTime });
} while (--expectedCurrentNumber > 0);
cy.contains('countdownLabel', '-', { timeout: countdownTime });

Unable to view the complete last candle

As you can see in the pic below, only 50% of my last candle appears and I am having a hard time trying to figure out the settings which will make sure I can view the last candle in its entirety
If you look at the last candle in RED, you will see that the axis begins at midpoint of the last candle. If you compare this with below candle , you can fully view the last candle
http://jsfiddle.net/amcharts/TLx2n/
Key and relevant chart componenets are as follows:
graph = new AmCharts.StockGraph();
graph.id = "Price";
graph.title="Main";
graph.valueAxis = 'v1';
graph.showHandOnHover= true;
graph.proCandlesticks= false;
graph.labels = true;
graph.balloonColor="#00000";
graph.comparable=true;
graph.openField="Open";
graph.highField="High";
graph.closeField="Close";
graph.valueField="Close";
graph.type='candlestick';
graph.fillAlphas= 0.7;
graph.lineThickness= 1;
graph.fillColors= '#CC0000';
graph.lineColor= '#CC0000';
graph.negativeFillColors= '#000000';
graph.negativeLineColor= '#000000';
graph.negativeLineAlpha= 1;
graph.negativeFillAlphas= 0.7;
graph.proCandlesticks= false;
var categoryAxis = chart.categoryAxis;
categoryAxis.axisAlpha = 1;
categoryAxis.groupToPeriods = ["DD", "WW","MM"];
categoryAxis.maxSeries=300;
categoryAxis.fillAlpha=.2;
categoryAxis.equalSpacing = true;
categoryAxis.parseDates = true;
categoryAxis.startOnAxis = true;
categoryAxis.gridAlpha = 0.5;
categoryAxis.minorGridAlpha = 0.07;
categoryAxis.axisColor = "#000000";
categoryAxis.axisHeight=25;
categoryAxis.inside=false;
categoryAxis.tickLength = 0;
categoryAxis.gridThickness = 0;
categoryAxis.minorGridEnabled=false;
categoryAxis.axisThickness=0;
categoryAxis.gridThickness=0;
Other properties that I am using are as follows:
1. ValueAxesSettings
inside:false,
autoMargins:true,
minorGridEnabled: false,
logarithmic: false,
treatZeroAs: 0,
axisAlpha: 1,
gridAlpha: 0,
fillAlpha: 0,
minorGridAlpha : 0.07,
gridColor: "#000000",
axisThickness: 1,
gridThickness : 1,
tickLength: 1,
minMaxMultiplier: 1
Please let me know if I have not been clear in articulating the pain point in visualizing the last candle in its entirety or have not provided enough details. Please ignore any syntax error in the code as I am using a different language compiler.
The reason why the last candle is cut off is that you have startOnAxis set to true, which means exactly that - I want my last and first categories to start and end in the middle. Set it to false.
Please note that on date-based category axis, this setting will work only if equalSpacing is set to true. (disabling equalSpacing if you don't actually need it would disable cutting off of candles as well)
As a side note, looking at your code, it seems you are mixing Serial and Stock Chart config together. ValueAxesSettings is a feature of Stock Chart and would be ignored on Serial chart. The same goes for groupToPeriods, maxSeries, etc.

Configure kendo-date-picker to restrict dates into current month

I have used Kendo Datepicker (kendo-date-picker)into one of my projects and now I want to restrict the date selection into current month. Yes, I can do it programmatically, but I want to know whether is there any configuration option to restrict the date selection into current month.
For example, if I am in April 2015, I should not be able to select any date outside of April 2015.
You can try this way:
$(document).ready(function() {
// JavaScript counts months from 0 to 11. January is 0. December is 11.
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
$("#datepicker").kendoDatePicker({
min: firstDay,
max: lastDay
});
});
See this Demo
You can override the style to hide the other month dates.
.k-other-month {
visibility: hide;
}

smartgwt calendar getdaybodyhtml issue

I have a issue with the smartgwt calendar tool, I've customized it to assign special icon flags certain days in the month through the protected method getdaybodyhtml() of the class calendar, everything works fine except for one thing when I display the calendar on chrome(all versions) IE(7,8,9) and FF(till 14.0.1), but when I display the calendar on FF(between 15 to 19) this flags icons aren't displayed. I've made a follow to the code and I found that the html code that I defined there in the getdaybodyhtml() method is not printed.
I was looking on the smartgwt for any issue like that but i don't found anything related.
Any help would be received.
(sorry if my english is not so good, is my second language)
Here is the piece of code:
private Calendar calendar = new Calendar(){
#Override
#SuppressWarnings("deprecation")
protected String getDayBodyHTML(Date date, CalendarEvent[] events, Calendar calendar, int rowNum, int colNum) {
String value = defaultMessage != null ? defaultMessage : date.getDate()+"";
// The "events" are the events of the day
List<CalendarEvent> calendarEvents = new ArrayList<CalendarEvent>(Arrays.asList(events));
if(calendarEvents != null && calendarEvents.size() > 0) {
// Removing the tooltip and the excluded colours
removeTooltipsFromCalendar(calendar,date);
removeExcludedColoursFromCalendar(calendarEvents);
if(calendarEvents.size() == 1){
// Description contains the colour
String colour = calendarEvents.get(0).getDescription();
value = imgHTML(COASTAL_IMAGES_DIR+colour+COASTAL_IMAGE_SUFFIX, colourWidth, colourHeight, "images", "class='handCursor'", null);
}else if(calendarEvents.size() > 1){
// Might have two vessels going to the same port in the same day
Set<String> colours = new HashSet<String>();
for(CalendarEvent event : calendarEvents){
// Description contains the colour
colours.add(event.getDescription());
}
int numberOfPorts = colours.size();
for(String colour : colours){
value += "<div>";
value += imgHTML(COASTAL_IMAGES_DIR+colour+COASTAL_IMAGE_SUFFIX, colourWidth, colourHeight/numberOfPorts, "images", "class='handCursor'", null);
value += "</div>";
}
}else{
value = defaultMessage != null ? defaultMessage : date.getDate()+"";
}
}
return value;
}
};
PD: In all the versions of chrome and IE the piece of code:
value += "<div>";
value += imgHTML(COASTAL_IMAGES_DIR+colour+COASTAL_IMAGE_SUFFIX, colourWidth, colourHeight/numberOfPorts, "images", "class='handCursor'", null);
value += "</div>";
is printed ok, in fire fox till the 14 version it's printed ok, but in ff from 15 to 19 not prints the "div" and the "image". I already see the code throw firebug and the div just not apear in that firefox version(15-19).
PD: it doesn't work on last update of IE 10 too.
Are you able to see icons in following sample in SmartGWT showcase.
I'm able to see icons in above sample for April 2, April 3, April 4 and April 5 as of March 31.
CalendarEvent instances used in this sample are created for 2, 3, 4 and 5 days ahead of current date.
I'm using FireFox 19.0.2
Finally I found the issue. I don't know why but in the resent versions of Firefox, after 14 version, the gwt calendar(v 2.1) is repeating the printing of the calendar twice automatically, so when it prints the second time, it did it without the images inside the day bodies.
Solution: manually creation of code to stop the twice printing.

Resources