Using month view, move week by week instead of month by month - javascript

I am using FullCalendar v2.2.5 and I would like to navigate week by week instead of month by month when the calendar is using the month view.
I see that the function used to navigate forward is this but I wasn't able to figure a way to change this behaviour.
Is there any way to accomplish this?

By default, as stated on prev and next documentation:
If the calendar is in month view, will move the calendar back/forward one month.
If the calendar is in basicWeek or agendaWeek, will move the calendar back/forward one week.
If the calendar is in basicDay or agendaDay, will move the calendar back/forward one day.
If you want to change the how that works, you'll need to use a Custom view, based on the month view. Something like:
$('#calendar').fullCalendar({
defaultView: 'customMonth',
views: {
customMonth: {
type: 'month',
duration: {weeks: 1}
}
}
});
Basically, you "create" a customMonth view (which is the default view), based on the month view and the duration of this is one week.
I've made a jsfiddle where you can see this working.
Full disclosure: This solution was found based on this answer.

Related

How to CalendarView on click date show same schedule for every Mon,Tue,Wed.ect... throughout the year

I can not display a specific schedule on click Monday (example Mondays: "Rice with Chicken") or any other day if it is not that day....
i would like to set a calendar view which shows a month and on any click it shows the specific Schedule for that day in a separate Textfield. I manage to show dates i+i1+i2 at any day on click, but does not work with days like Mon,Tue,Wed ect.

Bootstrap datepicker: Start picking date from year

Normally when selecting dates from immediate vicinity of 'today', default behaviour (picking a day of month) works well but when picking birthdays I want the user to start picking the date from years. I looked at the docs but couldn't find any option to do this. I want the datepicker to open with years selection first. As shown in this picture:
I'm using this plugin: https://bootstrapdatepicker.readthedocs.io/en/latest/
Use startView option (0-days, 1-months, 2-years, see plugin docs):
$('#date').datepicker({
startView:2//
});

jQuery UI datepicker as "year calendar"

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.

Fullcalendar view display goToDate breaks prev, next and today

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/

jQuery FullCalendar select next day?

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)

Categories