Develop Reference

Limit creation of events in fullcalendar

I've checked you can constrain some events to be dragged in a period, or to avoid to move to other periods, but I'm looking a feature to block creation of events just in the business hours defined.
Is it possible to use the "selectable: true" (to be able to create events with clicking in some time and drag to the end, as Google Calendar), but limit to some time spaces ?

If you have a defined set of time when events will always be restricted to (without variations over time) then you can use a combination of the businessHours and selectConstraint settings to enforce this:
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
startTime: '10:00', // a start time (10am in this example)
endTime: '18:00', // an end time (6pm in this example)
},
selectConstraint: "businessHours"
In the above example, "businessHours" will grey-out all the areas of the calendar outside the times defined (in this case Monday to Thursday from 10am to 6pm each day). Setting "selectConstraint" to "businessHours" means that users cannot select to create new events which fall outside the same time range.
Demo: https://codepen.io/ADyson82/pen/aboqPoo

How can I highlight every 7th day from current day?

I have a fullcalendar defaults to week view. Current day is highlighted. There is another external event div from where an event need to drop on the calendar. This things works as designed. There is also a custom button clicking on which event should be added on the calendar. By default it drops on current date. But when user changes week, navigate to next or previous week, no day is selected.
I want to not only select every 7th day (+7 for next or -7 for previous) to be default day and change its color.
Difficult to provide full code, but here it, run the following link and set the view to week view. When you open week view, Friday 26th is current day and selected. When user navigate to Prev or next, I want to 2nd Nov or 19th Oct be the default day and be highlighted (color)
https://fullcalendar.io/docs/external-dragging-demo
I have tried few things without any success:
$('.fc-prev-button').click(function(){
//currCalDate is global variable to store the current day
currCalDate.setDate(currCalDate.getDate() - 7);
console.log(currCalDate);
$('#calendar').fullCalendar('gotoDate', currCalDate);
});
$('.fc-next-button').click(function(){
currCalDate.setDate(currCalDate.getDate() + 7);
$('#calendar').fullCalendar('gotoDate', currCalDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then tried using dayRender in FC definition or may be something can be done with viewRender?
dayRender: function (date, cell) {
var today = new Date(currCalDate);
date = moment(date).toDate();
if (date.getDate() === today.getDate()) {
cell.css("background-color", "red");
}
},

Here, you can check the code for next 7th day highlight:
dayRender: function (date, cell) {
var today = new Date();
date = moment(date).toDate();
dateFromplus = moment().add(7,'d').format('YYYY-MM-DD');
$(".fc-day[data-date='"+dateFromplus+"']").css("background-color", "red");
dateFromminus = moment().subtract(7,'d').format('YYYY-MM-DD');
$(".fc-day[data-date='"+dateFromminus+"']").css("background-color", "red");
}
For more fullcalendar info : fullcalendar hacks

Custom slot label in timeline view depending on days count

I need to add custom label depending on day count.
For example, I have 1 calendar year
defaultView: 'timeline12Month',
views: {
timeline12Month: {
type: 'timeline',
duration: {
week: 52
},
titleFormat: 'DD.MM.YYYY'
}
}
So I need to add custom label depending on custom day count. For example, I need to add multiple stages. Stage 1(20 days), Stage 2(55 days), Stage 3(150 days) and so on.
I know its possible to change monthName array, but this is not what I'm looking for.
Is this possible to do in fullcalendar(scheduler)?

How can I customize when a week starts in a Keen IO query?

Is it possible to define the start and end day of a 'week' in the Keen IO query language? I have a query like:
var query = new Keen.Query("count", {
eventCollection: "add_to_carts",
timeframe: "previous_2_weeks",
interval: "weekly"
});
The default result of my query shows the week starting Sunday and running to Saturday, but I need my data to start on Saturday - is that possible?
What we want to do is find data for the current week and the previous week in one query (using intervals) and separate the two week's results for comparison - with each week running from Saturday to Friday.

It would be possible with absolute timeframes and a custom interval definition, like this:
var query = new Keen.Query("count", {
eventCollection: "add_to_carts",
timeframe: {
start: "2016-08-01",
end: "2016-09-12"
},
timezone: "US/Pacific",
interval: "every_7_days"
});
Instead of using "weekly", it uses a custom interval definition of "every_7_days". This would effectively be one query starting on a Saturday some time in the past, and you would get as many interval results as 7 day blocks from that Saturday - essentially creating previous week and this week in the response.
Here's a fiddle that shows this query and resulting chart.

Get details of days of week using fullcalender

I want to get a detail (only date of week) of days of a particular week using fullCalender control.
I am getting detail of particular day only but i want a detail of whole 7 days of particular week. If I change week from 18 to 15 then data should be change.

To get the start-/enddates for a particular week you can use the viewRender callback to retrieve the information.
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
viewRender: function(view, e){
console.log(view.start, view.end);
}
});
This code will log the start & enddates in console when you change weeks.