Using the jQuery plugin FullCalendar, I want the selected date on the calendar to be incremented(by only one day) on a button click event.
This is the code I have been trying using the incrementDate() method:
$('#coolButton').click(function(){
$('#calendar').fullCalendar('incrementDate', 0, 0, 1);
});
This will only work if I increment the year or the month, but never if I increment the day. Any idea how to get the calendar to select the next day?
Thanks
Actually It does increase the selected date by a given amount of time. (in your example by a single day). The thing is you can't see it.
if you click that button may be 30+ times you can see the calender will move to the next month.
(If you change the CSS of the selected date, then you can see it increment)
Related
rc-calendar: https://github.com/react-component/calendar
Is there a way to detect the change of month on clicking the next/previous buttons as labeled in the image below:
My use case: I need to fetch all the available dates in a month on clicking next month and disable the unavailable dates in that month.
Code: https://codepen.io/sachiv/pen/WBNXLp
PS: There is a prop onChange which detects change only on the selection of a date and not just month change.
I want to hide the previous and next month dates and events from yearview of fullcalender in Asp.Net. Currently I am using the css code which hides the dates but not the date events.
td.fc-other-month {
visibility: hidden;
}
How could I remove the date events as well?
Maybe one of those solutions will do?
Remove past dates and next months dates from the current month
I'm trying to get a full year calendar from jQuery UI datepicker, where I can interact with weeks rather than days.
I already found how to do the weekly part, but now I would like to display the full year, for a result similar to this :
I managed to add the 12 months, using the numberOfMonths: 12, but how can I set them display as a grid? I tried to set a width to the container, but it doesn't do anything.
For the starting month, I find on an other topic that I can change default date to 1st January adding defaultDate: new Date(new Date().getFullYear(), 0,1). This indeed make the months starting on January, but it also move the current day selection to 1st January... I would prefer, if someone knew a way to keep the current day as default selection.
Then for the previous/next button, is it possible to make them changing year in stead of month ? Else I think I may cheat, by adding an event handler to click 12 times instead of 1.
Finally, I would like to move the next button back to the third month like in the picture. It may not be very hard using CSS, so I'm just curious if there might be a function to do it more easily.
Here's a JSFiddle for my current code http://jsfiddle.net/AVZJh/2553/
I finally found all the missing part, result : http://jsfiddle.net/AVZJh/2625/
Grid & mooving previous/next button was both done changing numberOfMonths to an array : numberOfMonths: [4,3]
Previous/next switching year in stead of month was done adding stepMonths:12
Starting at january without changing default date was done adding showCurrentAtPos: new Date().getMonth()
Why don't you try AnyTime. It has all the features you ask for.
In my viewDisplay method i have a goToDate method that actually when you click on a day, week or month the calender view go to this specific clicked day with what ever you choose from day. week or month
viewDisplay: function (view) {
var current_clicked_day = $(window).data('cell_date') || new Date();
$('#calendar').fullCalendar('gotoDate', current_clicked_day);
},
and This is working fine, However it breaks all events related to prev, next and today
<>Today
i'm not sure if this is something in my code or a bug in the library
Working Example
For Example
if you click on a day -on the calendar - and then click on Day in the upper right corner and then Today that wouldn't work, plus i don't get any errors in the console
From what I am understanding, you would like to display the agendaDay view when you click on a day in the month or weekAgenda views (http://arshaw.com/fullcalendar/docs/views/Available_Views/)
First of all, viewDisplay has been deprecated (http://arshaw.com/fullcalendar/docs/removed/viewDisplay/) a couple of builds ago. I suggest you update your library.
To achieve what you want you need to call dayClick (http://arshaw.com/fullcalendar/docs/mouse/dayClick/)
Here is a working fiddle based on yours.
I have commented viewDisplay and added the dayClick part just after. http://jsfiddle.net/4bg2B/3/
I'm using jQuery UI's datepicker to display a calendar with select lists. Input field and select list are synchronized, so when you change value of either the datepicker or select list, the value of the other fields will change accordingly.
The datepicker is used with the Restrict date range functionality (http://jqueryui.com/datepicker/#min-max). That does its job perfectly - the END date can't be before the START date and you are unable to choose previous days accordingly. Of course, you can't choose that the START date is after the END date either.
The problem is with the select list. Even if "restrict date range" does its job, you still can select any date with the select lists. Therefore, I'm looking for this solution when you use the select lists (it shouldn't affect anything if you only use the calendar icon):
If you first select the START date, the END date should automatically change to one day after the selected date.
If you have both dates selected and decide to change the START date to the date that is after the END date, the END date should again change to one day later.
If you have both dates selected and decide to change the END date to the date that is before the START date, the START date should change to one day before the END date.
I have tried with using this piece of code to affect #1 and #2:
$('#start').change(function() {
var date2 = $('#start').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('#end').datepicker('setDate', date2);
});
However, it doesn't seem to affect anything. Here is the whole example on jsFiddle:
http://jsfiddle.net/JW4jg/