i'm using externel event component of fullcalendar like below
http://fullcalendar.io/js/fullcalendar-2.7.1/demos/external-dragging.html
// this is my droppable event.
drop: function(date) {
//e.g. starttime="09:00 11:00"
starttime=$(this).text().split(" ")
tempDate = new Date(date);
var start=moment(tempDate).format('YYYY-MM-DD');
var start=start+" "+starttime[0];
var end=start+" "+starttime[1];
var newEvent = {
title:start + " ~ " + end,
start: start,
end: end,
allDay: false,
};
$('#calendar').fullCalendar('renderEvent', newEvent, true);
}
one of external event sources, i've changed only drop event part like above. because I would like to apply the date by only my fixed date via starttime.
but there were created another elements like positioned date and my fixed date.
do you know how to appear only fixed date?
06:00 ~ 08:00 was positioned date.
09:00 ~ 11:00 was fixed date.
this is my screenshot.
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'm using the date picker to allow a user to select start and end dates.
When the page first loads, both date pickers will display the current month the first time the calendar is opened.
However, I want the start datepicker to open up a view from one year in the past.
I've looked through the api (options and methods) and haven't found anything to specify a month.
Has anybody tried this?
I don't quite get what view means. Just shooting in the dark - if you want to limit the start to 1 year in the past or on certain month in the past, there is a configuration option min.
From the Kendo examples:
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
min: new Date(2011, 0, 1) // sets min date to Jan 1st, 2011
});
</script>
Update:
var datepicker = $("#datepicker").data("kendoDatePicker");
var d = new Date ();
$("#datepicker").kendoDatePicker({
value: new Date (d.setFullYear(d.getFullYear() - 1))
});
So this should open the "view" at this day 1 year ago. Live at the Dojo
There is a property called dateView that can have the value set.
Dojo Demo
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.bind('open', function() {
if (this.value() !== this.dateView.value()) {
this.dateView.value(null);
}
});
datepicker.dateView.value(dt);
This will update the value in the popup calendar without updating the value of the widget itself.
Edit: This actually causes a bug where clicking the selected dateView value doesn't update the actual picker value. I've added a handler for the open event to take care of the mismatch and clear the selected dateView value.
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;
}
How do I remove the past dates from the full calendar. SO when the calendar loads it should display only current month's date. I could disable the past dates but I need to remove it from the current month.
Use the property visStart, this will let you control what the first visible day on the calendar is. You can set that to DateTime.Now() (c#) or Now = new Date() (javascript)
http://arshaw.com/fullcalendar/docs/views/View_Object/
This will stop the past dates from showing up the calendar.
I don't have the solution for removing dates, but this is what I'm using for when someone clicks on a date and trying to make an appointment thats in the past.
var date = new Date();
select: function(start, end, allDay) {
if(start < date) {
alert('Cannot select past dates.');
return;
}
},