I,
I have a kendoRecurrenceEditor control and i want to translate them.
I follow this example but don't tell me how to translate days like: "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
http://jsbin.com/ObuFoga/1/edit
Any solution?
Thanks Bruno F.
Setting the current culture should automatically change them. More info can be found in the globalization help topic.
The days are from kendo.culture().calendar.days. You can over-write them if you need to:
// Recurrence Editor uses the 2 character day abbreviations and can't be configured
// overwrite the 2 characters with the 3 to force what we want
var dayInfo = kendo.culture().calendar.days;
for (var i = 0; i < dayInfo.namesAbbr.length; i++) {
dayInfo.namesShort[i] = dayInfo.namesAbbr[i];
}
Related
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});
});
});
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.
I have one kind of scenario using date picker. I have date picker with max date=current date + 10 days,on page load only i want to show date more than the max date,but I'm allowing user to enter only up to max date. Is it possible. Without looking maxing date i want to display only the date what ever i want.code:-
var datepicker = $("#date" + uid).data("kendoDatePicker");
var addDays = new Date();
if (arr[1] == "") {
var d = new Date();
datepicker.min(new Date());
datepicker.max(new Date(d.getDate() , d.getMonth(), d.getDate()+ parseInt(arr[1]) - parseInt(1)));
}
I don't know if this is achievable. But what if you try to add two date pickers instead? One that display only the text, and the other only the calendar button. You need to play a bit the CSS, but I think it could spare you a lot of time.
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;
}
currently i using multiple datepicker (http://keith-wood.name/datepick.html). I need to pass dates from MySQL table with PHP (reservations) to calendar and change CSS style for show state.
occupied - red
pending - yellow
free - grey
preview on another site: http://www.chata-vysocina.eu/en/rezervace/
Anyone have some tips how to do that?
Thank you,
Tomas
Ok, i resolved my problem with following lines.
<script>
var dates = [
[2013, 12, 24],
[2013, 12, 25]
];
var today = new Date();
$('#reserve').multiDatesPicker({
firstDay: 1,
numberOfMonths: 4,
dateFormat: "dd-mm-yy",
altField: '#dates',
minDate: 0,
beforeShowDay: function (date){
var year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
// see if the current date should be highlighted
for (var i=0; i < dates.length; ++i)
if (year == dates[i][0] && month == dates[i][1] - 1 && day == dates[i][2])
return [false, 'booked'];
return [false];
}
});
</script>