Develop Reference

Flatpickr setting disabled dates using an array and days of week setting

I am trying to set up flatpickr to disable certain dates based on a csv file AND disable certain days of the week. I am not able to get both working at the same time, only one or the other.
My code so far:
$(document).ready(function () {
var csvurl = "dates.csv";
$.ajax({
type: "GET",
async: false,
url: csvurl,
dataType: "text",
success: function (data) {
var csvArray = $.csv.toArrays(data);
fCsvArray(csvArray);
}
});
function fCsvArray(csvArray) {
var daysArray = [];
for (var i = 0; i < csvArray.length; i++) {
var newItem = csvArray[i];
daysArray.push(csvArray[i][0]);
}
console.log("daysArray = " + daysArray);
flatpickr.localize(flatpickr.l10ns.ja);
$("#nkibo-date1").flatpickr({
disable: [
function (date) {
return (date.getDay() === 0 || date.getDay() === 1 || date.getDay() === 2 || date.getDay() === 6);
}
],
//disable: daysArray,
locale: {
firstDayOfWeek: 1
},
disableMobile: true,
minDate: new Date().fp_incr(7),
dateFormat: "Y/m/d"
});
}
});
If I comment out the first "disable" function and run the script with the second "disable" code, that part works too but I would like them to work together. I have read that using the Enable and Disable options together is not possible, since I tried to enable the days that are available, then adding the Disabled dates afterwards, as a workaround.
The dates are as follows (in case anyone needs them):
2022/10/06
2022/10/07
2022/10/12
2022/11/23
2022/12/07
2022/12/08

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/

Unable to assign String Array to Bootstrap DateTimePicker disabledDates

I'm using bootstrap datetimepicker with my ASP.net MVC5 application.
I'm trying to fetch the disabled dates from DB, create an Array of disabled dates and then pass that array in javascript:-
C#
public String[] disabledDates { get; set; } // This model property gets set from database.
e.g. disabledDates = ["2017-08-29","2017-11-22"];
<script type="text/javascript">
$(function () {
var disabledDatesAr = '#Model.disabledDates';
$('#scheduleDate').datetimepicker({
useCurrent: false,
minDate: new Date(),
format: 'DD-MM-YYYY hh:mm A',
showTodayButton: true,
sideBySide: true,
showClose: true,
showClear: true,
toolbarPlacement: 'top',
disabledDates: disabledDatesAr
});
});
</script>
But the above code doesn't work and DateTimePicker popup getting disabled.
Can anyone please guide me on how to assign this array value to disabled dates?
Thanks in advance.

When you have this section:
var disabledDatesAr = '#Model.disabledDates';
You are really just calling the ToString method of the object. The ToString method of an array outputs like this System.String[]. So really you are doing this in razor:
var disabledDatesAr = 'System.String[]';
What you want to do is create a JSON array, this will output the syntax you are expecting.
disabledDates = ["2017-08-29","2017-11-22"];
A nice neat way to do this would be as Stephen Muecke has mentioned in the comments.
var disabledDatesAr = #Html.Raw(Json.Encode(Model.disabledDates));
Without the Html.Raw razor would try to encode characters.
Here is some useful documentation: Json.Encode and Html.Raw.

Highlight multiple options in Cal Heatmap

I have an array of Javascript datetime objects which I want to display on a cal-heatmap. For this, i've done the following:
var startTimes = [] //array of datetimes to show
var cal = new CalHeatMap();
cal.init({
itemSelector: '.heat-map',
domain: 'day',
subDomain: 'hour',
range: range,
start: new Date(startTimes[0]),
highlight: new Date(startTimes[0])
});
for (s in startTimes) {
cal.highlight(cal.options.highlight.push(new Date(startTimes[s])));
}
This however, doesn't seem to work as only the first date gets marked.

Note that push returns the new length of the array and not the element you just added to it.
According to this and the doc of cal-heatmap/#highlight which states that the method expects a date, I guess your code should be:
for (s in startTimes) {
var date = new Date(startTimes[s]);
cal.options.highlight.push(date);
cal.highlight(date);
}

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