We Keep Coding

How do I speed up Javascript event handlers?

I implemented a list of courses so that when a course name is hovered over, the corresponding dates on the calendar are highlighted.
Javascript parses the dates when it is loaded and stores it with the DOM element, so that on mouseenter and mouseleave, JQuery highlights or removes the highlighting of the corresponding table cells in the calendar.
However, the page takes 8 seconds for the list of courses and the calendar to load and another 1 second to highlight or remove the highlighting of the table cells. coursesLoaded is when the course list finishes loading.
(function($) {
$(window).load(function() {
if ($('.calendar').length) {
var calendarOs = [];
$('.calendar').each(function(i, v){
$(this).html('');
$(this).prev().hide();
var calendar = $(this);
calendar.attr('index', i);
calendarO = new FullCalendar.Calendar(calendar[0], {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
header: {
left: '',
center: 'title',
right: ''
},
titleFormat: {
year: 'numeric',
month: 'long'
},
themeSystem: 'bootstrap',
fixedWeekCount: true,
contentHeight: "auto",
navLinks: false,
eventRender: function(event, eventElement) {
eventElement.addClass('calendar');
},
validRange: function(currentDate) {
return {
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
// end: new Date(currentDate.getFullYear(), currentDate.getMonth() + 4, 0)
};
}
});
calendarO.render();
calendarOs.push(calendarO);
});
var year = new Date().getFullYear();
var date, location, color, array, td;
//make update only one color
var updateColors = function(index) {
var calendar = $(`.calendar[index='${index}']`);
var calendarO = calendarOs[index];
var month = calendarO.getDate().getMonth();
var datesO = JSON.parse(calendar.attr('dates'));
calendar.find('td.richmond, td.burnaby').removeClass('richmond burnaby');
var traverseDates = (month == 0) ? [11, 0, 1] : ((month == 11) ? [10, 11, 0] : [month - 1, month, month + 1]);
traverseDates.forEach(function(month) {
datesO[month].forEach(function(obj) {
// console.log(obj)
calendar.find(`td[data-date=${obj.date}]:not(.fc-day-top)`).addClass(obj.location);
});
});
}
$(document).on(`coursesLoaded`, function(e, calendarIndex, dates) {
// console.log('coursesLoaded ' + calendarIndex);
var calendar = $(`.calendar[index='${calendarIndex}']`);
var calendarO = calendarOs[calendarIndex];
calendar.attr('dates', JSON.stringify(dates));
console.log(calendar.attr('dates'));
updateColors(calendarIndex);
calendar.parent().prev().find('ul.courses-list li a').hover(function(e){
console.log("hovering over: " + performance.now());
calendar.find('td.active').removeClass('active');
location = $(this).attr('location');
array = JSON.parse($(this).attr('dates'));
calendarO.gotoDate(array[0]);
updateColors(calendarIndex);
if (e.type == 'mouseenter') {
array.forEach(function(element) {
calendar.find(`td[data-date=${element}]:not(.fc-day-top)`).addClass('active');
});
}
console.log("done hovering: " + performance.now());
});
});
};
$(document).trigger('doneCalendars');
});
})(jQuery)
Here is the website: http://ess.ccmcanada.org/certified-training/

How to disable specific date materialize

Here is a javascript made by materialize, and I am trying to disable specific dates. But I tried a lot of code here but could not get any result from this.
<script>
var dateToday = new Date();
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
format: "yyyy-mm-dd",
min: dateToday,
max: new Date(2030, 11, 31),
closeOnSelect: true,
onOpen: function () {
this.clear();
},
onSet: function () {
var x,y,year,date,month;
x = $('.datepicker1').pickadate().val().toString();
y = x.split(/[ ,]+/);
date = y[0];
month = y[1];
year = y[2];
console.log(y[0]+" "+ y[1]+ " "+ y[2]);
if(date && month && year){
this.close();
}
}
});
$("#mcDateFrom").click(function(event) {
event.stopPropagation();
$("#mcDateFrom").first().pickadate("picker").open();
});
$("#mcDateTo").click(function(event) {
event.stopPropagation();
$("#mcDateTo").first().pickadate("picker").open();
});
</script>
I am also trying the below code also.
var array = ["2018-06-28","2013-03-15","2013-03-16"]
$('.datepicker').pickadate({
beforeShowDay: function(date){
var string = jQuery.pickadate.formatDate('yyyy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
But no result after trying a lot of things as well as this code. I need help. Thanks in advance.

How to disable dates between the saved events in fullcalendar

I am using a fullcalendar for creating schedules. What I am doing is, for each week, there must be only 3 schedules (processing date, payout date and credit date). If there are already schedules for that week, I need to prompt the user that schedules are already set. But if there's no schedule set, user can still post new schedule. I am already done with the logic of this scheduler, the only problem I have is how to disable dates between the set schedules for the week?
Example, I set 04-24-2018(processing date), 04-24-18(payout date) and 04-26-18(credit date)..
How can I disable the 04-22-18,04-23-18,04-25-18,04-27-18 and 04-28-18 on that week so that user cant create new schedules for that week?
schedule image
JAVASCRIPT
select:
function (start, end, jsEvent, view, resource) {
IsDateHasEvent(start);
}
function IsDateHasEvent(date) {
var allEvents = [];
allEvents = $('#calendar').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
//alert(v.start);
//return +v.start == +date;
if (v.start <= date) {
$("#eventIsAlreadySetModal").modal();
//alert(v.start);
}
});
return event.length > 0;
}
I can get all the dates with events whenever I try to alert the value of start date. But the dates between are still not disabled.
Can someone help me through this?
Thank you so much.
Full Javascript code
$(document).ready(function () {
var events = [];
var selectedEvent = null;
FetchEventAndRenderCalendar();
// ******************************************
// GET ALL SCHEDULES AND DISPLAY IN CALENDAR
// ******************************************
function FetchEventAndRenderCalendar() {
$.ajax({
type: 'GET',
url: '#Url.Action("GetSchedule")',
success: function (data) {
$.each(data, function (i, v) {
var eColor = "";
if (v.status == 'Completed')
{
eColor = '#3498DB';
}
if (v.status == 'Active') {
eColor = '#2CB05B';
}
if (v.status == 'Pending') {
eColor: '#DE6209';
}
events.push({
eventID: v.scheduleId,
title: v.processedDescription,
start: moment(v.processedDatetimeStart),
status: v.status,
color: eColor
});
events.push({
eventID: v.scheduleId,
title: v.payoutDescription,
start: moment(v.payoutDatetimeStart),
status: v.status,
color: eColor
});
events.push({
eventID: v.scheduleId,
title: v.creditDescription,
start: moment(v.creditDatetimeStart),
status: v.status,
color: eColor,
end: moment(v.creditDatetimeStart)
});
})
GenerateCalendar(events);
},
error: function (error) {
alert('failed');
}
})
}
// ******************************************
// GENERATE THE CALENDAR VIEW AND SCHEDULES
// ******************************************
function GenerateCalendar(events) {
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar({
contentHeight: 500,
header: {
left: 'prev,next today',
center: 'title',
right: 'month, agendaWeek, agendaDay, listWeek'
},
navLinks: true,
editable: true,
eventLimit: true,
eventColor: '#2CB05B',
droppable: false,
timeFormat: 'h(:mm)A',
timeZone: 'local',
events: events,
// **************************************
// display the saved schedule in calendar
// **************************************
eventClick:
function (calEvent, jsEvent, view) {
$("#statusLabel").text(calEvent.status);
$("#schedId").val(calEvent.eventID);
$("#schedDesc").html(calEvent.title);
$("#txtDateStart_Edit").val(calEvent.start.format("MM-DD-YYYY HH:mm A"));
$('#modalEditSchedule').modal();
if ($("#statusLabel").html() == "Completed")
{
$("#btnEditSched").hide();
}
if ($("#statusLabel").html() == "Active") {
$("#btnEditSched").hide();
}
},
// *************************************************
// select dates in calendar for posting new schedule
// *************************************************
selectable: true,
selectOverlap: true,
select:
function (start, end, jsEvent, view, resource) {
IsDateHasEvent(start);
},
// *********************************************
// disable past navigation button for past dates
// *********************************************
viewRender: function (currentView) {
var minDate = moment();
// Past dates
if (minDate >= currentView.start) {
$(".fc-prev-button").prop('disabled', true);
$(".fc-prev-button").addClass('fc-state-disabled');
}
else {
$(".fc-prev-button").removeClass('fc-state-disabled');
$(".fc-prev-button").prop('disabled', false);
}
},
// ******************************
// disable past dates in calendar
// ******************************
validRange: function (dateNow) {
return {
start: dateNow.subtract(1, 'days')
};
}
, dayClick: function (date) {
var events = $('#calendar').fullCalendar('clientEvents');
for (var i = 0; i < events.length; i++) {
//if (moment(date).isSame(moment(events[i].start))) {
if (moment(events[i].start) <= moment(date)) {
alert('with events');
break;
}
else //if (i == events.length - 1)
{
alert('none');
}
}
}
});
}
// **********************************
// show modal for adding new schedule
// **********************************
function openAddEditForm() {
$('#modalAddSchedule').modal();
}
});
function IsDateHasEvent(date) {
var allEvents = [];
allEvents = $('#calendar').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
//alert(v.start);
//return +v.start == +date;
if (v.start <= date) {
$("#eventIsAlreadySetModal").modal();
//alert(v.start);
}
});
return event.length > 0;
}

You need to:
check if there's at least 3 schedules on the same week;
if is there, then disable the other dates of that week.
Right? I'll try to solve the first part of your problem with javascript Date class. I don't know about FullCalendar, so if anyone can solve that part I would be glad, hehe.
We must check when a week starts and when it ends. Just with that we'll get ready to do some crazy stuff.
function printDate(year, month, day) {
month = (month < 10 ? '0' : '') + month.toString();
day = (day < 10 ? '0' : '') + day.toString();
return year + '-' + month + '-' + day;
}
function weekStart(dateString) {
var dateObject = new Date(dateString);
var dayOfWeek = dateObject.getDay();
if(dayOfWeek > 0) {
dateObject.setDate(day - dayOfWeek);
}
return printDate(dateObject.getFullYear(), dateObject.getMonth()+1, dateObject.getDate());
}
function weekEnd(dateString) {
var dateObject = new Date(dateString);
var dayOfWeek = dateObject.getDay();
if(dayOfWeek < 6) {
dateObject.setDate(day + (6-dayOfWeek));
}
return printDate(dateObject.getFullYear(), dateObject.getMonth()+1, dateObject.getDate());
}
function weekRange(dateString) {
return [weekStart(dateString), weekEnd(dateString)];
}
Nice, now we can get a "week range" from a date. But from that, can we get all dates of that week? Sure.
function getDatesFromWeek(wStart) {
var dates = [],
date = new Date(wStart),
count = 0;
while(count <= 6) {
date.setDate(date.getDate() + count);
dates.push(printDate(date.getFullYear(), date.getMonth()+1, date.getDate());
count++;
}
return dates;
}
Perfect. So now we should count for each range. Assuming you're receiving your info on a variable called schedules and each schedule have an index called date:
var weeks = {}, lockedDates = [];
for(var x in schedules) {
var week = weekRange(schedules[x].date);
var weekID = week.join('-');
if(weeks[weekID] == undefined) {
weeks[weekID] = 1;
} else {
weeks[weekID]++;
}
if(weeks[weekID] == 3) {
lockedDates = lockedDates.concat(getDatesFromWeek(week[0]));
}
}
Then you have all those dates to disable listed on lockedDates variable in format YYYY-MM-DD. Do you know how to do the rest?
EDIT
Let's change the last part I made to this:
function Locker() {
this.dates = [];
this.weeks = {};
}
Locker.prototype.add = function(dateString) {
var wStart = weekStart(dateString);
if(this.weeks[wStart] == undefined) {
this.weeks[wStart] = 1;
} else {
this.weeks[wStart]++;
}
if(this.weeks[wStart] == 3) {
this.lock(getDatesFromWeek(wStart));
}
}
Locker.prototype.lock = function(dates) {
this.lockedDates = this.lockedDates.concat(dates);
// do something
}
var calendarLocker = new Locker();
// everytime an user add a date, call calendarLocker.add(date);
// so when it reaches the limit, the locker will call calendarLocker.lock

How to block out dates in the Fullcalendar beyond a certain date

I have a date in the future which is always 30 days ahead of the current date. It's stored in a Date object. I worked this out using:
var currentDate = new Date();
var futureBlockDate = new Date();
futureBlockDate.setDate(currentDate.getDate() + 30);
Using the FullCalendar jQuery plugin I want to visually block out any days past this date on the calendar with a different background colour so a user knows they can't click on them or create an event on those days.
What is the best way to do this with the FullCalendar? Maybe disable all dates by default, and only enable for a specific range (from today's date through to 30 days in the future)?
I think I can apply a disabled background state to all the cells using the following code:
$(".fc-widget-content").addClass("disabled");
.disabled .fc-day-content {
background-color: #123959;
color: #FFFFFF;
cursor: default;
}
How can it be done?

Use the dayRender option to add a "disabled" class to out of range dates.
$('#calendar').fullCalendar({
...
dayRender: function(date, cell){
if (date > maxDate){
$(cell).addClass('disabled');
}
}
...
});
You can also use the viewRender event and the gotoDate method, to prevent users to navigate farther than 30 days after today :
$('#calendar').fullCalendar({
...
viewRender: function(view){
if (view.start > maxDate){
$('#calendar').fullCalendar('gotoDate', maxDate);
}
}
...
});

How about this solution?
dayClick: function(date, allDay, jsEvent, view) {
var myDate = new Date();
//How many days to add from today?
var daysToAdd = 15;
myDate.setDate(myDate.getDate() + daysToAdd);
if (date < myDate) {
//TRUE Clicked date smaller than today + daysToadd
alert("You cannot book on this day!");
} else {
//FLASE Clicked date larger than today + daysToadd
alert("Excellent choice! We can book today..");
}
}

In new version V4 of Full Calendar, there are lot of updates and you can find the settings for your need
Limits which dates the user can navigate to and where events can go.
// constrain to a discrete range
var calendar = new Calendar(calendarEl, {
defaultView: 'dayGridMonth',
validRange: {
start: '2017-05-01',
end: '2017-06-01'
}
});
// constrain to an open-ended range
var calendar = new Calendar(calendarEl, {
defaultView: 'dayGridMonth',
validRange: {
start: '2017-05-01'
}
});

For someone who is looking for a solution to define a min-display-date and max-display-date: (for fullcalendar v2)
$('#calendar').fullCalendar({
defaultDate: new Date(),
viewRender: function(view, element) {
curdate = new Date();
viewdate = new Date(view.start);
// PREV - force minimum display month to current month
if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1, 1).getTime() <=
new Date(curdate.getFullYear(), curdate.getMonth(), 1).getTime()){
$('.fc-prev-button').prop('disabled', true);
$('.fc-prev-button').css('opacity', 0.5);
} else {
$('.fc-prev-button').prop('disabled', false);
$('.fc-prev-button').css('opacity', 1);
}
// NEXT - force max display month to a year from current month
if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1).getTime() >=
new Date(curdate.getFullYear() + 1, curdate.getMonth() + 1).getTime()){
$('.fc-next-button').prop('disabled', true);
$('.fc-next-button').css('opacity', 0.5);
} else {
$('.fc-next-button').prop('disabled', false);
$('.fc-next-button').css('opacity', 1);
}
}
});

this one chose the current month period
<?php $numerodias = cal_days_in_month(CAL_GREGORIAN, date('m'), date('Y')); ?>
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'today'
},
defaultDate: moment(),
editable: false,
//height:'auto',
//weekends: false,
defaultView: 'agendaWeek',
eventLimit: true,
events: {
url: 'php/get-events.php',
error: function() {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
},
viewRender: function(view,element) {
var now = new Date();
var end = new Date();
end.setMonth(now.getMonth());
end.setDate(<?php echo $numerodias; ?>);
now.setDate(1);
if ( end < view.end) {
$("#calendar .fc-next-button").hide();
return false;
alert(end);
}
else {
$("#calendar .fc-next-button").show();
}
if ( view.start < now) {
$("#calendar .fc-prev-button").hide();
return false;
}
else {
$("#calendar .fc-prev-button").show();
}
}
});
});

for disable cell on click (version 2.0) :
dayRender: function( date, cell ) {
// It's an example, do your own test here
if(cell.hasClass("fc-other-month")) {
cell.addClass('disabled');
}
},
dayClick: function(date, jsEvent, view) {
if($(jsEvent.target).hasClass("disabled")){
return false;
}
// Your code
// ....
}

Simply add this code in Fullcalendar:
select: function (start, end, jsEvent, view) {
if (start.isBefore(moment())) {
$('#calendar').fullCalendar('unselect');
return false;
}
else {
var currentDate = moment(start).format('YYYY/MM/DD'));
alert(currentDate);
}
}
Simple and fast. Enjoy!

jQuery UI tooltip not displaying

I want to show a tooltip popup when clicking on a date in the UI Datepicker:
(function($) {
var events = [
{ Title: "Five K for charity", Date: new Date("09/16/2013") },
{ Title: "Dinner", Date: new Date("09/17/2013") },
{ Title: "Meeting with manager", Date: new Date("09/18/2013") }
];
//console.log(events[1]);
$("#my-calendar" ).datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
//console.log(event.Date.valueOf() );
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
/* Determine if the user clicked an event: */
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
/* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
var day = new Date(event.Date).getDate().toString();
$("a.ui-state-default:contains("+day+")").tooltip({content:'yay'}); //selector definitely returns the relevant day
}
}
});
})(jQuery);
However, no tooltip appears when I click on the date. The tooltip eventually needs to contain links to events.
Example here