Develop Reference

How to change more than one cell background color in fullCalendar

I am changing the cell background color of jan 12 using dayRender. How can I change one more cell background color in same month?
var data=[{
'specialDay':'2017-01-12'
}];
console.log(data)
var $calendar = $('#calendar').fullCalendar({
defaultView: 'month',
dayRender: function (date, cell) {
var today = new Date(data[0].specialDay);
if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
cell.css("background-color", "red");
}
}
});
http://jsfiddle.net/CYnJY/937/
EDIT Attempt at using a loop, which still isn't working properly:
var data = [{
'name': 'xxx',
'specialDay': [{
'day': '2017-01-12'
}, {
'day': '2017-01-19'
}]
}];
console.log(data)
var $calendar = $('#calendar').fullCalendar({
defaultView: 'month',
dayRender: function(date, cell) {
$.each(data.specialDay, function(index, element) {
alert(element.day)
var today = new Date(data[0].specialDay);
if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
cell.css("background-color", "red");
}
})
}
});
http://jsfiddle.net/CYnJY/941/

There were a couple of relatively simple things wrong with your attempt, both of which resulted in errors being displayed in the browser console:
I couldn't see any reason for data to be an array. SpecialDay within it is an array and that seemed to be sufficient for your purpose. Then in places you were trying to access data.specialDay, which didn't exist (it would have had to be data[0].specialDay because you had to access the first object of the data array, which then contained the specialDay property).
new Date(data[0].specialDay); The date is actually in the day property of the object(s) within the specialDay array. Putting an array into the Date constructor doesn't make a lot of sense - an array can't be parsed as a date. Ironically, right above it you had alerted element.day, which is what you needed to feed into the array, so you weren't far away from the correct solution to this one.
Here's a working version of the code:
var data = { //data is now an object
'name': 'xxx',
'specialDay': [{
'day': '2017-11-12'
}, {
'day': '2017-11-19'
}]
};
console.log(data)
var $calendar = $('#calendar').fullCalendar({
defaultView: 'month',
dayRender: function(date, cell) {
$.each(data.specialDay, function(index, element) {
//alert(element.day)
var today = new Date(element.day); //put the correct variable into the Date constructor
if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
cell.css("background-color", "red");
}
})
}
});
See http://jsfiddle.net/CYnJY/947/ for a demo.
One other observation: you are using a very old version of fullCalendar (1.6.1) which is no longer supported. The current version is 3.6.2. I would advise you to upgrade as soon as you can. There may be a small number of changes you need to make, including upgrading your jQuery version, including moment.js etc, but it's all clear in the documentation. This link has a guide to upgrading from version 1.x to 2.0 and above: https://fullcalendar.io/wiki/Upgrading-to-v2/

How to convert an associative array of dates into object in jQuery for flatpickr

I've been trying to figure this out for hours, and not getting anywhere at all.
OK, so I have a database table that saves staff holidays, using a start and an end date, so it's a range. If it's a single day, it will be the same date but normally it's a range.
I am using Flatpickr on my site in order to book a job for a specific date and time, but I need to disable dates that the chosen staff member is NOT available on. When the user selects a staff member, there is an ajax call to the holiday table in the database and fetches any holiday dates, puts them in an array then returns it back to the ajax in JSON. Here's my call ($(this).val() refers to the staff dropdown, and this will run on change):
var staffId = $(this).val();
var dateObj = {};
var parsed;
$.post( '/get-availability', { staff_id: staffId }
).done( function(response) {
if(response.length > 0) {
parsed = JSON.parse(response);
$.each(parsed, function(i, element) {
console.log("i : " + i);
dateObj = { from : element['from'], to : element['to'] };
});
}
The PHP in get-availability is as follows:
$staff_id = $request->get('staff_id');
$staff_entity = $this->getDoctrine()->getManager()->getRepository('AppBundle:Staff')->findOneBy(array('id' => $staff_id));
// get all holidays for the staff member
$holiday_repo = $this->getDoctrine()->getManager()->getRepository('AppBundle:Holiday');
$holidays = $holiday_repo->findBy(array('staff' => $staff_entity));
$result = array();
if(!empty($holidays)) {
$x = 0;
foreach ($holidays as $row) {
$result[$x]['from'] = $row->getStartDate()->format('Y-m-d');
$result[$x]['to'] = $row->getEndDate()->format('Y-m-d');
$x ++;
}
}
return new Response(json_encode($result));
Coming back to the ajax, I need to layout my flatpickr config as follows (the dates are just examples):
disable: [
{
from: "2017-04-01",
to: "2017-06-01"
},
{
from: "2017-09-01",
to: "2017-12-01"
}
]
But my dateObj will get overwritten each time, so it only adds the LAST date range in:
var config = {
disable: [
dateObj
]
};
Basically, I need to know how to correctly adapt the $.each loop in order to get a result like the first example above, but nothing works. So far I've tried:
dateObj += { from : element['from'], to : element['to'] };
dateObj.i = { from : element['from'], to : element['to'] };
Then making it an array and trying:
dateObj[i] = { from : element['from'], to : element['to'] };
JSON.stringify(dateObj)
But every single one fails. I'm hoping someone can help me with this!

OK, in the end I used the DatePeriod() function and passed all the dates back as a single array, rather than in the from and to blocks. Not exactly the most optimised version of doing it but it works.
foreach ($holidays as $row) {
$start_date = new \DateTime($row->getStartDate()->format('Y-m-d'));
$end_date = new \DateTime($row->getEndDate()->format('Y-m-d'));
$date_range = new \DatePeriod($start_date, new \DateInterval('P1D'), $end_date);
foreach($date_range as $date){
$date_array[] = $date->format('Y-m-d');
}
// Add the end date as this is not included in the date period.
$date_array[] = $row->getEndDate()->format('Y-m-d');
}
$date_array then gets encoded and passed back to the Ajax where it is parsed and added to the config of flatpickr.

Does moment.js comparing dates not work properly?

I am building a datatable and wish to compare a date string that is passed in, to todays date, and then do something based on the outcome (before today, same as today etc etc)
"createdRow": function (row, data, dataIndex) {
var formattedDate = moment().format("DD-MMM-YYYY");
var dateIncoming = moment(data.NextDue, 'DD-MMM-YYYY').format("DD-MMM-YYYY");
if (dateIncoming < formattedDate) {
dateDue = true;
}
if (dateDue === true && data.AssignedToName !== "With Caller") {
$(row).css({ "color": "red" });
}
}
So it is mainly working, but I have one record where the dateDue is 15-03-2017 and the formattedDate is also 15-03-2017, but the css on my row is still activating.
I would normally expect this to happen if a datetime was also involved, and I also have several other values where dateDue is 15-03-2017 and these filter correctly.

You can use isBefore and isAfter to compare moment objects istead of <.
Moreover you need to remove format() since it trasforms moment object in string, so, as stated in the comments, in your code you are comparing strings intead of moment/dates.
Your code will be:
"createdRow": function (row, data, dataIndex) {
var formattedDate = moment();
var dateIncoming = moment(data.NextDue, 'DD-MMM-YYYY');
if (dateIncoming.isBefore(formattedDate)) {
dateDue = true;
}
if (dateDue === true && data.AssignedToName !== "With Caller") {
$(row).css({ "color": "red" });
}
}

Can't set properly jqueryUI datepicker when using array for numberOfMonth

I have a problem with Jquery UI datepicker. When I try to set numberOfMonths options, the script fails with an error of "undefined is not a function". I'm using jquery ui 1.11.2. Here is my code:
$(document).ready(function () {
var fechaDefecto = new Date('2014/01/01');
var fechaFin = new Date('2014/08/31');
var SelectedDates = {};
SelectedDates[new Date('12/25/2014')] = new Date('12/25/2014');
SelectedDates[new Date('12/12/2014')] = new Date('12/12/2014');
SelectedDates[new Date('06/06/2014')] = new Date('06/06/2014');
$('#cal').datepicker(
{
beforeShowDay: function (date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true, "Highlighted", Highlight];
} else {
return [true, '', ''];
}
},
minDate : fechaDefecto,
maxDate : fechaFin,
numberOfMonths: [2, 3]
});
});
If I set numberOfMonths to a number and not an array, there is no problem, but the thing is I need to display a semester with two rows of 3 calendars for my application.
I will really appreciate some help, please.
Another weird thing is that when I call the getter method for that option: $('#cal').datepicker('option', 'numberOfMonths'); I get a correct output because it shows the array ([2, 3]).

It seems like the last stable version of Jquery UI wasn't working in my case, I switched to using Jquery 1.8 and Jquery UI 1.9 and now it's working fine

Disable dates older than today with datetimepicker

I'm trying to figure out how to disable all the dates older than today, this gets tricky with the bootstrap datetime picker I am using below.
The examples allows for an array of dates to be passed when creating the object :
$(function () {
$('#datetimepicker7').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
How can I do this without calculating all the dates before today and passing that to the function ?
Doc : http://eonasdan.github.io/bootstrap-datetimepicker/#example8

I think you looked for a bad option....
Doc : Look at here : http://eonasdan.github.io/bootstrap-datetimepicker/#options
In this doc, the option's name is minDate
Extract :
minuteStepping:1, //set the minute stepping
minDate:`1/1/1900`, //set a minimum date <---- HERE
maxDate: ,

$(function () {
$('#datetimepicker7').datetimepicker({
defaultDate: moment("11/01/2013", "DD-MM-YYYY"),
minDate: moment()
});
});

Apart from setting the minDate property, you might also want to disable times before the current time. You would do this as follows:
First, you need to initialise the minDate parameter to midnight of the current day. Then, you bind an event listener to the dp.change event and reject any times that are earlier than the current time.
When rejecting such a time, you notify the user and reset the DateTimePicker time to the current time. I've created a function to do this:
// Argument obj is the used DateTimePicker object
// Argument f is the selected datetime by the user
// Argument n is the current datetime
var checkDate = function (obj, f, n) {
if (f.getTime() < n.getTime()+60*1000 && !open) {
open = true;
$('#message').dialog({
modal: true,
position: ['center', 'center'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I understand. Let me try again": function () {
$(this).dialog("close");
obj.data('DateTimePicker').setDate(n);
open = false;
}
}
});
}
}
Likewise, you still want to update the minDate and maxDate parameters upon dp.change too. Therefore, combining both checking the time and updating the properties, you would get:
jQuery("#startDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
This will yield exactly what you are after:
You can find the full code in the jsFiddle I prepared for you:
GO TO THE DEMO