We Keep Coding

Updating Full Calendar Day At Midnight

//Reset At Midnight
function resetAtMidnight() {
var now = new Date();
var night = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + 1, // the next day, ...
0, 0, 0 // ...at 00:00:00 hours
);
var msToMidnight = night.getTime() - now.getTime();
setTimeout(function() {
reset(); // <-- This is the function being called at midnight.
resetAtMidnight(); // Then, reset again next midnight.
}, msToMidnight);
}
function reset() {
$('#calendar').fullCalendar('today');
}
I am trying to have FullCalendar.js update the current day everyday at midnight. I pulled this reset snippet from another post on here - but the reset function does not seem to execute.

You have not provided full detail so I don't know what exactly you need but following code might help you to solve your issue.
You can check midnight quite easily using moment.js library.
Following code was taken from another post Best Way to detect midnight and reset data
$(document).ready(function() {
var midnight = "0:00:00";
var now = null;
setInterval(function() {
now = moment().format("H:mm:ss");
if (now === midnight) {
alert('reset() function here');
}
$("#time").text(now);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<code id="time"></code>
Fullcontrol:
You can either use rerenderEvents or refetchEvents as per your requirement. So it will be something like this
function reset(){
$('#calendar').fullCalendar('rerenderEvents');
OR
$('#calendar').fullCalendar('refetchEvents');
}
If you want to re-draw the fullcontrol then here is another informative post 're-draw fullcalendar'
As post suggested you can do
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');

Datetime Picker schedule time to 8 hrs from current time

I'm using DateTimePicker jQuery plugin by XDSoft, please check below image
My requirement is that, if i selected current date,(9th Nov, 2015) then the time from time picker should show 6hrs add to current time...
I mean, in above image current Date is selected... and current time is 12.00 but i want that 12.00 & above time should be disable..
How can we do that..??

Based on XDSoft DateTimePicker documentation, here's what can be done:
var logic = function( currentDateTime ){
var d1 = new Date();
// Check that it's today, so we need to restrict time chooser
if (currentDateTime.getDate() == d1.getDate() && currentDateTime.getMonth() == d1.getMonth())
{
// Adding six hours
d1.setHours ( d1.getHours() + 6 );
// Creating 'HH:MM' string
var defaultTime = (d1.getHours() < 10 ? "0" : "") + d1.getHours() + ":" + (d1.getMinutes() < 10 ? "0" : "") + d1.getMinutes();
// Enforce time restriction
// ('this' is jquery datetimepicker object)
this.setOptions({
minTime : defaultTime,
defaultTime : defaultTime
});
}
else
{
// Lift time restriction if selected day is not today
this.setOptions({
minTime : false,
defaultTime : false
});
}
};
// Initiate datepicker with custom logic
$('#datetimepicker').datetimepicker({
onChangeDateTime:logic,
onShow:logic
});
Adding 6 hours solution based on: https://stackoverflow.com/a/13034220/2715393

FULLCALENDAR: How to disable prev button and only be able to see current month and the next?

I downloaded: http://arshaw.com/fullcalendar/
Does somebody know how i can disable the prev button, so you can only see the current month and how i can limit the next button, so you can only see one next month?
I put this in the head:
$(document).ready(function() {
var date = new Date();
var d = date.setDate();
var m = date.setMonth();
var y = date.setFullYear();
$('#calendar').fullCalendar({
editable: true,
events: [
{

You can disable the prev/next button by just adding 'fc-state-disabled' class.
e.g.
//disballing prev button
$(".fc-button-prev").addClass('fc-state-disabled');
Also if you just want to allow to show only next month on clicking on next button then add following code.
function checkNext(e) {
if (isNextallowed == true) {
isNextallowed = false;
return true;
} else {
$(".fc-button-next").addClass('fc-state-disabled');
e.preventDefault();
return false;
}
}
$(".fc-button-next").on("click", checkNext);
$(".fc-button-next .fc-text-arrow").on("click", checkNext)
Checkout this Demo Fiddle

try -
$('#calendar').fullCalendar({
editable: true,
header : {
left : 'next today'
}
});
You can also refer to the documentation of the fullCalendar API to get more insight into how it works and other possible options. Refer - Full Calendar from Adam Arshaw

Here's my simple solution.
Place this code in the renderView function (around line 368 in version 1.5.4)) before ignoreWindowResize--; near the end of the function.
var lammCurrentDate = new Date();
var lammMinDate = new Date( lammCurrentDate.getFullYear(), lammCurrentDate.getMonth(), 1, 0, 0, 0, 0);
if (currentView.start <= lammMinDate){
header.disableButton('prev');
} else {
header.enableButton('prev');
}

jquery ui datepicker go to today button

i need my calendar to go to the current date when [today] button is clicked, so that the user can get to the current day when browsing my calendar.
for example the current month is feb 2013
and the user is browsing on the dec 2015 page of the calendar when he clicks the [today] button it will automatically return to the current days page of the calendar which is
feb 2013.
i'am using
jquery-ui-datepicker.min.js
as a plugin for my calendar

The jQuery UI Datepicker has functionality built into it for this.
See this: http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#datepicker" ).datepicker({
showButtonPanel: true
});
});

You could do:
function TodaysDate() {
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
return month + "/" + day + "/" + year;
}
$("#btnToday").click(function() {
var today = new Date();
$(target).datepicker('setDate', TodaysDate());
}
Where target is your date picker control ID.

fullcalendar, how to limit the number of events per day in the month view

I have many events on a day, and it works as expected but now looking at the month view, my calendar grid is much taller that expected. I'd like to hide some of these events from the month view, like a summary with a visual que that there are more on this day than can be shown.
I can use eventRender and return false, but i would like to know how many events are on a given day, so i can limit the rendering to about 4, then perhaps i would add an event that says " more ... "
So the question may be : how to count the events on a given date ?
or is this more like a feature request to expose a max counter for month view ?
thanks

As of FullCalendar 2.1.0, this feature is included, just use:
$('#calendarBlock').fullCalendar({
eventLimit: true
[...]
});
Demo: http://arshaw.com/js/fullcalendar-2.1.0-beta2/demos/agenda-views.html
Documentation: http://fullcalendar.io/docs/display/eventLimit/

I have a similar requirement and was thinking of doing something like this:
in json feed, I would return special events that contain a count of events for each day.
Using appropriate full calendar eventRender callback, I would only display these special total count events depending on view by returning false in eventRender() for any events I don't want to see.
I haven't implemented this yet, but perhaps it can be a valid avenue. Correct me if I'm wrong.

This buggy (mostly abandoned) plugin does exactly what you're asking for. Check it out, and feel free to contribute. Warning: It is a hack, but fullcalendar itself has an API that needs a lot of work. Most of the important parts are trapped in a closure, which makes it very difficult to extend. There really is no way to accomplish this without hackery, unless you want to edit the plugin's source code.
That being said, this is the closest I have found to what you are asking for: https://github.com/lyconic/fullcalendar/tree/view-more

currently not possible. see feature request:
http://code.google.com/p/fullcalendar/issues/detail?id=304

You don't need to take much effort on taking the total count of events.
I have got a simple way to count total events on my fullCalendar. In the eventAfterAllRender , write something like this,
eventAfterAllRender: function(view) {
var allevents = $('#calendar').fullCalendar('clientEvents');
var countevents = 0;
if( allevents.length ) {
countevents = countevents + allevents.length;
}
if(!countevents) {
// alert('event count is'+countevents);
console.log('event count is',countevents);
}
}
-where calendar is my calendar #
This is all my way of doing. I am taking left from here. But I am sure, it is not that harder if you try something on the loading: function() of the fullCalendar to limit the number of events according to your wish.
Thanks though.

I did something like this:
function(start, end, callback) {
var viewName = $("#calendar").fullCalendar('getView');
var startTime = Math.round(start.getTime() / 1000);
var endTime = Math.round(end.getTime() / 1000);
MyWebService.MyWebMethod.GetEventsByView(startTime, endTime, viewName.name,
function(args) {
callback(args);
},
function(error) {
var e = error;
}
);
}
Here the GetEventsByView method returns a grouped set for month view and detailed set for agendaWeek and day views. But for this to work correctly, I had to set lazyFetching:false for the calendar.

I am doing like this
Css:
.MaxHght
{
height:16px;
}
.viewMore
{
float:right;
color: rgb(219, 104, 28);
cursor:pointer;
}
plugin code
dayClick: function (date, allDay, jsEvent, view) {
$('#fullCalendar').fullCalendar('changeView', 'agendaDay').fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
},
eventRender: function (event, element, view) {
element.qtip({
content: event.QText,
position: {
my: 'CenterBottom',
at:'TopCenter'
},
style: {
tip: 'bottomMiddle'
}
});
$(element).removeClass('MaxHght');
if (view.name == 'month') {
$(element).addClass('MaxHght');
var year = event.start.getFullYear(), month = event.start.getMonth() + 1, date = event.start.getDate();
var result = year + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date);
$(element).addClass(result);
var ele = $('td[data-date="' + result + '"]'),count=$('.' + result).length;
$(ele).find('.viewMore').remove();
if ( count> 3) {
$('.' + result + ':gt(2)').remove();
$(ele).find('.fc-day-number').after('<a class="viewMore"> More</a>');
}
}
},
eventAfterAllRender: function (view) {
if (view.name == 'month') {
$('td.fc-day').each(function () {
var EventCount = $('.' + $(this).attr('data-date')).length;
if (EventCount == 0)
$(this).find('.viewMore').remove();
});
}
},