We Keep Coding

Fullcalendar: Events with open and closed day background/marker

I was building a Calendar with dynamic events.
Simplest representation of my event object
id : " sdsddsd "
start : "2018-05-13T0..."
end : "2018-05-26T0"
open_monday: true
open_tuesday: false
open_wednesday: true
open_thursday: false
...
So in the month view calendar, I wanted to show my events and within the event if open_monday is true then set the background of that day grid to green. The following Tuesday will use the value open_tuesday and it is false so it will display red.
The red and green background will only be inside an Event. If the day grid isn't within any event, it will be left as blank.
How can I do this. Or is there a better way to do this using resources, constraintsetc. ?.
Thanks.

I am not sure I understand, but it is rather strange to pass the whole list of open/closed weekdays with each event. You should rather determine which weekday your event is and act accordingly. Just add an eventRender callback field to your calendar to control exactly the layout of the HTML element rendering the event. See
https://fullcalendar.io/docs/eventRender
To know the weekday of an event, use
moment(event.start).day()
See
https://momentjs.com/docs/#/get-set/day/
Alternatively, you can add an eventDataTransform field to your calendar, which will be applied to each event when it is loaded, so you can change any of its layout specifiers (color, backgroundColor, className...), see list at
https://fullcalendar.io/docs/event-object

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)

Knockout with Jquery UI datepicker date display

Please see this link for details http://jsfiddle.net/pakpatel/5p6Uz/4/
Can we do the range in Datepicker, If first date choose [ 10/12/2012 ] then second date shouldn't be before 10/12/2012, Customer can select date after ex.[10/13/2012] in datepicker.
Could anyone explain me how to implement. Thanks in advance.

By using the previous row's data as the new min, it makes it challenging.
Working demo is at http://jsfiddle.net/photo_tom/5p6Uz/24/
There were two things that were required.
Added a computed observable to pass the previous row's choosedate value to the current row.
Added a new minDate binding to set the mindate option on the date picker.
This is not a completed fiddle. It doesn't properly handle adds or deletes. This is because the ko.computables need to be rebuilt.
EDIT:
Updated to handle add / delete methods. Interesting problem, trying to transfer information between two different rows in the table. Good challenge.
Soution at http://jsfiddle.net/5p6Uz/34/.